如何在 THREE.js 中克隆 Line 对象的 Mesh？

Question

我正在尝试创建一个 10 行的 for 循环。但是 line.Clone() 给我一个错误，因为它没有找到任何要克隆的网格？如果您知道如何访问线的网格，请告诉我。

这是一些代码：

forward_RT(){

    var spotLight = new THREE.SpotLight( 0xffffff ); //White Color
    spotLight.position.set( 150, 500, -210 );
    scene_Main.add( spotLight );

    var material = new THREE.LineBasicMaterial( { color: 0xff0000 } );
    var geometry = new THREE.Geometry();
    geometry.vertices.push(new THREE.Vector3( spotLight.position.x, spotLight.position.y, spotLight.position.z) );
    geometry.vertices.push(new THREE.Vector3( ray_End_pos_X, ray_End_pos_Y, ray_End_pos_Z) );

    var line = new THREE.Line( geometry, material );

    for(var i=0; i<10; i++){
        //Also tried 
        //var newLine = line.clone(); & scene_Main.add(newLine);
        scene.add(line.clone());

        ray_End_pos_X += 50;
    }
}

Answer 1

您的代码有几个问题（例如，您递增了 ray_End_pos_X 但没有在循环中使用它）。我怀疑您可能只需要在每次迭代期间更改几何形状。

我会使用克隆几何体中的新线并共享 material。我很快检查了一下，这有效：

    var rayX = 0, rayY=0, rayZ = 0;

    var material = new THREE.LineBasicMaterial( { color: 0xff0000 } );
    var geometry = new THREE.Geometry();
    geometry.vertices.push(new THREE.Vector3( spotLight.position.x, spotLight.position.y, spotLight.position.z) );
    geometry.vertices.push(new THREE.Vector3( rayX, rayY, rayZ) );

    for(var i=0; i<10; i++) {
        var newLine = new THREE.Line(geometry.clone(), material);
        newLine.geometry.vertices[1].x = rayX;
        this.context.scene.add(newLine);
        rayX += 0.1;
    }

这是它的样子（红线，其余无关紧要）：

如何在 THREE.js 中克隆 Line 对象的 Mesh？

How to clone the Mesh of a Line object in THREE.js?

javascript

line

three.js