threejs

1. npm install --save three

   

2. 场景 （Scene)

   const scene = new THREE.Scene()

  

3. 摄像机    (Camera)

        const camera = new Three.perspectiveCamera() // 透明相机

  

4. 透视相机（PerspectiveCamera）

    

const camera = new THREE.PerspectiveCamera(45,width/height,1,1000)
scene.add(camera)

• 更新摄像头

  • // 监听画面变化，更新渲染画面
    window.addEventListener("resize",()=>{
        // 更新摄像头
        camera.aspect = window.innerWidth / window.innerHeight
        // 更新摄像头投影矩阵
        camera.updateProjectionMatrix()
        // 更新渲染器
        renderer.setSize(window.innerWidth,window.innerHeight)
        // 设置渲染器的像素比
        renderer.setPixelRatio(window.devicePixelRatio)
    })
    

5.添加物体

立方缓冲几何体

new THREE.BoxGeometry(1,1,1)

6.轨道控制器(OrbitControls)

• 阻尼 控制器

• 坐标AxesHelper

cube 物体 3d控制

• 旋转

  • cube.rotation.set(弧度 x,y,z) cube.rotation.x = 0.01

• 缩放

  • cube.scale.set(x,y,z) cube.scale.x = x

• 移动

  • cube.position.set(x,y,z) cube.position.x = x

   Clock 

Gsap

•  var animate1 = gsap.to(cube.rotation, {
          x: 2 * Math.PI,
          duration: 5,
          ease: "power1.inOut",
          // 动画完成
  
          onComplete:()=>{
              console.log("动画完成");
          },
          onStart: ()=>{
              console.log("动画开始");
          },
          repeat: -1, // -1无限循环
          delay: 2, // 延迟2s
          yoyo: true // 反向恢复
      })
  
  window.addEventListener("dblclick",()=>{
      if(animate1.isActive()){
          animate1.pause() // 暂停动画
      } else {
          animate1.resume() // 恢复动画
  }
  })
  

• 根据尺寸变化实现自适应画面

  • // 更新摄像头
    window.addEventListener('resize',()=>{
        
        camera.aspect = window.innerWidth / window.innerHeight)
        camera.updateProjectionMatrix()
        // 更新渲染器
        renderer.setSize(window.innerWidth , window.innerHeight)
        // 设置渲染器的像素比
        renderer.setPixelRatio(window.devicePixelRatio)
    
    }}
    

• 球缓冲几何体 (SphereGeometry)

• npm install --save dat.gui

• import * as dat from 'data.gui'
  const gui = new dat.GUI()