Three.js 光线投射器在物体离开原点后不会击中物体

Question

我在使用 raycaster 时遇到问题：

当我在中心 (0, 0, 0) 创建对象时，光线投射器可以击中它。但是无论出于何种原因，如果我将对象移动到 (0, 300, 0) 或其他位置，光线投射器将停止击中对象。

所有方向的设置都 100% 正确。我使用 Three.js 函数一步一步地测试了我自己对移动对象的光线投射并且它有效。

似乎 raycaster.IntersectsObject(objects) 没有正确地将 matrixWorld 应用到 Bounding Sphere。

知道为什么吗？

我知道有一个关于这个主题的类似 Post，但解决方案对我来说没有用：

边界球具有正确的值。

Answer 1

您已确保网格的世界矩阵是最新的。您可以通过调用 mesh.updateMatrixWorld();.

轻松解决此问题

var camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 400, 200, -300 );

var scene = new THREE.Scene();

var geometry = new THREE.SphereBufferGeometry(100, 100, 100);
var material = new THREE.MeshBasicMaterial({
  color: 0xaa5555
});

var mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 300, 0);
mesh.updateMatrixWorld(); // FIX
scene.add(mesh);

camera.lookAt( mesh.position );

var raycaster = new THREE.Raycaster();
var ray = raycaster.ray;
ray.origin.copy( camera.position );
ray.direction.subVectors( mesh.position, camera.position ).normalize();

var intersections = raycaster.intersectObjects(scene.children);
console.log( intersections ); 

var renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

renderer.render( scene, camera );

body {
  margin: 0;
}
canvas {
  display: block;
}

<script src="https://cdn.jsdelivr.net/npm/three@0.119/build/three.js"></script>

Three.js 光线投射器在物体离开原点后不会击中物体

Three.js raycaster does not hit objects after they are moved away from origin

javascript

matrix

three.js

raycasting