Javascript 访问Three.js圆柱体上的段

所以我在玩Three.js中的圆柱体几何体

这是我的密码笔：

我试图找出（但徒劳无功）如何通过索引或坐标到达特定的线段，并用不同的颜色对其进行着色（）

---

有人能在这里提供一些指导或如何进一步解决这个问题吗？

只是一个示例，说明如何使用

THREE.Raycaster（）

和

THREE.CylinderGeometry（）

var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（60，window.innerWidth/window.innerHeight，11000）；
摄像机位置设置（5,0,10）；
var renderer=new THREE.WebGLRenderer({
反别名：对
});
renderer.setSize（window.innerWidth、window.innerHeight）；
setClearColor（0x818181）；
document.body.appendChild（renderer.doElement）；
var controls=新的三个.OrbitControls（摄影机、渲染器.doElement）；
var mesh=新的THREE.mesh（新的THREE.Cylinder几何体（2,2,15,32,20，true），新的THREE.MeshBasicMaterial({
顶点颜色：三种颜色，
线框：假，
侧面：三个。双面
}));
mesh.rotation.x=-Math.PI*.5；
场景。添加（网格）；
var wire=新的三个.LineSegments（新的三个.WireframeGeometry（mesh.geometry）），新的三个.LineBasicMaterial({
颜色：“黑色”
}));
网格。添加（线）；
var raycaster=new THREE.raycaster（）；
var mouse=new THREE.Vector2（）；
var相交；
document.addEventListener（“mousedown”，onMouseDown，false）；
函数onMouseDown（事件）{
mouse.x=（event.clientX/window.innerWidth）*2-1；
mouse.y=-（event.clientY/window.innerHeight）*2+1；
raycaster.setFromCamera（鼠标、相机）；
相交=光线投射器。相交对象（网格）；
if（intersects.length==0）返回；
相交[0].face.color.setHex（0xff0000）；
相交[0]。object.geometry.colorsNeedUpdate=true；
}
render（）；
函数render（）{
请求动画帧（渲染）；
渲染器。渲染（场景、摄影机）；
}

正文{
溢出：隐藏；
保证金：0；
}

---

这只是一个使用

THREE.Raycaster（）

和

THREE.CylinderGeometry（）

的示例

var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（60，window.innerWidth/window.innerHeight，11000）；
摄像机位置设置（5,0,10）；
var renderer=new THREE.WebGLRenderer({
反别名：对
});
renderer.setSize（window.innerWidth、window.innerHeight）；
setClearColor（0x818181）；
document.body.appendChild（renderer.doElement）；
var controls=新的三个.OrbitControls（摄影机、渲染器.doElement）；
var mesh=新的THREE.mesh（新的THREE.Cylinder几何体（2,2,15,32,20，true），新的THREE.MeshBasicMaterial({
顶点颜色：三种颜色，
线框：假，
侧面：三个。双面
}));
mesh.rotation.x=-Math.PI*.5；
场景。添加（网格）；
var wire=新的三个.LineSegments（新的三个.WireframeGeometry（mesh.geometry）），新的三个.LineBasicMaterial({
颜色：“黑色”
}));
网格。添加（线）；
var raycaster=new THREE.raycaster（）；
var mouse=new THREE.Vector2（）；
var相交；
document.addEventListener（“mousedown”，onMouseDown，false）；
函数onMouseDown（事件）{
mouse.x=（event.clientX/window.innerWidth）*2-1；
mouse.y=-（event.clientY/window.innerHeight）*2+1；
raycaster.setFromCamera（鼠标、相机）；
相交=光线投射器。相交对象（网格）；
if（intersects.length==0）返回；
相交[0].face.color.setHex（0xff0000）；
相交[0]。object.geometry.colorsNeedUpdate=true；
}
render（）；
函数render（）{
请求动画帧（渲染）；
渲染器。渲染（场景、摄影机）；
}

正文{
溢出：隐藏；
保证金：0；
}

您尝试过使用吗？对我不起作用，但是，我现在使用的是另一种方法。我正试图添加两个气缸，并使用第二个气缸来操纵管道上的“焊缝”，但也无法实现这个想法哈哈，我真倒霉，我是3JS的傻瓜不为我工作什么也解释不了。你是怎么用的？如果你真的这么做了。好吧，我已经尝试过了，但可能还有更多的东西要实现raycaster，我无法理解，因为我试图称之为raycaster，我无法获得任何阴影，不幸的是，这对我来说不起作用。我确实设法让它与第二个解决方案一起工作，它使我的头脑放松了，但不知道在提出的问题中是否可能出现任何特定的分段。你尝试过使用吗？不适用于我，但是，我现在使用的是另一种方法。我正试图添加两个气缸，并使用第二个气缸来操纵管道上的“焊缝”，但也无法实现这个想法哈哈，我真倒霉，我是3JS的傻瓜不为我工作什么也解释不了。你是怎么用的？如果你真的这么做了。好吧，我已经尝试过了，但可能还有更多的东西要实现raycaster，我无法理解，因为我试图称之为raycaster，我无法获得任何阴影，不幸的是，这对我来说不起作用。我确实设法让它与第二个解决方案一起工作，它使我的头脑放松了，但不知道在建议的问题中是否可能达到任何特定的阶段。谢谢你，伙计。正如我所说的，我在这方面很在行，需要一些时间来解决这个问题。我已经提出了一个解决方案，但这也是我最初尝试的。谢谢你抽出时间。如果你能和我分享你的钢笔，我将非常感激：）@klanc（不客气）你可以使用代码片段中的代码。还有，上面有一份。非常感谢你，布罗斯基！：）谢谢你，伙计。正如我所说的，我在这方面很在行，需要一些时间来解决这个问题。我已经提出了一个解决方案，但这也是我最初尝试的。谢谢你抽出时间。如果你能和我分享你的钢笔，我将非常感激：）@klanc（不客气）你可以使用代码片段中的代码。还有，上面有一份。非常感谢你，布罗斯基！：）

        var gui = new dat.GUI();
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 50 );
        camera.position.z = 30;

        var renderer = new THREE.WebGLRenderer( { antialias: true } );
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( window.innerWidth, window.innerHeight );
        renderer.setClearColor( 0x000000, 1 );
        document.body.appendChild( renderer.domElement );

        var orbit = new THREE.OrbitControls( camera, renderer.domElement );
        orbit.enableZoom = false;

        var lights = [];
        lights[ 0 ] = new THREE.PointLight( 0xffffff, 1, 0 );
        lights[ 1 ] = new THREE.PointLight( 0xffffff, 1, 0 );
        lights[ 2 ] = new THREE.PointLight( 0xffffff, 1, 0 );

        lights[ 0 ].position.set( 0, 200, 0 );
        lights[ 1 ].position.set( 100, 200, 100 );
        lights[ 2 ].position.set( - 100, - 200, - 100 );

        scene.add( lights[ 0 ] );
        scene.add( lights[ 1 ] );
        scene.add( lights[ 2 ] );

        var mesh = new THREE.Object3D();

        mesh.add( new THREE.LineSegments(

            new THREE.Geometry(),

            new THREE.LineBasicMaterial( {
                color: 0xffffff,
                transparent: true,
                opacity: 0.5
            } )

        ) );

        mesh.add( new THREE.Mesh(

            new THREE.Geometry(),

            new THREE.MeshPhongMaterial( {
                color: 0x156289,
                emissive: 0x072534,
                side: THREE.DoubleSide,
                flatShading: true
            } )

        ) );


 function renderMeshCylinder( mesh ) {

    var data = {
        radiusTop : 5,
        radiusBottom : 5,
        height : 30,
        radiusSegments : 60,
        heightSegments : 60,
        openEnded : true,
        thetaStart : 0,
        thetaLength : twoPi
    };





    function generateGeometry() {

        updateGroupGeometry( mesh,
            new THREE.CylinderGeometry(
                data.radiusTop,
                data.radiusBottom,
                data.height,
                data.radiusSegments,
                data.heightSegments,
                data.openEnded,
                data.thetaStart,
                data.thetaLength
            )
        );

    }

    var folder = gui.addFolder( 'THREE.CylinderGeometry' );

    folder.add( data, 'radiusTop', 1, 30 ).onChange( generateGeometry );
    folder.add( data, 'radiusBottom', 1, 30 ).onChange( generateGeometry );
    folder.add( data, 'height', 1, 50 ).onChange( generateGeometry );
    folder.add( data, 'radiusSegments', 3, 64 ).step( 1 ).onChange( generateGeometry );
    folder.add( data, 'heightSegments', 1, 64 ).step( 1 ).onChange( generateGeometry );
    folder.add( data, 'openEnded' ).onChange( generateGeometry );
    folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
    folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );


    generateGeometry();

}

renderMeshCylinder(mesh);
        var options = {};

        scene.add( mesh );

        var prevFog = false;

        var render = function () {

            requestAnimationFrame( render );

            if ( ! options.fixed ) {

                mesh.rotation.x += 0;
                mesh.rotation.y += 0;

            }

            renderer.render( scene, camera );

        };

        window.addEventListener( 'resize', function () {

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize( window.innerWidth, window.innerHeight );

        }, false );

        render();