javascript - 访问 Three.js Cylinder 上的段

Question

所以我正在使用 Three.js https://threejs.org/docs/#api/geometries/CylinderGeometry 中的圆柱体几何图形

这是我的代码笔:https://codepen.io/lklancir/pen/pdaPoY

        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();

我试图弄清楚(但徒劳)如何通过索引或坐标到达特定段并将其着色为不同的颜色( https://screencast.com/t/GIeZq3XSKCOy )

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

Answer 1

仅举一个示例，说明如何使用 THREE.Raycaster() 和 THREE.CylinderGeometry()。

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(5, 0, 10);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x818181);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var mesh = new THREE.Mesh(new THREE.CylinderGeometry(2, 2, 15, 32, 20, true), new THREE.MeshBasicMaterial({
  vertexColors: THREE.FaceColors,
  wireframe: false,
  side: THREE.DoubleSide
}));
mesh.rotation.x = -Math.PI * .5;
scene.add(mesh);

var wire = new THREE.LineSegments(new THREE.WireframeGeometry(mesh.geometry), new THREE.LineBasicMaterial({
  color: "black"
}));
mesh.add(wire);

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var intersects;
document.addEventListener("mousedown", onMouseDown, false);

function onMouseDown(event) {

  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

  raycaster.setFromCamera(mouse, camera);
  intersects = raycaster.intersectObject(mesh);

  if (intersects.length == 0) return;

  intersects[0].face.color.setHex(0xff0000);
  intersects[0].object.geometry.colorsNeedUpdate = true;
}

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>