javascript - 当它只应在点击时响应时失控的光线转换

Question

我创建了一个脚本，每次单击现有平面时都会向场景添加一个新平面 - 检测使用光线转换器。然而，脚本没有等待点击，而是不受控制地向场景中添加了越来越多的平面，根本没有点击。我错过了什么？

谢谢!

var container, renderer, scene, camera;
var container = document.body;

var frustumSize = 1000;

var width, height;

var numRows = 4;
var numCols = 7;
var spacingSize = 300;

var raycaster;
var mouse;

var savedColor;

function init() {

    width = window.innerWidth;
    height = window.innerHeight;

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

    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.setClearColor(0x000000);

    scene = new THREE.Scene();

    var aspect = window.innerWidth / window.innerHeight;
    camera = new THREE.OrthographicCamera( frustumSize * aspect / - 2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / - 2, 0, 2000 );
    // camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 0, 2000 );
    camera.updateProjectionMatrix();


    // set up grid of colored planes

    var startXPos = -((spacingSize*(numCols-1))/2);
    var startYPos = -((spacingSize*(numRows-1))/2);

    for ( var i = 0; i < numCols; i++ ) {
        var x = startXPos + (i*spacingSize);

        for ( var j = 0; j < numRows; j++ ) {
            var y = startYPos + (j*spacingSize);
            var z = -10 + (j * -1.0001);

            var geometry = new THREE.PlaneGeometry( 50, 50 );
            var material = new THREE.MeshBasicMaterial( {color: new THREE.Color( Math.random(), Math.random(), Math.random() ), side: THREE.DoubleSide} );
            var plane = new THREE.Mesh( geometry, material );
            plane.position.set( x, y, z );
            scene.add(plane);

        }
    }

    savedColor = null;

    raycaster = new THREE.Raycaster();
    mouse = new THREE.Vector2();

    document.addEventListener( 'click', onDocumentClick, false );

    var axesHelper = new THREE.AxesHelper( 100 );
    scene.add( axesHelper );

    container.appendChild( renderer.domElement );
    scene.updateMatrixWorld();
    render();
    
}

function render() {

    // update the picking ray with the camera and mouse position
    raycaster.setFromCamera( mouse, camera );

    // calculate objects intersecting the picking ray
    var intersects = raycaster.intersectObjects( scene.children );

    // calculate objects intersecting the picking ray
    if ( intersects.length > 0 ) {
        // console.log("yo!");
        for ( var i = 0; i < intersects.length; i++ ) {

            var geometry = new THREE.PlaneGeometry( 60, 60 );
            var material = new THREE.MeshBasicMaterial( {color: new THREE.Color( 0xffff00 ), side: THREE.DoubleSide} );
            var plane = new THREE.Mesh( geometry, material );
            plane.position.set( getRandomBetween(-300,300), getRandomBetween(-300,300), -20 );
            scene.add(plane);
            // console.log("hey!");

            scene.updateMatrixWorld();

        }
    }

    renderer.render( scene, camera );
    requestAnimationFrame( render );
}

function getRandomBetween( min, max ) {
    return Math.random() * (max - min) + min;
}


function onDocumentClick( event ) {

    event.preventDefault();
    // calculate mouse position in normalized device coordinates
    // (-1 to +1) for both components
    // console.log("Oi!");
    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

}

init();

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/106/three.js"></script>

Answer 1

因为mouse的初始位置是(0, 0)，与AxesHelper相交。

更改 mouse 的初始位置或删除 AxesHelper 或将相交目标更改为特定组应该可以解决此问题。