Пытается направить частицы на камеру во время вращения и предупреждать сообщение о пересечении в три js?

Question

Я пытаюсь создать обработчик событий на частицах с предупреждающим сообщением на сфере, всегда нацеленным на камеру. Нечто подобное this demo (и делает его работать на IE 9+)

вот мой код .. http://jsfiddle.net/praveenv29/cVnKV/11/

var renderer, projector; 
var mouseX, mouseY, stats, container; 
var objects = []; 
var INTERSECTED; 

var camera, scene, renderer, material, mesh, cont; 

var w1 = 960; 
var h1 = 700; 

var halfWidth = w1/2; 
var halfHeigth = h1/2; 

function init() { 
    cont = document.createElement('div'); 
    cont.id = "cont"; 
    document.body.appendChild(cont); 

    camera = new THREE.PerspectiveCamera(75, w1/h1, 1, 10000); 
    camera.position.set(90, 90, -200); 


    scene = new THREE.Scene(); 
    scene.add(camera); 

    controls = new THREE.OrbitControls(camera); 

    controls = new THREE.TrackballControls(camera, cont); 
    controls.rotateSpeed = 0.8; 
    controls.zoomSpeed = 1.2; 
    controls.panSpeed = 2.5; 
    controls.noZoom = true; 
    controls.noPan = true; 
    controls.staticMoving = false; 

    controls.target.set(0, 0, 0); 
    controls.keys = [95, 90, 84]; 

    renderer = new THREE.CanvasRenderer(); 


    material = new THREE.MeshBasicMaterial({ 
     color: 0x000000, 
     wireframe: true 
    }); 
    renderer.setSize(w1, h1); 
    cont.appendChild(renderer.domElement); 
    generateGeometry(); 

    var light = new THREE.PointLight(0xffffff); 
    light.position.set(10, 0, 0); 
    scene.add(light); 

} 

function animate() { 
    requestAnimationFrame(animate); 
    render(); 
} 

function render() { 
    controls.update(); 
    renderer.render(scene, camera); 
} 

function generateGeometry() { 

    var axis = new THREE.AxisHelper(); 
    scene.add(axis); 

    for (var i = 0; i < 20; i++) { 

     var gloom = new THREE.ImageUtils.loadTexture('map_pin.png'); 
     materialr = new THREE.MeshBasicMaterial({ 
      map: gloom, 
      overdraw: true, 
      side: THREE.DoubleSide 
     }); 
     var geometry = new THREE.PlaneGeometry(15, 15, 2, 2); 

     var cube = new THREE.Mesh(geometry, materialr); 
     cube.position.x = Math.random() * 2 - 1; 
     cube.position.y = Math.random() * 2 - 1; 
     cube.position.z = Math.random() * 2 - 1; 
     cube.position.normalize(); 
     cube.position.multiplyScalar(125); 

     cube.rotation.x = cube.position.x/Math.PI; //57.38 

     cube.rotation.y = 360/Math.PI * 2; 

     objects.push(cube); 
     scene.add(cube); 

    } 

    //earth 
    var texture = THREE.ImageUtils.loadTexture('world.jpg'); 
    var materials = new THREE.MeshBasicMaterial({ 
     map: texture, 
     overdraw: true 
    }); 

    var cone = new THREE.SphereGeometry(120, 35, 35); 

    var coneMesh = new THREE.Mesh(cone, material); 

    coneMesh.position.y = 0; 
    coneMesh.rotation.set(0, 0, 0); 

    scene.add(coneMesh); 


} 

init(); 
animate(); 

Answer 1

Это довольно неясно, что вы ищете; ваша демонстрационная ссылка кажется несвязанной ...

Вы пытаетесь сделать кубы нормальной камерой (всегда перед камерой)? Если это так, вам понадобится логика, чтобы переориентировать их, чтобы перевернуть камеру в любое время, когда пользователь переместит камеру, так как я вижу, вы также настраиваете TrackballControls, которые фактически перемещают камеру, а не сцену. Это означает, что пользователь может изменить вид камеры на вашу сцену, а элементы, которые вы хотите смотреть в камеру, необходимо переориентировать. Эта логика переориентации должна быть помещена внутри вашей функции render().

BTW, чтобы получить объект всегда перед камерой:

• Определить это таким образом, что, когда он не вращается, она повернута к вам хотение;
• Поместите объект в свою сцену любым способом, , включая любые иерархические вращения или переводы, которые вы хотите использовать, чтобы разместить их там, где вы хотите; (Обратите внимание, что они не могут быть обращены к , где вы хотите в этот момент, но на этом этапе это нормально);
• Запрос от three.js, что он вычисляет локальное пространство мира преобразования для вашей сцены. После этого матрица преобразования каждого объекта в мире содержит конкатенированные вращения и переводы, которые преобразуют каждый объект из локального пространства в мир. пространство.
• Перейдите в матрицу преобразования каждого из объектов в локальный к миру, а замените матричные компоненты вращения 3x3 идентификатором преобразование {[1 0 0] [0 1 0] [0 0 1]}. Это эффективно вытирает за повороты в мировом пространстве, делая все объекты, которые вы делаете это , чтобы всегда смотреть в камеру.