PlaneGeometry平面

PlaneGeometry对象是由BufferGeometry对象封装的：three.3dbooks.top/docs/#api/z…

球体SphereGeometry

• 若要调试widthSegments属性，在更改属性值的同时，需重新生成新的球体，否则没法修改几何属性。
• 调试position属性的x、y、z，与调试translateX、Y、Z，两者呈现的结果不同。前者的最大、最小值是固定的；后者进行相对运动，并且是累加的，球体的中心坐标会变化。实际开发中，一般使用position属性。
• boundingBox与boundingSphere属性，可检测物体间的碰撞。

datGui () {
    const _this = this
    const gui = new dat.GUI();
    const params = {
      widthSegments: _this.mesh.geometry.parameters.widthSegments, 
      heightSegments: _this.mesh.geometry.parameters.heightSegments, 
      generateGeometry () {
        // 删除旧的球体
        _this.mesh.geometry.dispose()
        // 生成新的球体
        const geometry = new THREE.SphereGeometry(1, params.widthSegments, params.heightSegments)

        _this.mesh.geometry = geometry
      },
      // 旋转
      rotation () {
        // _this.mesh.rotation.x += 30
        // 添加动画效果
        gsap.to(_this.mesh.rotation, { duration: 1, delay: 0, x: _this.mesh.rotation.x + Math.PI })
      },
      x: 0,
    }

    // 是否开启轨道控制器
    gui.add(_this.orbitControls, 'enabled')
    // mesh的可见
    gui.add(_this.mesh, 'visible')
    // 物体的线框
    gui.add(_this.mesh.material, 'wireframe')

    // 调试球体
    gui.add(params, 'widthSegments', 3, 100, 1).onChange(val => {
      params.widthSegments = val
      params.generateGeometry()
    })
    gui.add(params, 'heightSegments', 3, 100, 1).onChange(val => {
      params.heightSegments = val
      params.generateGeometry()
    })
    // 球体旋转
    gui.add(params, 'rotation')
    // 球体位移
    gui.add(_this.mesh.position, 'x', -3, 3, 0.1)
    gui.add(params, 'x', -3, 3, 0.1).name('translateX').onChange(val => {
      params.x = val;
      _this.mesh.geometry.translate(params.x, 0, 0)
      console.log(_this.mesh.position);
      console.log(_this.mesh.geometry);
    })
    // 球体缩放
    gui.add(_this.mesh.scale, 'x', 1, 3, 0.1).name('scaleX')
},

动画库

gsap

BufferAttribute 对象

更新几何体的方法：

1. 重新创建一个几何体，替换原来的几何体（旧的几何体销毁）；
2. 直接更新旧的几何体 attribute ，使用needsUpdate()方法，性能更好更高效；