三个 JS，WebGl，在全景图顶部显示精灵答案

【问题标题】：Three JS, WebGl, display sprite on top of panorama三个 JS，WebGl，在全景图顶部显示精灵
【发布时间】：2015-04-01 03:22:26
【问题描述】：

我正在构建一个简单的全景网络应用程序，用户可以在其中转圈并点击加载的全景图中的精灵。我使用 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);

}

任何帮助表示赞赏！

【问题讨论】：

标签： javascript three.js sprite

【解决方案1】：

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

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

【讨论】：