threejs 当使用正交投影时实现射线交互

2026-04-20 17:49:08 174
分类:three.js

//初始化一个正交投影的camera对象

var w = window.innerWidth,h = window.innerHeight;
        camera = new THREE.OrthographicCamera( w/-2,w/2,h/-2,h/2, -1000, 1000 );
        camera.position.z = 100;

//鼠标点击事件的回调(不同于透视投影)

    document.addEventListener( 'mousedown', function(){
            var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
            var raycaster = projector.pickingRay(vector, camera);
            var intersertsObj = raycaster.intersectObjects(scene.children);
            if (intersertsObj.length > 0) {
                intersertsObj[ 0 ].object.material.color.setHex( Math.random() * 0xffffff );
            }
        }, false );

原文地址

http://stackoverflow.com/questions/20361776/orthographic-camera-and-pickingray