正交相机和使用光线投射选择对象
Posted
技术标签:
【中文标题】正交相机和使用光线投射选择对象【英文标题】：Orthographic camera and selecting objects with raycast 【发布时间】：2013-09-04 09:09:34 【问题描述】：我在使用 raycaster 的正交相机选择对象时遇到了一些困难。不过，当我使用透视相机时，我对此没有任何问题。在两者之间切换时我唯一改变的是类型相机。
我可以在正交视图上选择面，但它仅与我在屏幕上单击的位置松散相关。当我可以在远离对象的地方单击时，它仍然会像击中其中心附近的对象一样返回。
关于我在这里缺少什么的任何想法？
我的大部分代码都基于此example，并希望从我的代码中获得非常相似的结果。 （我引用的这个例子使用透视相机）
非常感谢任何帮助
<html>
<head>
<style>
canvas
left: 0;
top: 0;
width: 100%;
height: 100%;
position: fixed;
background-color: #111115;
</style>
</head>
<body id='c'>
<script src="js/three.js"></script>
<script>
var obj = [];
var mouse =;
var zoom = 2;
var scene = new THREE.Scene();
//switch between these two and see the difference:
//var camera = new THREE.OrthographicCamera(window.innerWidth / -zoom, window.innerWidth / zoom, window.innerHeight / zoom, window.innerHeight / -zoom, -1000, 1000);
var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position = new THREE.Vector3(100,100,100);
camera.lookAt(new THREE.Vector3(0,0,0));
// this material causes a mesh to use colors assigned to faces
var material = new THREE.MeshBasicMaterial(
color: 0xffffff, vertexColors: THREE.FaceColors );
var sphereGeometry = new THREE.SphereGeometry( 80, 32, 16 );
for ( var i = 0; i < sphereGeometry.faces.length; i++ )
face = sphereGeometry.faces[ i ];
face.color.setRGB( 0, 0, 0.8 * Math.random() + 0.2 );
obj['box'] = ;
obj['box'] = new THREE.Mesh( sphereGeometry, material );
obj['box'].castShadow = true;
obj['box'].receiveShadow = true;
scene.add(obj['box']);
var ambientLight = new THREE.AmbientLight(0xbbbbbb);
scene.add(ambientLight);
var directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(-100, 40, 100);
directionalLight.castShadow = true;
directionalLight.shadowOnly = true;
directionalLight.shadowDarkness = .5;
scene.add(directionalLight);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;
document.body.appendChild(renderer.domElement);
projector = new THREE.Projector();
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
function onDocumentMouseDown( event )
// the following line would stop any other event handler from firing
// (such as the mouse's TrackballControls)
// event.preventDefault();
console.log("Click.");
// update the mouse variable
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
// find intersections
// create a Ray with origin at the mouse position
// and direction into the scene (camera direction)
var vector = new THREE.Vector3( mouse.x, mouse.y, 1 );
projector.unprojectVector( vector, camera );
var ray = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
// create an array containing all objects in the scene with which the ray intersects
var intersects = ray.intersectObjects( [obj['box']] );
// if there is one (or more) intersections
if ( intersects.length > 0 )
console.log("Hit @ " + toString( intersects[0].point ) );
console.log(intersects);
// change the color of the closest face.
intersects[ 0 ].face.color.setRGB( 0.8 * Math.random() + 0.2, 0, 0 );
intersects[ 0 ].object.geometry.colorsNeedUpdate = true;
function toString(v) return "[ " + v.x + ", " + v.y + ", " + v.z + " ]";
var render = function()
requestAnimationFrame(render);
renderer.render(scene, camera);
;
console.log(camera);
console.log(obj['box'])
render();
</script>
</body>
我希望这是一些我还不知道的简单事情。
三个.js r60
【问题讨论】：
提示：您的OrthographicCamera near 平面为负数。那是在相机后面。应该是积极的。另外，前四个参数是世界坐标，而不是像素坐标，所以不要混淆。
【参考方案1】：
以下是使用正交相机或透视相机进行光线投射时使用的模式：
var raycaster = new THREE.Raycaster(); // create once
var mouse = new THREE.Vector2(); // create once
...
mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;
raycaster.setFromCamera( mouse, camera );
var intersects = raycaster.intersectObjects( objects, recursiveFlag );
three.js r.84
【讨论】：
谢谢。不舒服，选择代码取决于相机类型。 ...但比在 WebGL 中创建自己要好得多 :) 请添加摄像头配置，因为您提供的sn-p依赖于它。【参考方案2】：还有一点可能会为您省点麻烦。如果你有这样的相机：
var camera = new THREE.OrthographicCamera(0, window.innerWidth, -window.innerHeight, 0, -100, 100);
然后在光线投射期间，确保将光线 origin.z 移动到 camera.far 以使其击中整个可见范围内的任何物体：
this.ray.origin.set(0, 0, 0);
this.camera.localToWorld(this.ray.origin);
this.ray.setFromCamera(this.mouseCoord, this.camera);
this.ray.origin.z = this.camera.far;
【讨论】：
太棒了 :) 我还补充说 this.ray = this.raycaster.ray以上是关于正交相机和使用光线投射选择对象的主要内容，如果未能解决你的问题，请参考以下文章