Three.js 3.js中的光线投射不起作用

关于这个问题，我已经看到了很多问题，但每当我试图使它适应我的情况时，它就不起作用了

为什么单击球体saphi_网格光线时，intersectObjectsaphi_网格返回空数组

我错过了什么

JSFiddle：

初始化函数：

container = document.createElement("div")
document.body.appendChild(container)

camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000)
camera.position. z = 500

scene = new THREE.Scene()

var ambientLight = new THREE.AmbientLight(0xbbbbbb);
scene.add(ambientLight);

var floor_geo =  new THREE.PlaneGeometry(window.innerWidth, 5, 10, 10)
var floor_color = new THREE.MeshBasicMaterial({color: 0xffff00})
var floor_mesh = new THREE.Mesh(floor_geo, floor_color)
var saphi_material = new THREE.MeshBasicMaterial({color: 0xfff000})
var saphi_geo = new THREE.SphereGeometry(50, 50, 50)
saphi_mesh = new THREE.Mesh(saphi_geo, saphi_material)
scene.add(saphi_mesh)
scene.add(floor_mesh)

projector = new THREE.Projector()

renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)

container.appendChild(renderer.domElement)

renderer.domElement.addEventListener("mousedown", onClick, false)

x = (event.clientX / window.innerWidth) * 2 - 1
y = (event.clientY / window.innerHeight) * 2 + 1
dir = new THREE.Vector3(x, y, -1)
projector.unprojectVector(dir, camera)
console.log(dir)    
ray = new THREE.Raycaster(camera.position, dir.sub(camera).normalize())
console.log(ray.intersectObject(saphi_mesh))

onClick函数：

container = document.createElement("div")
document.body.appendChild(container)

camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000)
camera.position. z = 500

scene = new THREE.Scene()

var ambientLight = new THREE.AmbientLight(0xbbbbbb);
scene.add(ambientLight);

var floor_geo =  new THREE.PlaneGeometry(window.innerWidth, 5, 10, 10)
var floor_color = new THREE.MeshBasicMaterial({color: 0xffff00})
var floor_mesh = new THREE.Mesh(floor_geo, floor_color)
var saphi_material = new THREE.MeshBasicMaterial({color: 0xfff000})
var saphi_geo = new THREE.SphereGeometry(50, 50, 50)
saphi_mesh = new THREE.Mesh(saphi_geo, saphi_material)
scene.add(saphi_mesh)
scene.add(floor_mesh)

projector = new THREE.Projector()

renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)

container.appendChild(renderer.domElement)

renderer.domElement.addEventListener("mousedown", onClick, false)

x = (event.clientX / window.innerWidth) * 2 - 1
y = (event.clientY / window.innerHeight) * 2 + 1
dir = new THREE.Vector3(x, y, -1)
projector.unprojectVector(dir, camera)
console.log(dir)    
ray = new THREE.Raycaster(camera.position, dir.sub(camera).normalize())
console.log(ray.intersectObject(saphi_mesh))

我刚刚修正了onClick函数

---

这是一个工作示例：

我建议遵循上的示例。我将对此进行研究，谢谢