javascript - 玩家不能走楼梯

Question

我试图让玩家在房子周围移动，我成功地用 obj 和 mtl 加载器加载房子并安装了玩家(他能够前后移动)，但问题是他不能接受向下或向上的楼梯。我在代码中使用了 point_lock_controles 和 raycaster 请让我知道哪里出错了。

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

伙计们，我尝试使用示例 FPS https://github.com/mrdoob/three.js/blob/master/examples/misc_fps.html

由于此示例使用 json 加载器，因此传递给 applyphysicals() 函数的参数有所不同。但是，我使用 OBJ 和 MTL 加载器，尝试进行一些更改，可以加载模型，但无法像示例中那样获得任何运动，播放器不断倒下并显示“Three.js:8786 THREE.Object3D.添加:对象不是 THREE.Object3D 的实例。”我的代码引用有问题。请帮帮我

我的问题是“如何将 obj + mtl 加载器添加到此示例中并通过移动加载我的模型”下面的代码是我手动插入到此示例中的唯一代码，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());

Answer 1

由于台阶的存在，在楼梯上移动比在平坦的表面上移动更加复杂。

准备导航网格而不是楼梯以顺利检测地面高度。

by http://docs.unity3d.com/Manual/nav-NavigationSystem.html

您可能还需要了解物理知识来检测与墙壁和其他物体的碰撞，例如 cannon.js或ammo.js .