基于three.js的碰撞检测
基于three.js的碰撞检测
提问于 2019-05-01 20:19:41
我用three.js创建了一个非常简单的世界。我正在制作一个非常基本的平台--前一个，当一个用户在硬币上运行时，我试图让碰撞检测工作起来，以更新一个文本计数器，显示有多少枚硬币被碰过。到目前为止，当我浏览硬币时，没有发生任何事情，也没有JavaScript控制台错误。任何帮助都会很棒。
我一直在尝试用射线仪来探测碰撞。以下是我所拥有的一些代码片段，如果需要，我可以转储更多或全部600行代码。
<div id="info">
<h1 style="color: white">0/10</h1>
</div>Javascript：
var coin = [];
var raycaster;
var loader = new THREE.GLTFLoader();
... //Lots more variables I've left out for readability
initThree();
initCannon();
animate();
function initThree() {
clock = new THREE.Clock();
//Renderer
var width = window.innerWidth;
var height = window.innerHeight;
renderer = new THREE.WebGLRenderer( {antialias: true} );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( width, height );
document.body.appendChild( renderer.domElement );
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xb2b2b2 );
scene.fog = new THREE.Fog( 0x9bacc6, 0, 7000 );
//Camera
camera = new THREE.PerspectiveCamera( 90, width/height, 1, 10000 );
//camera.position.set( 3000, 3000, 3000 );
camera.position.set( 0, 10, 0 );
camera.lookAt( scene.position );
//Controls
controls = new THREE.PointerLockControls( camera );
var blocker = document.getElementById( 'blocker' );
var instructions = document.getElementById( 'instructions' );
//Lock control when focused
instructions.addEventListener( 'click', function () {
controls.lock();
}, false );
//Hide overlay
controls.addEventListener( 'lock', function () {
instructions.style.display = 'none';
blocker.style.display = 'none';
} );
controls.addEventListener( 'unlock', function () {
blocker.style.display = 'block';
instructions.style.display = '';
} );
scene.add( controls.getObject() );
//Raycaster
raycaster = new THREE.Raycaster( new THREE.Vector3(), new THREE.Vector3( 0, -1, 0 ), 0, 10 );
loadTrees();
loadCoins();
createLight();
createGround();
createWater();
createSky();
}
function loadCoins() {
var coinPath = '../models/gltf/coin/scene.gltf';
loader.load( coinPath, function( gltf ) {
coin[0] = gltf.scene;
coin[0].position.set(3300,1500,1000);
coin[0].scale.set(100,100,100);
scene.add( coin[0] );
});
loader.load( coinPath, function( gltf ) {
coin[1] = gltf.scene;
coin[1].position.set(3300,1500,-1000);
coin[1].scale.set(100,100,100);
scene.add( coin[1] );
...
});
function animate() {
requestAnimationFrame( animate );
update();
render();
}
function update() {
//controls.update();
world.step( timeStep );
ground.position.copy( groundBody.position );
ground.quaternion.copy( groundBody.quaternion );
var mixDelta = clock.getDelta();
if( mixer != null) {
mixer.update( mixDelta );
mixer2.update( mixDelta );
mixer3.update( mixDelta );
}
raycaster.ray.origin.copy( controls.getObject().position );
raycaster.ray.origin.y -= 100;
//checks to see if intersecting object array
var intersections = raycaster.intersectObjects( coin );
var touching = intersections.length > 0;
var time = performance.now();
var delta = ( time - prevTime ) / 1000;
velocity.x -= velocity.x * 10 * delta;
velocity.z -= velocity.z * 10 * delta;
velocity.y -= 9.8 * 100 * delta; //100 = mass //9.8
direction.z = Number( moveForward ) - Number( moveBackward );
direction.x = Number( moveLeft ) - Number( moveRight );
direction.normalize(); //consistent movement in all directions
if( moveForward || moveBackward ) {
velocity.z -= direction.z * 7500 * delta;
}
if( moveLeft || moveRight ) {
velocity.x -= direction.x * 7500 * delta;
}
//Stops when runs into an object
if ( touching === true ) {
coinCount += 1;
document.getElementById('info').innerHTML = coinCount + "/10";
}
controls.getObject().translateX( velocity.x * delta );
controls.getObject().translateY( velocity.y * delta );
controls.getObject().translateZ( velocity.z * delta );
//Keep Player within bounds of game
if ( controls.getObject().position.y < 200 ) {
velocity.y = 0;
controls.getObject().position.y = 200;
canJump = true;
}
if ( controls.getObject().position.x < -4000 ) {
velocity.x = 0;
controls.getObject().position.x = -4000;
}
if ( controls.getObject().position.x > 4000 ) {
velocity.x = 0;
controls.getObject().position.x = 4000;
}
if ( controls.getObject().position.z < -4000 ) {
velocity.x = 0;
controls.getObject().position.z = -4000;
}
if ( controls.getObject().position.z > 4000 ) {
velocity.x = 0;
controls.getObject().position.z = 4000;
}
prevTime = time;
//Update Water
water.material.uniforms[ "time" ].value += 1.0 / 60.0;
//Spin Coins
for( i=0; i<coin.length; i++ ) {
coin[i].rotation.y += .05;
}
}回答 1
Stack Overflow用户
回答已采纳
发布于 2019-05-02 11:20:09
对于这个用例，光线投射不是一种理想的碰撞检测方法。考虑用简单的边界体积来表示您的硬币，比如THREE.Box3 ( AABB)或THREE.Sphere (一个边界球)。玩家本身也将用这样的边界音量来表示。在你的动画循环中，你会测试玩家的包围量是否与游戏环境中的某些物体相交，比如你的硬币。这是一个比使用单一射线更可靠的测试，因为您可以更好地表示具有空间扩展的3D对象。
顺便说一句:如果你还不熟悉边界卷，我强烈建议你研究一下这个话题。AABB和边界球是碰撞检测中非常重要的实体。一个很好的资源，这是3D数学基础为图形和游戏开发由弗莱彻邓恩伊恩帕伯里，第9章几何基础。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55942235
复制相关文章
相似问题
腾讯云开发者
