在Three.js圆柱体上访问细分

Question

所以我正在从Three.js https://threejs.org/docs/#api/geometries/CylinderGeometry来处理Cylinder Geometry

这是我的代码笔： 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>