使用 raycaster 隐藏点击对象

Question

我想通过点击隐藏场景对象，我读了很多 "raycaster" 教程，但我不知道我的错在哪里使用这些代码，当我打开我的 HTML 文件时，所有对象都被隐藏了。我已经删除了大部分对 raycaster 不敬的代码。

    <script>

        if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

        var SCREEN_WIDTH = window.innerWidth;
        var SCREEN_HEIGHT = window.innerHeight;
        var FLOOR = -250;

        var container, stats;
         var  group1 , group2 , group3 ;
        var camera, scene, controls;
        var renderer;

        var mesh;
        var textureCube;
        var cameraCube, sceneCube;
        var loader;


        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 and controls

            ....

            // SCENE

            scene = new THREE.Scene();

            // SKYBOX

            .....


              //models

               group1=...
               group2=...
               group3=...


        cubes = new THREE.Object3D() ;
        cubes.add( group1 ) ;
        cubes.add( group2 ) ;
        cubes.add( group3 ) ;

         mouseVector = new THREE.Vector3();
        projector = new THREE.Projector();

            // LIGHTS
            lights...

            // RENDERER

            renderer = new THREE.WebGLRenderer( { antialias: true } );
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
            renderer.domElement.style.position = "relative";

            renderer.autoClear = false;

            container.appendChild( renderer.domElement );

            //

            renderer.gammaInput = true;
            renderer.gammaOutput = true;

            // STATS

            stats = new Stats();
            container.appendChild( stats.domElement );

            // EVENTS

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


        }

        //

        function onWindowResize( event ) {

            ....
        }


        function onDocumentMouseMove(event) {
            mouseX = ( event.clientX - windowHalfX );
            mouseY = ( event.clientY - windowHalfY );
            mouseVector.x = 2 * (e.clientX / containerWidth) - 1;
            mouseVector.y = 1 - 2 * ( e.clientY / containerHeight );
        }


        //

        function animate() {

            requestAnimationFrame( animate );

            render();
            stats.update();

        }

        function render() {

            controls.update();

            cameraCube.rotation.copy( camera.rotation );

            renderer.clear();
            renderer.render( sceneCube, cameraCube );

        //raycast
             var raycaster = projector.pickingRay( mouseVector.clone(), camera );

            window.addEventListener( 'mousedown', onMouseDown, false );
            var onMouseDown = function ( event ) {
                     var intersects = raycaster.intersectObjects( cubes.children );
                      var intersection = intersects[0] , obj = intersection.object ;
                      obj.visible = false ; 
            };

            renderer.render( scene, camera );

        }

    </script>

Answer 1

您在渲染时对每一帧进行光线投射。当你想对鼠标点击进行光线投射时，你需要一个事件监听器：

window.addEventListener( 'mousedown', onMouseDown, false );
var onMouseDown = function ( event ) {
    var intersects = raycaster.intersectObjects( cubes.children );
    var intersection = intersects[0], obj = intersection.object;
    obj.visible = false ;
};

使用 raycaster 隐藏点击对象

Hide objects on Click with raycaster

javascript

three.js

raycasting