三个JS，WebGl，在全景图上显示精灵

Question

我正在构建一个简单的全景 Web 应用程序，用户可以在其中转圈并单击加载的全景图中的精灵。我已经使用 three.js 在 CSS3D 中工作，现在我需要让它在 WebGL 中工作。我已经加载了全景图，并且必须将精灵添加到场景中，因为没有错误，但我看不到精灵。

如何让它可见？

相关代码如下（省略所有标准事件函数和渲染循环）：

function init() {

    var container, mesh;

    container = document.getElementById('container');

    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1100);
    camera.target = new THREE.Vector3(0, 0, 0);

    scene = new THREE.Scene();

    var sides = [
        {
            url: '/assets/posx.jpg'
        },
        {
            url: '/assets/negx.jpg'
        },
        {
            url: '/assets/posy.jpg'
        },
        {
            url: '/assets/negy.jpg'
        },
        {
            url: '/assets/posz.jpg'
        },
        {
            url: '/assets/negz.jpg'
        }
    ];

    var k = 8
    for (var i = 0; i < sides.length; i++) {

        var side = sides[ i ];
        var geometry = new THREE.SphereGeometry(5, k, k);
        k += 8;
        geometry.applyMatrix(new THREE.Matrix4().makeScale(-1, 1, 1));

        var material = new THREE.MeshBasicMaterial({
            map: THREE.ImageUtils.loadTexture(side.url)
        });
        mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);

    }

    var map = THREE.ImageUtils.loadTexture("/assets/soap.png");
    material = new THREE.SpriteMaterial({ map: map, color: 0xffffff, fog: false });
    var sprite = new THREE.Sprite(material);

    sprite.position.x = 128;
    sprite.position.y = 128;
    sprite.position.z = 128;

    scene.add(sprite);


    renderer = new THREE.WebGLRenderer();


    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    document.addEventListener('mousedown', onDocumentMouseDown, false);
    document.addEventListener('mousewheel', onDocumentMouseWheel, false);

    document.addEventListener('touchstart', onDocumentTouchStart, false);
    document.addEventListener('touchmove', onDocumentTouchMove, false);

    window.addEventListener('resize', onWindowResize, false);

}

感谢任何帮助！

Answer 1

如果我没记错的话，您的球体的半径为 5，而您的精灵位于球体之外 128,128,128。您需要增加球体半径或将 sprite 位置减小到半径范围内。

var geometry = new THREE.SphereGeometry(256, k, k);

三个JS，WebGl，在全景图上显示精灵

Three JS, WebGl, display sprite on top of panorama

javascript

three.js

sprite