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

OYlan_

关注

最新推荐文章于 2025-06-12 17:44:12 发布 · 489 阅读

原创

本文为博客 VIP 文章，开通 VIP 后可阅读全文

开通 VIP

郭隆邦老师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)