THREE.js SkyBox

Я хочу создать SkyBox в THREE.js, уже нашел несколько подсказок, как его создать, но он не работает. Я пробовал все, но ничего не работает. Пути Filepaths и Image являются правильными.THREE.js SkyBox

Может кто-нибудь объяснить, что не так с кодом и почему skybox не появляется?

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>Earth</title> 
     <meta charset="utf-8"> 
     <style> 
      body { 
       margin: 0px; 
       background-color: #000000; 
       overflow: hidden; 
      } 
     </style> 
    </head> 
    <body> 

     <script src="../js/three.min.js"></script> 

     <script> 

      var camera, scene, renderer; 
      var mirrorCube, mirrorCubeCamera; // for mirror material 
      var mirrorSphere, mirrorSphereCamera; // for mirror material 

      init(); 
      animate(); 

      function init() { 
       renderer = new THREE.WebGLRenderer(); 
       renderer.setPixelRatio(window.devicePixelRatio); 
       renderer.setSize(window.innerWidth, window.innerHeight); 
       document.body.appendChild(renderer.domElement); 

       scene = new THREE.Scene(); 
       camera = new THREE.PerspectiveCamera(70, window.innerWidth/window.innerHeight, 1, 1000); 
       scene.add(camera); 
       camera.position.set(0,150,400); 
       camera.lookAt(scene.position); 

       var sides = ['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg']; 
       var scCube = THREE.ImageUtils.loadTexture(sides); 
       scCube.format = THREE.RGBFormat; 

       var skyShader = THREE.ShaderLib["cube"]; 
       skyShader.uniform["tCube"].value = scCube; 
       var skyMaterial = new THREE.ShaderMaterial({ 
        fragmentShader: skyShader.fragmentShader, vertexShader: skyShader.vertexShader, 
        uniforms: skyShader.uniforms, depthWrite: false, side: THREE.BackSide 
       }); 

       var skyBox = new THREE.Mesh(new THREE.CubeGeometry(500, 500, 500), skyMaterial); 
       skyMaterial.needsUpdate = true; 

       scene.add(skyBox); 
      } 

      function render() 
      { 
       mirrorSphere.visible = false; 
       mirrorSphereCamera.updateCubeMap(renderer, scene); 
       mirrorSphere.visible = true; 

       renderer.render(scene, camera); 
      } 

      function onWindowResize() { 
       camera.aspect = window.innerWidth/window.innerHeight; 
       camera.updateProjectionMatrix(); 
       renderer.setSize(window.innerWidth, window.innerHeight); 
      } 

      function animate() { 
       requestAnimationFrame(animate); 
       render(); 
       renderer.render(scene, camera); 
      } 

     </script> 

    </body> 
</html>

источник

2015-06-03 Ramy

Вам кажется, что отсутствует камера, которая отображает карту окружения, а также сферу с картой окружения.

// Create the enviroment map camera 
mirrorSphereCamera = new THREE.CubeCamera(0.1, 150000, 512); 
mirrorSphereCamera.renderTarget.minFilter = THREE.LinearMipMapLinearFilter; 
scene.add(mirrorSphereCamera); 

// Sphere material 
var mirrorSphereMaterial = new THREE.MeshBasicMaterial({ 
    envMap: mirrorSphereCamera.renderTarget 
}); 

// Sphere geometry 
mirrorSphere = new THREE.Mesh(sphereGeom, mirrorSphereMaterial); 
mirrorSphere.position.set(1000, 1000, 0); 
mirrorSphereCamera.position = mirrorSphere.position; 
scene.add(mirrorSphere);

источник

2015-06-03 16:17:58

Вы не добавили света к сцене.

Используйте следующий код, чтобы добавить освещение, и вы должны быть в порядке:

// Lighting in general 
// Light one 
var light = new THREE.PointLight(0x999999, 2, 100); 
light.position.set(50, 50, 50); 
scene.add(light); 

// Light two 
var lightScene = new THREE.PointLight(0x999999, 2, 100); 
lightScene.position.set(0, 5, 0); 
scene.add(lightScene);

Конечно, вы могли бы просто использовать окружающий свет (хотя я не пробовал, что в моей сцене с текстурой неба) - следующие должны позволить вам сделать это:

var light = new THREE.AmbientLight(0x404040); // soft white light 
scene.add(light);

Надеюсь, что это поможет!

источник

2016-01-04 16:00:37 user1236373

THREE.js SkyBox

ответ

Смежные вопросы