2016-05-20 4 views
0

私はobjとmtlローダーで家を積み込み、プレイヤーをインストールするのに成功しました(彼は前後に動くことができます)が、問題は彼です階段を下にしたり上に持っていくことはできません。私は私のコードでpoint_lock_controlesとraycasterを使って、どこが間違っているのか教えてください。この例では、JSONローダを使用するためPlayer cant階段を取る

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

を使用してみました、applyphysics()関数に渡されるパラメータが異なっています。しかし、私はOBJとMTLローダーを使用して少し変更しようとしましたが、ロードされたモデルを得ることができましたが、例のような動きを得ることができませんでした。 add:オブジェクトは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()); 

答えて

1

階段の上に移動すると、階段を移動するだけでは平面上よりも複雑になります。

地面高さをスムーズに検出するために、階段の代わりにナビゲーションメッシュを準備します。 http://docs.unity3d.com/Manual/nav-NavigationSystem.html

によって

またcannon.jsまたはammo.jsのように、壁や他の人との衝突を検出するために、物理学の事を理解する必要があるかもしれません。

+0

in Three.jsこの例のような正確な動きが必要です。FPS https://github.com/mrdoob/three.js/blob/master/examples/misc_fps.html –

+0

ご覧のとおり、http ://threejs.org/examples/#misc_fps)あなたが共有しているのは、階段の代わりに斜面を使うことです。ダウンレイは地面レベルを徐々に検出する必要があります。私もthree.jsで[類似のもの](https://yomotsu.github.io/walkthrough)を作ろうとしました^^ – yomotsu

+0

もう一つの解決策は、階段の高さよりも高い 'raycaster.ray.origin.y'をプルアップすることです。 – yomotsu