在 three.js 中在线放置一个图像图标

Question

我使用 xyz 点列表画了一条线，如下所示

for (var i = 0, len = vertices.length - 1; i < len; i++) {
        vertex = vertices[i];
        geometry = new THREE.CubeGeometry(width+7, height, 1);
        geometry.computeVertexNormals(); 
        //material = new THREE.MeshBasicMaterial({ color: 0xff3333, shading: THREE.FlatShading, wireframe: true, transparent: true });            
        //Initializing MeshNormalMaterial to get the 3d Line Geometry
        material = new THREE.MeshBasicMaterial({ color: 0xEB9180 });
       
        mesh = new THREE.Mesh(geometry, material);
        mesh.position = vertex;
        mesh.lookAt(vertices[1 + i]);
        length = vertex.distanceTo(vertices[1 + i]);
        mesh.scale.set(1, 1, length + width);
        mesh.translateZ(0.5 * length);
        segments.add(mesh);
    }

使用 xyz 点列表动态创建的线：

现在我想在行上放置一个图像图标，它应该按如下方式遍历整行

Answer 1

我建议您为图标使用 THREE.Sprite() 对象。你可以给它一个纹理。

至于沿线移动它，只需调整 Sprite 的 .position 值以跟随您的顶点数组。我把速度管理留给你了！

在 three.js 中在线放置一个图像图标

Place an image Icon on Line in three.js

mapping

three.js