javascript - 试图在旋转时将粒子对准相机并在三个 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

目前还不清楚您在寻找什么；您的演示链接似乎无关...

您是否想让立方体在相机中正常显示(始终面向相机)？如果是这样，您将需要逻辑来重新定向它们以在用户移动相机 View 时重新面对相机，因为我看到您还设置了 TrackballControls，它实际上移动了相机，而不是场景。这意味着用户可以更改场景的相机 View ，而您想要面向相机的项目需要重新定位。重新定向逻辑需要放在您的 render() 函数中。

顺便说一句，让一个物体始终面对相机:

• 定义它，当它不旋转时，它面向你的方向 想;
• 通过您想要的任何方法将对象放置到您的场景中， 包括您想使用的任何层次旋转或翻译，以将它们定位在您想要的位置； (注意，他们可能没有面对 此时你想要的位置，但在这一步没问题)；
• 来自 three.js 的请求，它计算局部空间到世界空间 场景的转换。之后，每个对象的世界 变换矩阵包含串联的旋转，并且 将每个对象从本地空间转换到世界的翻译 空间。
• 进入每个对象的本地到世界转换矩阵 用恒等式替换旋转 3x3 矩阵组件 转换 { [1 0 0] [0 1 0] [0 0 1] }。这有效删除 在世界空间中进行旋转，使您执行此操作的所有对象 始终面对镜头。