我使用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;
}
}
答案 0 :(得分：1)
对于此用例，射线广播不是理想的碰撞检测方法。考虑用简单的包围体来表示您的硬币，例如THREE.Box3（AABB）或THREE.Sphere（包围球）。播放器本身也将具有这样的边界体积。然后在动画循环中，测试玩家的边界量是否与游戏环境中的某些对象（例如硬币）相交。这比使用单条射线要可靠得多，因为您可以更好地表示具有空间扩展的3D对象。
顺便说一句：如果您还不熟悉边界体积，强烈建议您稍微研究一下此主题。在碰撞检测方面，AABB和边界球是非常重要的实体。一个很好的资源是Fletcher Dunn Ian Parberry撰写的用于图形和游戏开发的3D数学入门”，第9章“几何基元” 。