将可点击图像添加到网格

Question

这可能是一个非常愚蠢的问题，但我是 three.js 的新手，虽然我已经将 obj 文件加载到网络上并可以通过鼠标进行控制，但我不太确定如何处理下一个一步。

我真正想做的是将可点击的 .jpg 或 .png 文件覆盖在链接到我已经完成的一些网页的现有网格的一部分上。我该怎么做呢？如果有人能给我指出一个例子，或者让我知道它是否不可行，我将不胜感激，以便我寻找可能的替代方案。

我目前拥有的代码如下 - 它主要是从在线示例拼凑而成的，如果它看起来多余或不优雅，请原谅我。

var container, stats;

        var camera, scene, renderer;

        var mouseX = 0, mouseY = 0;

        var windowHalfX = window.innerWidth / 2;
        var windowHalfY = window.innerHeight / 2;


        init();
        animate();


        function init() {

            container = document.createElement( 'div' );
            document.body.appendChild( container );

            camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
            camera.position.z = 10;


        controls = new THREE.TrackballControls( camera );

        controls.rotateSpeed = 1.0;
        controls.zoomSpeed = 1.2;
        controls.panSpeed = 0.8;

        controls.noZoom = false;
        controls.noPan = false;

        controls.staticMoving = true;
        controls.dynamicDampingFactor = 0.3;

        controls.keys = [ 65, 83, 68 ];

        controls.addEventListener( render );


            // scene

            scene = new THREE.Scene();

            var ambient = new THREE.AmbientLight( 0xFFFFFF );
            scene.add( ambient );

            /*var directionalLight = new THREE.DirectionalLight( 0xffffff );
            directionalLight.position.set( 1, 1, 0 ).normalize();
            scene.add( directionalLight );*/

            var hemisphereLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, .70);
            scene.add( hemisphereLight );

            // model

            var onProgress = function ( xhr ) {
                if ( xhr.lengthComputable ) {
                    var percentComplete = xhr.loaded / xhr.total * 100;
                    console.log( Math.round(percentComplete, 2) + '% downloaded' );
                }
            };

            var onError = function ( xhr ) {
            };


            THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );

        THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );

            var loader = new THREE.OBJMTLLoader();
            loader.load( 'obj/test/test_model.obj', 'obj/test/test_model.mtl', function ( object ) {

                object.scale = new THREE.Vector3( 25, 25, 25 );

                //object.position.y = - 80;
                scene.add( object );

            }, onProgress, onError );

            //

            renderer = new THREE.WebGLRenderer({ alpha: true });
            renderer.setSize( window.innerWidth, window.innerHeight );
            container.appendChild( renderer.domElement );

            document.addEventListener( 'mousemove', onDocumentMouseMove, false );

            //

            window.addEventListener( 'resize', onWindowResize, false );

        }

        function onWindowResize() {

            windowHalfX = window.innerWidth / 2;
            windowHalfY = window.innerHeight / 2;

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

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

            controls.handleResize();

        }

        function onDocumentMouseMove( event ) {

//              mouseX = ( event.clientX - windowHalfX ) / 2;
//              mouseY = ( event.clientY - windowHalfY ) / 2;

        }


        //

        function animate() {

            requestAnimationFrame( animate );
            controls.update();
            render();

        }

        function render() {

            //camera.position.x += ( mouseX - camera.position.x ) * .05;
            //camera.position.y += ( - mouseY - camera.position.y ) * .05;
            //camera.lookAt( scene.position );

            renderer.render( scene, camera );

        }

Answer 1

在您的onDocumentMouseMove 或点击事件中，您必须计算与http://threejs.org/docs/#Reference/Core/Raycaster 的光线拾取交集并从那里处理反应。

在 Three.js 示例（如 http://threejs.org/examples/#webgl_geometry_terrain_raycast）和 StackOverflow 中有多个这样的示例。

一个非常幼稚的解决方案可能是：

// note that you may have to use other properties if the renderer is not fullscreen"
// like here http://stackoverflow.com/questions/13542175/three-js-ray-intersect-fails-by-adding-div 
var mouseX = ( event.clientX / window.innerWidth ) * 2 - 1;
var mouseY = -( event.clientY / window.innerHeight ) * 2 + 1;

var vector = new THREE.Vector3( mouseX, mouseY, camera.near );
// Convert the [-1, 1] screen coordinate into a world coordinate on the near plane
vector.unproject( camera );

var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );

// See if the ray from the camera into the world hits one of our meshes
var intersects = raycaster.intersectObjects( scene, true ); // true for recursive

// Toggle rotation bool for meshes that we clicked
if ( intersects.length > 0 ) {

    var clickedObject = intersects[ 0 ].object;

    // here, handle the clickedObject properties to react accordingly
    // show an overlay, jump to a page, etc..
}