如何在three.js中添加标记作为精灵位图全景查看器答案

【问题标题】：How to add markers as sprite bitmap Panorama viewer in three.js如何在three.js中添加标记作为精灵位图全景查看器
【发布时间】：2014-03-14 07:08:25
【问题描述】：

我们在 three.js 中开发了一个全景查看器。将纹理位图添加到 Sphere 并在内部移动相机位置。我们想在其中添加标记作为精灵。

当我们将精灵添加到场景中时，它不会被渲染。为什么精灵没有被渲染？

【问题讨论】：

精灵的渲染不能在球体内工作吗？如果可能，请分享屏幕截图/代码。

标签： javascript three.js

【解决方案1】：

解决办法如下：

函数 onDocumentMouseDown(事件) { var interSects = castScreenToSphere(event); 如果（interSects.length > 0） MarkAnnotation(interSects[0].point); }

    function castScreenToSphere(event) {
        var mouse3D = new THREE.Vector3();
        mouse3D.x = (event.clientX / window.innerWidth) * 2 - 1;
        mouse3D.y = -(event.clientY / window.innerHeight) * 2 + 1;
        mouse3D.z = 0.5;
        projector.unprojectVector(mouse3D, camera);
        var ray = new THREE.Raycaster(camera.position, mouse3D.sub(camera.position).normalize());
        var res = ray.intersectObject(mesh);
        return res;
    }
    function MarkAnotation(anot) {

        var ballTexture = THREE.ImageUtils.loadTexture('/map_sprite.png');

        var ballMaterial = new THREE.SpriteMaterial({ map: ballTexture });
        var ballSprite = new THREE.Sprite(ballMaterial);
        ballSprite.scale.set(16, 16, 0.5);
        ballSprite.position.set(anot.x, anot.y, anot.z);
        //ballSprite.position.multiplyScalar(0.9);
        scene.add(ballSprite);
    }

【讨论】：