![](/img/trans.png)
[英]Tweening Object3D towards camera in Three.js - this works, need to set new screen position
[英]Three.Js Raycasting not working when changing camera transformations whiich is a child of an Object3D
因此,我创建了一个“相机控制器”,它创建了一个Object3D并将其作为相机的父级。 Y轴的平移和旋转将应用于Object3D,X轴的旋转将应用于相机。 这是代码:
function cameracontroll(cam,scene){
this.cam=cam;
this.scene=scene;
this.baseobject=new THREE.Object3D();
//a vector3 that hold the rotations to be applyed
this.rot=new point(0,0,0);
//rotation speed
this.rspeed=0.002;
//move speed
this.mspeed=0.2;
//last mouse X position
this.lx=0;
//last mouse Y position
this.ly=0;
//direction indicators
this.go_up=false;
this.go_down=false;
this.go_left=false;
this.go_right=false;
this.go_forward=false;
this.go_backward=false;
//to correctly initialize mouse position
this.counthelper=0;
//init function
this.init=function(){
this.baseobject.position=this.cam.position;
this.baseobject.add(cam);
this.scene.add(this.baseobject);
}
//rotation updating
this.updaterotation = function(e){
if(this.counthelper==0){this.lx=e.clientX;this.ly=e.clientY;this.counthelper++;}
this.rot.x= ((e.clientX-this.lx)*this.rspeed)*-1;
this.rot.z= ((e.clientY-this.ly)*this.rspeed)*-1;
cam.rotateX(this.rot.z);
this.baseobject.rotateY(this.rot.x);
this.lx=e.clientX;
this.ly=e.clientY;
}
//position updating
this.updateposition = function(){
if(this.goup){
this.baseobject.translateY(this.mspeed);
}
if(this.godown){
this.baseobject.translateY(-this.mspeed);
}
if(this.goleft){
this.baseobject.translateX(this.mspeed);
}
if(this.goright){
this.baseobject.translateX(-this.mspeed);
}
if(this.goforward){
this.baseobject.translateZ(this.mspeed);
}
if(this.gobackward){
this.baseobject.translateZ(-this.mspeed);
}
this.cam.updateMatrix();
}
};
问题是,当我使用此控制器移动摄像机及其父级时,光线投射不再检测到网格。
这是光线投射功能
document.addEventListener('click',function(event){
event.preventDefault();
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(scene.children);
if (intersects.length > 0) {
console.log("Intersects!");
}
},false);
我已经尝试过“ cam.updateMatrix()”和“ cam.updateProjectionMatrix”,但是没有任何变化。即使在相机成为Object3D的子代之后,我对其初始化的位置仍然相同(0、10,-4)。 任何人都有一个想法,为什么当我使用此控制器更改相机位置时,射线广播无法正常工作。
因此,即使这可能会帮助有此问题的人,我也尝试过解决该问题的方法,但这并不是最好的方法,但它确实有效。 在单击事件开始时,我存储了摄影机的世界和相对位置,然后从其父级中移除了摄影机,将其位置设置为世界位置,然后将其添加到场景中。 检查光线投射后,我将摄像机从场景中移开并将其位置重置为以前存储的本地位置,最后将其添加到基础对象中。
document.addEventListener('click',function(event){
var px = camera.getWorldPosition().x;
var py = camera.getWorldPosition().y;
var pz = camera.getWorldPosition().z;
var pxx = camera.position.x;
var pyy = camera.position.y;
var pzz = camera.position.z;
camcont.baseobject.remove(camera);
camera.position.set(px,py,pz);
scene.add(camera);
event.preventDefault();
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(scene.children);
if (intersects.length > 0) {
console.log("intersects !!");
}
scene.remove(camera);
camera.position.set(pxx,pyy,pzz);
camcont.baseobject.add(camera);
},false);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.