私は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());
in Three.jsこの例のような正確な動きが必要です。FPS https://github.com/mrdoob/three.js/blob/master/examples/misc_fps.html –
ご覧のとおり、http ://threejs.org/examples/#misc_fps)あなたが共有しているのは、階段の代わりに斜面を使うことです。ダウンレイは地面レベルを徐々に検出する必要があります。私もthree.jsで[類似のもの](https://yomotsu.github.io/walkthrough)を作ろうとしました^^ – yomotsu
もう一つの解決策は、階段の高さよりも高い 'raycaster.ray.origin.y'をプルアップすることです。 – yomotsu