简体   繁体   English

三.Js Raycasting在更改摄影机转换时不起作用,虽然这是Object3D的子级

[英]Three.Js Raycasting not working when changing camera transformations whiich is a child of an Object3D

So I have created a "camera controller" that create an Object3D and make it as parent for the camera . 因此,我创建了一个“相机控制器”,它创建了一个Object3D并将其作为相机的父级。 The translations and the rotation of the Y axis are applyed to the Object3D, and the rotation of the X axis is applyed to the camera . Y轴的平移和旋转将应用于Object3D,X轴的旋转将应用于相机。 This is the code : 这是代码:

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();
}

}; };

The problem is when I use this controller to move the camera and his parent the raycasting not detect meshes anymore. 问题是,当我使用此控制器移动摄像机及其父级时,光线投射不再检测到网格。

This is the raycasting function 这是光线投射功能

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);

I have tried "cam.updateMatrix()" and "cam.updateProjectionMatrix" but nothing changes .Even after the camera become child of the Object3D the positions that I have initialize it with still the same (0,10,-4). 我已经尝试过“ cam.updateMatrix()”和“ cam.updateProjectionMatrix”,但是没有任何变化。即使在相机成为Object3D的子代之后,我对其初始化的位置仍然相同(0、10,-4)。 Anyone have an idea why the raycasting do not work when I change the camera positions with this controller. 任何人都有一个想法,为什么当我使用此控制器更改相机位置时,射线广播无法正常工作。

So just if this may help someone having this problem ,I have tried a solution for that not the best but it works. 因此,即使这可能会帮助有此问题的人,我也尝试过解决该问题的方法,但这并不是最好的方法,但它确实有效。 In the begining of the click event I have stored the world and the relative positions of the camera, then I have removed the camera from its parent ,set its position to the world position and then add it to the scene. 在单击事件开始时,我存储了摄影机的世界和相对位置,然后从其父级中移除了摄影机,将其位置设置为世界位置,然后将其添加到场景中。 After checking the raycasting ,I have removed the camera from the scene and reset its position to the prevviously stored local position ,and finally add it to the baseobject. 检查光线投射后,我将摄像机从场景中移开并将其位置重置为以前存储的本地位置,最后将其添加到基础对象中。

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM