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