I added geometry in THREE.Mesh. Working fine.
var geometry = new THREE.SphereGeometry( 0.5, 40, 40 );
var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
var player = new THREE.Mesh( geometry, material );
scene.add( player );
player.position.set(-3.5, 0.5, 5.5);
Now I want to add .obj file in Mesh (var player).
var loader = new THREE.OBJLoader();
// load a resource
loader.load(
'meshes/car.obj',
function ( car ) {
car.scale.set(0.2,0.2,0.2);
car.position.set(-4.5, 5.3, 5.6);
scene.add( car );
},
);
All 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>