Question

我正在制作一个简单的全景网络应用程序，用户可以在其中转动圆圈并点击加载的全景图中的精灵。我使用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以外的球体之外。您需要增加球体半径或将精灵位置减少到半径范围内的位置。

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

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

1 个答案: