Блог

Главная - Вопросы по программированию - Raycasting в Three.js не работает

Raycasting в Three.js не работает

#three.js

#three.js

Вопрос:

Я видел множество вопросов по этому вопросу, но всякий раз, когда я пытаюсь адаптировать его к своей ситуации, он никогда не работает.

Почему, когда я нажимаю на сферу (saphi_mesh), ray.intersectObject(saphi_mesh) возвращает пустой массив?

Что я здесь пропустил?

JSFiddle: http://jsfiddle.net/qZh59 /

функция инициализации:

 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)

Функция onClick:

 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))

Комментарии:

1. Я бы предложил последовать примеру в soledadpenades.com/articles/three-js-tutorials/object-picking .

2. Я рассмотрю это, спасибо

Ответ №1:

Я только что исправил onClick функцию

 function onClick(event) {
    x = (event.clientX / window.innerWidth) * 2 - 1;
    y = -(event.clientY / window.innerHeight) * 2   1;
    dir = new THREE.Vector3(x, y, -1)
    dir.unproject(camera)

    console.log(dir)    
    ray = new THREE.Raycaster(camera.position
                           ,dir.sub(camera.position).normalize()
          )
    console.log(ray.intersectObject(saphi_mesh))
}

Вот рабочий образец: http://jsfiddle.net/qZh59/2 /