【Three.js基础学习】15.scroll-based-animation

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

 课程要点

        结合html等场景 做滚动动画

        1.遇到的问题， 在向下滚动时，下方会显白（部分浏览器）

            解决：alpha:true ,在WebGLRenderer 中设置alpha : true ; 同时在style.css文件中设置html 背景颜色

        2.添加 圆环，锥型，圆环纠结形状

        3.添加材质 卡通 由于 卡通对光 才能看见 因此 加一个定向光

        4.此时 显示的颜色是两种 ，但是根据文档 可以看到有三种色， 因此可以通过 纹理实现

        gradientTexture.magFilter = THREE.NearestFilter

        5.设置位置，同时转动

        6.向下移动网页 更改camera视角

        7. 视差 ：通过不同观察点看到一个物体的行为

            希望能有深度 ，在鼠标移动时，相机视角能有适当的强度变化

        实现： 由于滚动 和 移动鼠标都是 移动camera视角 导致 滚动不生效

            1. 创建组 ，在视差时候 移动组， 而camera在组中， 滚动时 移动相机 解决

       

        8.实现平滑 缓慢 移动 速度不要太快    

        9.实现在不同电脑中 不同屏幕频率相同的移动速度

        let previousTime = 0

        const deltaTime = elapsedTime - previousTime

        previousTime = elapsedTime

        10. GSAP

---

一、代码

import * as THREE from 'three'
import * as dat from 'lil-gui'
import gsap from 'gsap'


/**
 * Debug
 */
const gui = new dat.GUI()

const parameters = {
    materialColor: '#ffeded'
}

gui
    .addColor(parameters, 'materialColor')
    .onChange(()=>{
        material.color.set(parameters.materialColor)
        particleMaterial.color.set(parameters.materialColor)
    })

/**
 * Base
 */
// Canvas
const canvas = document.querySelector('canvas.webgl')

// Scene
const scene = new THREE.Scene()


/* 
    Objects
*/
// Texture
const textureLoad = new THREE.TextureLoader()
const gradientTexture =  textureLoad.load('/textures/gradients/3.jpg')
gradientTexture.magFilter = THREE.NearestFilter // 设置最近过滤器 牵扯到WebGL原理

// Material
const material = new THREE.MeshToonMaterial({
    color:parameters.materialColor,
    gradientMap:gradientTexture, 
}) // 卡通材质 有光的情况才会出现

//  Meshs
const objectsDistance = 4
const mesh1 = new THREE.Mesh(
    new THREE.TorusGeometry(1,0.4,16,60),  // 环形
    material
)
const mesh2 = new THREE.Mesh(
    new THREE.ConeGeometry(1,2,32), // 锥
    material
)
const mesh3 = new THREE.Mesh(
    new THREE.TorusKnotGeometry(0.8, 0.35, 100, 16), // 环形缓冲
    material
)
// mesh1.position.y = 2
// mesh1.scale.set(0.5,0.5,0.5)

// mesh2.visible = false

// mesh3.position.y = -2
// mesh3.scale.set(0.5,0.5,0.5)

const sectionMeshes = [mesh1,mesh2,mesh3]

mesh1.position.y = - objectsDistance * 0
mesh2.position.y = - objectsDistance * 1
mesh3.position.y = - objectsDistance * 2

mesh1.position.x = 2
mesh2.position.x = -2
mesh3.position.x = 2

scene.add(mesh1,mesh2,mesh3)

/* 
    Particles
*/
// Geometry
const particleCount = 200
const positions = new Float32Array(particleCount * 3)
for(let i = 0; i< particleCount;i++){
    positions[i * 3 + 0] = (Math.random() - 0.5) * 10
    positions[i * 3 + 1] = objectsDistance * 0.5 - Math.random() * objectsDistance * 3
    positions[i * 3 + 2] = (Math.random() - 0.5) * 10
}

const particleGeometry = new THREE.BufferGeometry()
particleGeometry.setAttribute('position',new THREE.BufferAttribute(positions,3))

const particleMaterial = new THREE.PointsMaterial()
particleMaterial.size = 0.03
particleMaterial.color = new THREE.Color(parameters.materialColor)
particleMaterial.sizeAttenuation = true

const particle = new THREE.Points(
    particleGeometry,
    particleMaterial
)
scene.add(particle)



/* 
    ligths
*/
const directionalLight = new THREE.DirectionalLight('#ffffff',1)
directionalLight.position.set(1,1,0)
scene.add(directionalLight)

/**
 * Sizes
 */
const sizes = {
    width: window.innerWidth,
    height: window.innerHeight
}

window.addEventListener('resize', () =>
{
    // Update sizes
    sizes.width = window.innerWidth
    sizes.height = window.innerHeight

    // Update camera
    camera.aspect = sizes.width / sizes.height
    camera.updateProjectionMatrix()

    // Update renderer
    renderer.setSize(sizes.width, sizes.height)
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})


/* 
    Group
*/
const cameraGroup = new THREE.Group()
scene.add(cameraGroup)

/**
 * Camera
 */
// Base camera
const camera = new THREE.PerspectiveCamera(35, sizes.width / sizes.height, 0.1, 100)
camera.position.z = 6
cameraGroup.add(camera)

/**
 * Renderer
 */
const renderer = new THREE.WebGLRenderer({
    canvas: canvas,
    alpha:true,
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

/* 
    Scroll
*/
let scrollY = window.scrollY
let currentSection = 0
window.addEventListener('scroll',()=>{
    scrollY = window.scrollY

    const newSection = Math.round(scrollY / sizes.height) // 四舍五入判断 几何体旋转的时机
    if(newSection != currentSection){
        currentSection = newSection
        console.log(sectionMeshes[currentSection].rotation)
        gsap.to(
            sectionMeshes[currentSection].rotation, // 设置动画 0，1，2的动画效果
            {
                duration:1.5, // 时间
                ease:'power2.inOut', // 进出
                x:'+=6',
                y:'+=3',
                z:'+=1.5',
            }
        )
    }
})

/* 
    Cursor
*/
const cursor = {}
cursor.x = 0
cursor.y = 0

window.addEventListener('mousemove',(e