I’ve created navigation mesh on my Scene with walkable Property in Blender. The walkable area is floor without objects (You can see in the attached image).I could load it as glb data,save floor and wall as Obejct 3d, connect it with addevent click(mouseup) action and calculate between mouse Position and my navmesh by Raycasting. The Racast Outputs is ok, but the Problem is, i don’t Know how can i avoid camera to go through the wall, because as soon as i clicked, camera moves, and raycast show position of where i clicked, not where my camera gonna land (beause as long as i hold the button, Camera keeps going) . I’ve searched everywhere and the only solution that I’ve found was Three-pathfinding library-> function clampStep but there is no example for that. Any suggestion how can i restrict movement of camera between the walls?
I’m totally beginner in both threejs and blender, would really appreciate any help or suggestion.
this.scene = new THREE.Scene();
this.scene.background = new THREE.Color(0xdddddd);
// this.camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 5000);
this.camera.rotation.y = 10 / 180 * Math.PI;
this.camera.position.x = 10;
this.camera.position.y = 3;
this.camera.position.z = 20;
this.renderer = new THREE.WebGLRenderer({ antialias: true });
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.renderer.outputEncoding = THREE.sRGBEncoding;
this.renderer.physicallyCorrectLights = true;
document.body.appendChild(this.renderer.domElement);
this.controls = new FirstPersonControls(this.camera, this.renderer.domElement);
this.controls.movementSpeed = 5;
this.controls.lookSpeed = 0.01;
this.controls.noFly = false;
this.controls.lookVertical = false;
this.hlight = new THREE.AmbientLight(0xffffff, 3);;
this.scene.add(this.hlight);
let loader = new GLTFLoader();
loader.load("/ShowRoom121122.glb", (gltf) => {
const self = this;
gltf.scene.traverse(function (child) {
if (child.isMesh){
if (child.name=="navMesh_1" ){
self.navmesh=child;
self.sceneMeshes.push(child);
child.material.transparent = true;
}
else if(child.name=="wall_1" ||child.name=="wall_2"){
self.navmesh=child;
self.sceneMeshes.push(child);
}
else{
child.castShadow = false;
child.receiveShadow = true;
}
self.scene.add( gltf.scene );
}
})});
},
raycast:function(e){
// debugger
let mousex=0;
this.mouse.x = ( e.clientX / window.innerWidth ) * 2 - 1;
this.mouse.y = - ( e.clientY / window.innerHeight ) * 2 + 1;
this.raycaster.ray.origin.copy( this.camera.position );
this.camera.getWorldDirection( this.raycaster.ray.direction );
//2. set the picking ray from the camera position and mouse coordinates
this.raycaster.setFromCamera( this.mouse, this.camera );
//3. compute intersections
const intersects = this.raycaster.intersectObjects( this.sceneMeshes );
if (intersects.length>0)
{
console.log(intersects[0])
}
else{
}
},
animate:function(){
requestAnimationFrame(this.animate)
this.controls.update(0.01);
this.renderer.render(this.scene, this.camera);
this.renderer.domElement.addEventListener( 'click', this.raycast,false );
}
},
mounted() {
this.init();
this.animate();
}
type or paste code here