ThreeJS学习：模型

前言

在前文ThreeJS学习：场景、模型、相机、渲染中，我们介绍过，在ThreeJS中，我们用模型（mesh）指代世界中的物体。而ThreeJS为我们提供了多种模型，适合在不同的场景下使用。

一、网格网络模型

ThreeJS中最常用的模型。

  // 创建几何体，模型的形状
  const geometry = new THREE.BoxGeometry(100, 100, 100);

  // 创建材质，模型的材质
  const material = new THREE.MeshBasicMaterial({
    color: 0xFF_00_00, // 0xff0000设置材质颜色为红色
    transparent: true, // 开启透明
    opacity: 0.5, // 设置透明度
  });

  const mesh = new THREE.Mesh(geometry, material);
  mesh.position.set(0, 0, 0);

ThreeJS中的所有模型都继承于Object3D类，都可调用Object3D的方法，如旋转（rotateX，rotateY，rotateZ）。

效果图

二、点模型

在ThreeJS中用点模型用来绘制点。

// 创建一个空的几何体对象
  const geometry = new THREE.BufferGeometry();

  // 类型化数组创建顶点数据
  const vertices = new Float32Array([
    0,
    0,
    0, // 顶点1坐标
    50,
    0,
    0, // 顶点2坐标
    0,
    50,
    0, // 顶点3坐标
    0,
    0,
    50, // 顶点4坐标
  ]);

  const attribue = new THREE.BufferAttribute(vertices, 3);

  // 设置几何体attributes属性的位置属性
  geometry.attributes.position = attribue;

  // 点材质对象
  const material = new THREE.PointsMaterial({
    color: 0xFF_00_00, // 线条颜色
    size: 10, // 点对象像素尺寸
  });
  // 创建点模型对象
  const mesh = new THREE.Points(geometry, material);
  mesh.position.set(0, 0, 0);

效果图

三、线模型

在ThreeJS中常使用线模型来绘制线段（包括直线、曲线）。

  // 创建一个空的几何体对象
  const geometry = new THREE.BufferGeometry();

  // 类型化数组创建顶点数据
  const vertices = new Float32Array([
    0,
    0,
    0, // 顶点1坐标
    50,
    0,
    0, // 顶点2坐标
    0,
    50,
    0, // 顶点3坐标
    0,
    0,
    50, // 顶点4坐标
  ]);

  const attribue = new THREE.BufferAttribute(vertices, 3);

  // 设置几何体attributes属性的位置属性
  geometry.attributes.position = attribue;

  // 点材质对象
  const material = new THREE.LineBasicMaterial({
    color: 0x00_00_00, // 线条颜色
    size: 10, // 点对象像素尺寸
  });
  // 创建点模型对象
  const mesh = new THREE.LineSegments(geometry, material);
  mesh.position.set(0, 0, 0);

效果图

四、精灵模型

精灵模型是ThreeJS中一种特殊的模型，它与其他模型不同之处在于以下两点：

• 精灵模型的创建，仅需要材质（SpriteMaterial），而不需要几何体

精灵模型的几何体是一个长和宽都为1的平面，可通过scale调整实际尺寸；

• 精灵模型的平面终平行于Canvas画布或者说屏幕，不会随着照相机的角度变化而旋转。

而PlaneGeometry创建的矩形平面会随着照相机的角度变化而旋转。

  const group = new THREE.Group();
  const texture = new THREE.TextureLoader().load(YuDi, () => {
    render(); // 执行渲染操作
  });
  // 创建精灵模型材质
  const spriteMaterial = new THREE.SpriteMaterial({
    map: texture,
  });

  for (let i = 0; i < 16_000; i++) {
    //  创建精灵模型
    const sprite = new THREE.Sprite(spriteMaterial);
    group.add(sprite);
    // 设置模型比例
    sprite.scale.set(1, 1, 1);
    // 设置精灵模型位置，在长方体空间上上随机分布
    const x = 1000 * (Math.random() - 0.5);
    const y = 600 * Math.random();
    const z = 1000 * (Math.random() - 0.5);
    // 设置模型位置
    sprite.position.set(x, y, z);
  }

效果

精灵模型一般用来模拟场景中大范围的、小型的、相同的物体，例如下雨、下雪、星空中的星星等等。

五、模型分组 Group

在上述精灵模型中的例子中，我们用到了一个对象Group，即组对象。
在ThreeJS中，为了方便场景中模型对象的管理，引入了Group，可将多个模型放在同一个Group下，由该Group进行管理。
同时Group也可添加一个Group为其子对象，即场景中的所有对象构成了一个树形结构的对象层级结构。

• group.children: 查询组对象下所有的子对象。
• group.traverse:遍历组对象下所有子对象。
• group.name：可设置组对象的别名，然后通过scene.getObjectByName ("4号楼")快速查找组对象。

1、局部坐标与世界坐标

通过模型分组，可将一个模型添加到一个组下，但是模型可以设置坐标，组对象也可以设置左边，二者都设置坐标后，模型在世界中的真实坐标是咋样的？有没有收到其所在组的坐标的影响呢？

• 局部坐标：是某个模型在其组内的坐标；

设置模型的position就是设置它的局部坐标

• 世界坐标：是某个模型在整个场景中的坐标，此坐标是由其所在组的世界坐标与模型的局部坐标共同计算得到的。

如果由树形层级结构，则叶子节点模型的坐标受气所有上级分组的坐标的影响。

六、源代码

demo