模型标注——平面网络模型Mesh

郭隆邦老师threejs教程学习笔记

在三维场景中可以创建一个矩形平面网格模型，然后把表示特定含义的图像或canvas画布作为矩形网格模型的纹理贴图，这样，矩形网络模型就可以表示作为一个模型的热点或标签，显示相应的信息。

mesh网格模型表示一个红豆的存储仓库，然后通过PlaneGeometry创建一个矩形网格模型，把一张红豆图片作为矩形平面网格模型的纹理贴图。

    const textureLoader = new THREE.TextureLoader();
    const plane = new THREE.PlaneGeometry(40, 40); // 创建一个矩形几何体
    //标签使用基础网格材质即可
    const planeMaterial = new THREE.MeshBasicMaterial({
      //矩形平面网格模型设置纹理贴图
      map: textureLoader.load('./标签图片/红豆.png'),
      // side: THREE.FrontSide, // 默认前面显示，可以不设置
      // side: THREE.DoubleSide, // 双面显示
      // side: THREE.BackSide, // 背面显示
      transparent: true, // 开启透明效果，否则颜色贴图map的透明不起作用
    });
    const planeMesh = new THREE.Mesh(plane, planeMaterial);
    planeMesh.position.copy(mesh.position)
    planeMesh.position.y += 80
    scene.add(planeMesh)

模型标签位置角度控制

表示模型标签的平面网格模型的位置可以通过position属性设置，角度状态可以通过.rotateX()等方法旋转网格模型。

// 旋转90度为水平状态
planeMesh.rotateX(-Math.PI/2)
planeMesh.position.y = -50;//y轴设置在地面位置
planeMesh.position.z += 50;//在网格模型基础上沿着z平移一定距离

材料选择

模型标签的显示内容主要通过颜色贴图来表现，不需要threejs的光照计算，所以直接使用MeshBasicMaterial（不受光照影响的基础网格材质）

材质透明

模型标签的平面网格模型使用的颜色贴图背景是透明的，要设置transparent属性的值为true，开启透明。

const planeMaterial = new THREE.MeshBasicMaterial({
  // 开启透明效果，否则颜色贴图map的透明不起作用
  transparent: true,
});

标签单双面显示

矩形平面网格模型模型表示的模型标签在项目中你想如何显示，可以根据具体情况自己去设置。

const planeMaterial = new THREE.MeshBasicMaterial({
  side: THREE.FrontSide, // 默认前面显示，可以不设置
});

const planeMaterial = new THREE.MeshBasicMaterial({
  side: THREE.DoubleSide, // 双面显示
});

const planeMaterial = new THREE.MeshBasicMaterial({
  side: THREE.BackSide, // 背面显示
});

动态更新模型标签

比如存储红豆的仓库存储了绿豆，这时候需要把矩形平面网格模型的红豆颜色贴图更换为绿豆颜色贴图。

// 动态更新模型标签颜色贴图
planeMaterial.map = textureLoader.load('./标签图片/绿豆.png')