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

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);