three.js系列之网格模型mesh

mesh由两部分组成，geometry几何体和material材质

Geometry

我们知道几何体都是有点构成的，在三维场景中，点的坐标由x,y,z三个值组成，所以要绘制一个点，需要提供一个有三个数值组成的坐标{x, y, z}，以此类推，三角形则需要三组坐标{x1, y1, z1, x2, y2, z2, x3, y3, z3}，正方形需要四组….

threejs为我们封装好了基本的几何图形，如BoxGeometry, CircleGeometry, PlaneGeometry, SphereGeometry等常用图形，我们只需要提供组成图形的基本信息如长、宽、高、半径等等就可构建出图形

另外threejs也提供了一个可供我们自己创建图形的BufferGeometry，我们可以提供点的坐标来自由组合图形

let positions = new Float32Array([
  -10, 0, 0,
  10, 0, 0,
  0, 10, 0,
  0, 0, 5,
  0, 10, 5,
  0, 0, 15
])

以上的六个点可以组成一个自定义图形

Material

接下来轮到材质了，材质控制的是物体的外观，常见的材质包括

• MeshBasicMaterial（不受光照影响）
• MeshNormalMaterial
• MeshStandardMaterial (基于物理的渲染， PBR)
• ShaderMaterial (自定义材质渲染的材料)

物体的移动

控制物体的移动，我们通常用到四个属性

• position 位置
• scale 大小
• rotation 旋转
• quaternion 旋转（四元数属性）

移动物体示例：

// 创建一个正方体
const cube = new THREE.Mesh(
    new THREE.BoxGeometry(1, 1, 1),
    new THREE.MeshBasicMaterial({color: 0xff0000})
)
// 改变物体的位置
cube.position.x = -2
//或者
cube.position.set(0.7, - 0.6, 1)

动画效果

这里需要用到的是tween这个利器了，实现方法

• 创建需要的动画效果
• 动画效果最后利用requestAnimationFrame递归调用动画方法，实现每一帧都会调用这个动画方法

// 利用GSAP实现流畅动画
const tick = () => {
    gsap.to(mesh.position, {
        x: 2,
        duration: 1,
        delay: 1
    })
    // Update Objects
    renderer.render(scene, camera)
    window.requestAnimationFrame(tick)
}
tick();