im trying to get a player move around the house, i was successful in loading the house with obj and mtl loaders and installing the player(he is able to move front and back) , however the problem is he can't take stairs down or up. I have used point_lock_controles and raycaster in my code please let me know where i went wrong.
controls = new THREE.PointerLockControls( camera );
scene.add( controls.getObject() );
var onKeyDown = function ( event ) {
switch ( event.keyCode ) {
case 38: //up
case 87: //w
moveForward = true;
break;
case 37: //left
case 65: //a
moveLeft = true; break;
case 40: //down
case 83: //s
moveBackward = true;
break;
case 39: //right
case 68: //d
moveRight = true;
break;
case 32: //space
if ( canJump === true ) velocity.y += 350;
canJump = false;
break;
}
};
var onKeyUp = function ( event ) {
switch( event.keyCode ) {
case 38: //up
case 87: //w
moveForward = false;
break;
case 37: //left
case 65: //a
moveLeft = false;
break;
case 40: //down
case 83: //s
moveBackward = false;
break;
case 39: //right
case 68: //d
moveRight = false;
break;
}
};
document.addEventListener( 'keydown', onKeyDown, false );
document.addEventListener( 'keyup', onKeyUp, false );
raycaster = new THREE.Raycaster( new THREE.Vector3(), new THREE.Vector3( 0, - 1, 0 ), 0, 10 );
function animate() {
requestAnimationFrame( animate );
if ( controlsEnabled ) {
raycaster.ray.origin.copy( controls.getObject().position );
raycaster.ray.origin.y -= 10;
var intersections = raycaster.intersectObjects( objects );
var isOnObject = intersections.length > 0;
var time = performance.now();
var delta = ( time - prevTime ) / 1000;
velocity.x -= velocity.x * 5.0 * delta;
velocity.z -= velocity.z * 5.0 * delta;
velocity.y -= 9.8 * 100.0 * delta; // 100.0 = mass
if ( moveForward ) velocity.z -= 1000.0 * delta;
if ( moveBackward ) velocity.z += 1000.0 * delta;
if ( moveLeft ) velocity.x -= 1000.0 * delta;
if ( moveRight ) velocity.x += 1000.0 * delta;
if ( isOnObject === true ) {
velocity.y = Math.max( 0, velocity.y );
canJump = true;
}
controls.getObject().translateX( velocity.x * delta );
controls.getObject().translateY( velocity.y * delta );
controls.getObject().translateZ( velocity.z * delta );
if ( controls.getObject().position.y < 10 ) {
velocity.y = 0;
controls.getObject().position.y = 10;
canJump = true;
}
prevTime = time;
}
renderer.render( scene, camera );
Guys, i tried using the example FPS https://github.com/mrdoob/three.js/blob/master/examples/misc_fps.html
since this example uses json loader, the parameters passed to applyphysics() function are different. However, i use OBJ and MTL loader, tried to change a bit and could get the model loaded but not able to get any movement like in the example, the player keeps faling down and it shows " three.js:8786 THREE.Object3D.add: object not an instance of THREE.Object3D." something wrong with my code refernce. Please help me out
My question is "How to add obj + mtl loader into this example and load my model with movement " This below code is the only code i manually inserted into this example, https://github.com/mrdoob/three.js/blob/master/examples/misc_fps.html
function makePlatform() {
var placeholder = new THREE.Object3D();
var onProgress = function ( xhr ) {
if ( xhr.lengthComputable ) {
var percentComplete = xhr.loaded / xhr.total * 100;
console.log( Math.round(percentComplete, 2) + '% downloaded' );
}
};
var onError = function ( xhr ) { };
THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setBaseUrl( 'myhouse/' );
mtlLoader.setPath( 'myhouse/' );
mtlLoader.load( 'house.mtl', function( materials ) {
materials.preload();
var platform = new THREE.OBJLoader();
platform.setMaterials( materials );
platform.setPath( 'myhouse/' );
platform.load( 'house.obj', function ( object ) {
object.position.y = - 95;
object.castShadow = true;
object.receiveShadow = true;
object.traverse( function( node ) { if ( node instanceof THREE.Mesh ) { node.castShadow = true;
node.receiveShadow = true; } } );
scene.add( object );
object.name="platform";
placeholder.add(platform);
},onProgress, onError );
return placeholder;
});
}
var renderer = new THREE.WebGLRenderer({ antialias : true });
renderer.setPixelRatio( window.devicePixelRatio );
var camera = new THREE.PerspectiveCamera( 60, 1, 0.1, 9000 );
var scene = new THREE.Scene();
scene.add( camera );
var light = new THREE.HemisphereLight( 0xeeeeff, 0x777788, 0.75 );
light.position.set( 0.5, 1, 0.75 );
scene.add( light );
scene.add( makeSkybox( [
'skybox/px.jpg', // right
'skybox/nx.jpg', // left
'skybox/py.jpg', // top
'skybox/ny.jpg', // bottom
'skybox/pz.jpg', // back
'skybox/nz.jpg' // front
], 8000 ));
scene.add( makePlatform());
