检索three.js模型上单击纹理的坐标

Question

我在带有纹理的THREE.js场景中有一个模型。 如何从点击对象的坐标中检索纹理贴图上的坐标？ 并非所有颜色都是独一无二的。

Answer 1

有一个three.js光线投射纹理示例here

        function onMouseMove( evt ) {

            evt.preventDefault();

            var array = getMousePosition( container, evt.clientX, evt.clientY );
            onClickPosition.fromArray( array );

            var intersects = getIntersects( onClickPosition, scene.children );

            if ( intersects.length > 0 && intersects[ 0 ].uv ) {

                var uv = intersects[ 0 ].uv;
                intersects[ 0 ].object.material.map.transformUv( uv );
                canvas.setCrossPosition( uv.x, uv.y );

            }

        };

        var getMousePosition = function ( dom, x, y ) {

            var rect = dom.getBoundingClientRect();
            return [ ( x - rect.left ) / rect.width, ( y - rect.top ) / rect.height ];

        };

        var getIntersects = function ( point, objects ) {

            mouse.set( ( point.x * 2 ) - 1, - ( point.y * 2 ) + 1 );

            raycaster.setFromCamera( mouse, camera );

            return raycaster.intersectObjects( objects );

        };