三个js raycasting OBJ

Posted 2023-02-27

【中文标题】三个js raycasting OBJ

【英文标题】：Three js raycasting OBJ

【发布时间】：2014-04-02 13:55:50

【问题描述】：

---

你好！我有一个三个 js 并尝试在我的项目中使用它。问题是 - 我需要选择从 OBJ 文件加载的自定义网格。

我创建了简单的光线投射器、简单的立方体和我的模型（也是立方体）。问题是 - 我可以对立方体进行光线投射，但它看不到我的模型。哪里有问题？

        var container, stats;
        var camera, scene, projector, renderer;
        var particleMaterial;

                    var textureLoader;
                    var modelLoader;

        var objects = [];

        init();
        animate();

        function init() 

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

            camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
            camera.position.set( 0, 300, 500 );

            scene = new THREE.Scene();

                            var manager = new THREE.LoadingManager();
                            textureLoader = new THREE.ImageLoader( manager );
                            modelLoader = new THREE.OBJLoader(manager);




                            modelLoader.load( 'cube.obj', function ( object ) 

                                object.traverse( function ( child ) 

                                        if ( child instanceof THREE.Mesh ) 
                                                console.log("instance");
                                                child.geometry.computeFaceNormals();
                                                child.material = new THREE.MeshBasicMaterial(  color: Math.random() * 0xffffff, opacity: 0.5  );

                                                child.material.side = THREE.DoubleSided;
                                        

                                 );
                                objects.push(object);
                                object.position.x = 10;
                                object.position.y = 10;
                                object.scale.set(100,100,100);
                                scene.add(object);
                            );

                            var geometry = new THREE.SphereGeometry(150, 100, 100);
            for ( var i = 0; i < 1; i ++ ) 

                var object = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial(  color: Math.random() * 0xffffff, opacity: 0.5  ) );
                object.position.x = Math.random() * 800 - 400;
                object.position.y = Math.random() * 800 - 400;
                object.position.z = Math.random() * 800 - 400;

                object.scale.x = Math.random() * 2 + 1;
                object.scale.y = Math.random() * 2 + 1;
                object.scale.z = Math.random() * 2 + 1;

                object.rotation.x = Math.random() * 2 * Math.PI;
                object.rotation.y = Math.random() * 2 * Math.PI;
                object.rotation.z = Math.random() * 2 * Math.PI;

                scene.add( object );

                objects.push( object );

            

            var PI2 = Math.PI * 2;
            particleMaterial = new THREE.SpriteCanvasMaterial( 

                color: 0x000000,
                program: function ( context ) 

                    context.beginPath();
                    context.arc( 0, 0, 0.5, 0, PI2, true );
                    context.fill();

                

             );

            projector = new THREE.Projector();

            renderer = new THREE.WebGLRenderer();
            renderer.setClearColor( 0xf0f0f0 );
            renderer.setSize( window.innerWidth, window.innerHeight );

            container.appendChild( renderer.domElement );

            stats = new Stats();
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.top = '0px';
            container.appendChild( stats.domElement );

            document.addEventListener( 'mousedown', onDocumentMouseDown, false );

            //

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

        

        function onWindowResize() 

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

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

        

        function onDocumentMouseDown( event ) 

            event.preventDefault();

            var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
            projector.unprojectVector( vector, camera );

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

            var intersects = raycaster.intersectObjects( objects );

            if ( intersects.length > 0 ) 
                                    console.log("intersected");
                intersects[ 0 ].object.material.color.setHex( Math.random() * 0xffffff );

                var particle = new THREE.Sprite( particleMaterial );
                particle.position = intersects[ 0 ].point;
                particle.scale.x = particle.scale.y = 16;
                scene.add( particle );

            


        

        //

        function animate() 

            requestAnimationFrame( animate );
                            scene.updateMatrixWorld();
            render();
            stats.update();

        

        var radius = 600;
        var theta = 0;

        function render() 

            theta += 0.1;

            camera.position.x = radius * Math.sin( THREE.Math.degToRad( theta ) );
            camera.position.y = radius * Math.sin( THREE.Math.degToRad( theta ) );
            camera.position.z = radius * Math.cos( THREE.Math.degToRad( theta ) );
            camera.lookAt( scene.position );

            renderer.render( scene, camera );

        

所以我可以看到无法选择我的自定义 obj 选择的球体。问题可能出在哪里？三个js r66

更新： 问题解决了。我只需要设置var intersects = raycaster.intersectObjects( objects,true );

【参考方案1】：

你需要传递递归标志

var intersects = raycaster.intersectObjects( objects, true );

https://threejs.org/docs/#api/core/Raycaster.intersectObjects