Hello Frnds,
I created map and navigation map using Patrol.js . On that I kept SphereGeometry , it moving very well. Now I want to move Car (.obj file). How to give same code for that obj file. See attachment files(Video n Image) for better understanding.
https://transfer.pcloud.com/download.html?code=5Zt2NV7ZpW2TcIR29okZiGfLZbAIdGAt2xLFQdhavhQNf3Y9UtJKV
Thank you
Sandip
That Sphere obj working fine, But I want to car same like Sphere.
see code
PatrolJS Demo<style>
body {
font-family: Arial;
background-color: #000;
color: #fff;
margin: 0px;
overflow: hidden;
}
.info {
padding: 10px;
width: 100%;
position: absolute;
background-color: rgba(255, 0, 0, 0.5);
font-size: 14px;
}
.info h1 {
padding: 0;
margin: 0;
}
</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"></script>
<script>
var container;
var camera, scene, renderer, controls;
var raycaster, intersectedObject;
var mouse = new THREE.Vector2();
var startTime = Date.now();
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var lastFrameTime = 0;
var maxFrameTime = 0.03;
var elapsedTime = 0;
var level;
init();
animate();
var player, target;
var playerNavMeshGroup;
var calculatedPath = null;
var pathLines;
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.x = -10;
camera.position.y = 14;
camera.position.z = 10;
scene = new THREE.Scene();
var ambient = new THREE.AmbientLight( 0x101030 );
scene.add( ambient );
var directionalLight = new THREE.DirectionalLight( 0xffeedd );
directionalLight.position.set( 0, 0.5, 0.5 );
scene.add( directionalLight );
var objLoader = new THREE.OBJLoader();
objLoader.load( 'meshes/mesh/Mesh/ska6.obj', function( object ) {
// object.position.y = 1000;
object.traverse(function (node) {
if (node.type === 'Mesh') level = node;
});
scene.add(level);
});
objLoader.load( 'meshes/mesh/Mesh/mergeNav4.obj', function( object ) {
var navmesh;
object.traverse(function (node) {
if (node.type === 'Mesh') navmesh = node;
});
var geometry = new THREE.Geometry();
geometry.fromBufferGeometry(navmesh.geometry);
var zoneNodes = patrol.buildNodes(geometry);
patrol.setZoneData('level', zoneNodes);
Object.assign(navmesh.material, {
color: 0x009688,
opacity: 0.5,
transparent: true
});
scene.add(navmesh);
// Set the player's navigation mesh group
playerNavMeshGroup = patrol.getGroup('level', player.position);
});
var loader = new THREE.OBJLoader();
// load a resource
loader.load(
// resource URL
'meshes/mesh/Mesh/car/car.obj',
// called when resource is loaded
function ( object ) {
object.scale.set(0.2,0.2,0.2);
object.position.set(-4.5, 5.3, 5.6);
scene.add( object );
},
);
// Add test sphere
var geometry = new THREE.SphereGeometry( 0.5, 40, 40 );
var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
player = new THREE.Mesh( geometry, material );
scene.add( player );
player.position.set(-3.5, 0.5, 5.5);
// end point
geometry = new THREE.BoxGeometry( 0.3, 0.3, 0.3 );
var material = new THREE.MeshBasicMaterial( {color: 0xff0000} );
target = new THREE.Mesh( geometry, material );
scene.add( target );
target.position.copy(player.position);
// background
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor(0xffffff);
container.appendChild( renderer.domElement );
raycaster = new THREE.Raycaster();
document.addEventListener( 'click', onDocumentMouseClick, false );
window.addEventListener( 'resize', onWindowResize, false );
controls = new THREE.OrbitControls( camera );
controls.damping = 0.2;
}
function onDocumentMouseClick (event) {
// event.preventDefault();
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
camera.updateMatrixWorld();
raycaster.setFromCamera( mouse, camera );
var intersects = raycaster.intersectObject( level );
if ( intersects.length > 0 ) {
var vec = intersects[0].point;
target.position.copy(vec);
// Calculate a path to the target and store it
calculatedPath = patrol.findPath(player.position, target.position, 'level', playerNavMeshGroup);
if (calculatedPath && calculatedPath.length) {
if (pathLines) {
scene.remove(pathLines);
}
var material = new THREE.LineBasicMaterial({
color: 0x0000ff,
linewidth: 2
});
var geometry = new THREE.Geometry();
geometry.vertices.push(player.position);
// Draw debug lines
for (var i = 0; i < calculatedPath.length; i++) {
geometry.vertices.push(calculatedPath[i].clone().add(new THREE.Vector3(0, 0.2, 0)));
}
pathLines = new THREE.Line( geometry, material );
scene.add( pathLines );
// Draw debug cubes except the last one. Also, add the player position.
var debugPath = [player.position].concat(calculatedPath);
for (var i = 0; i < debugPath.length - 1; i++) {
geometry = new THREE.BoxGeometry( 0.3, 0.3, 0.3 );
var material = new THREE.MeshBasicMaterial( {color: 0x00ffff} );
var node = new THREE.Mesh( geometry, material );
node.position.copy(debugPath[i]);
pathLines.add( node );
}
}
}
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
var currTime = window.performance.now();
var delta = (currTime - lastFrameTime) / 1000;
var dTime = Math.min(delta, maxFrameTime);
elapsedTime += delta;
lastFrameTime = currTime;
tick(dTime);
requestAnimationFrame( animate );
render();
}
function tick(dTime) {
if (!level) {
return;
}
var speed = 5;
var targetPosition;
if (calculatedPath && calculatedPath.length) {
targetPosition = calculatedPath[0];
var vel = targetPosition.clone().sub(player.position);
if (vel.lengthSq() > 0.05 * 0.05) {
vel.normalize();
// Mve player to target
player.position.add(vel.multiplyScalar(dTime * speed));
}
else {
// Remove node from the path we calculated
calculatedPath.shift();
}
}
}
function render() {
camera.lookAt( scene.position );
camera.updateMatrixWorld();
renderer.render( scene, camera );
}
</script>
</body>
So why don’t you simply replace the sphere with the car model in the player variable? I’ve read this thread for several times and still can’t get what’s the problem.
Maybe this SO answer and its code snippet will help you.
@prisoner849 sir, I tried but car not moving . Check this question. In that question I added code and video check once
All global variables should be defined and set before the call of
init();
animate();
Then, define your player like that var player = new THREE.Object3D();
And finally, in the callback function, when you load the car:
// load a resource
loader.load(
// resource URL
'meshes/mesh/Mesh/car/car.obj',
// called when resource is loaded
function ( object ) {
object.scale.set(.2, .2, .2);
player.add(object);
}
);Just for info, it’s working because you added the car as a child of the player, so because you already have the player moving, the child object (the car) will move with the player object.
An alternative way would be to call your player-moving logic in the loader callback, and replace player with the car object, but that might be a less “progressive loading” way.
I would prefer the way, when you load all the resources with THREE.LoadingManager() first, and then call animation loop in its .onLoad() callback function 
Yep, and while it is loading have a simple loader animation or icon.
Thanks for your answer a lot! I have trapped in this issue almost 3 days using the similar solution but not it work, until found your answer. 
, its working