Question

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

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

Answer 1

以下是解决方案：

function onDocumentMouseDown（event）{ var interSects = castScreenToSphere（event）; if（interSects.length＆gt; 0） MarkAnotation（相交[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);
    }

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

1 个答案: