Three.js 的天空盒

Question

我在 three.js 上自学了我的个人作业，但我对计算机图形方面的东西还是很陌生。我想在我的动画系统中添加天空盒，但经过多次尝试后我没有成功。在代码中，我做了很多注释，使之成为运行.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Mine</title>
  <style>
   /*body{
   margin: 0;
   padding: 0;
   background-color: #000000;
   font-size: 0;
   overflow: hidden;}
   */
   canvas{
     width: 100%; height: 100%;
        }

  </style>
 </head>
 <body>
  <script src="build/three.js"></script>
  <script src="FirstPersonControls.js"></script>
  <script src="build/three.min.js"></script>
  <script src="OrbitControls.js"></script>
  <script>

   //adding the scene with camera
   var scene = new THREE.Scene();

   var meshes=[];
   var clock=new THREE.Clock();


   var camera = new THREE.PerspectiveCamera(
   45, window.innerWidth / window.innerHeight, 0.01, 1000 );
   camera.position.set(0,5,60);

   

   var renderer = new THREE.WebGLRenderer({antialias: true});
   renderer.setSize( window.innerWidth, window.innerHeight );
   renderer.setPixelRatio(window.devicePixelRatio);
   // renderer.setClearColor(0xffffff);
   renderer.shadowMap.enabled=true;
   renderer.shadowMap.type=0;
   renderer.gammaInput=true;
   renderer.gammaOutput=true;
   renderer.domElement.style.position = 'relative';
   document.body.appendChild( renderer.domElement );

   //controls
   // var controls = new THREE.FirstPersonControls(camera,renderer.domElement);
   // controls.movementSpeed=200;
   // controls.lookSpeed=0.1;
   // controls.lookVertical=true;
   // controls.lon=-1.5*180/Math.PI; 

   var sunLight = new THREE.SpotLight(0xffffff, 0.3, 0, Math.PI / 2);
   sunLight.position.set(1000, 2000, 1000);
   sunLight.castShadow = true;
   sunLight.shadow.bias = -0.0002;
   sunLight.shadow.camera.far = 4000;
   sunLight.shadow.camera.near = 750;
   sunLight.shadow.camera.fov = 30;
   scene.add(sunLight);

   var ambientLight = new THREE.AmbientLight(0x3f2806);
   scene.add(ambientLight);
      var pointLight = new THREE.PointLight(0xffaa00, 1, 5000);
            pointLight.position.set(0, 0, 0);
   scene.add(pointLight);


   //adding the geometry (spheregeometry)
   var geometry = new THREE.SphereGeometry( 10, 90, 50 );
   var material = new THREE.MeshPhongMaterial( {
   shininess: 100,
      color: 0xffffff,
      specular: 0xffffff,
      //envMap: cubeCamera1.renderTarget.texture,
      transparent: true,
      side: THREE.BackSide,
      blending: THREE.AdditiveBlending,
      depthWrite: false
   } );

   var sphere = new THREE.Mesh( geometry, material );
   scene.add( sphere );

   // var cubegeometry = new THREE.CubeGeometry (1000, 1000, 1000);
   // var cubeMaterials = 
   // [
   //  new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("violence_ft.jpg"), side: THREE.DoubleSide}),
   //  new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("violence_bk.jpg"), side: THREE.DoubleSide}),
   //  new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("violence_up.jpg"), side: THREE.DoubleSide}),
   //  new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("violence_dn.jpg"), side: THREE.DoubleSide}),
   //  new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("violence_rt.jpg"), side: THREE.DoubleSide}),
   //  new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("violence_lf.jpg"), side: THREE.DoubleSide})
   //  ];

   // // var cubeMaterials = new Three.MeshFaceMaterial( cubeMaterials );
   // var cubenew = new Three.Mesh( cubegeometry, cubeMaterials);
   // scene.add(cubenew);

   // function loop(){
   // requestAnimationFrame(loop);
   // var delta=clock.getDelta();
   // controls.update(delta);
   // renderer.render(scene,camera);
   // }


   // loop();


   

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

   //animating the scene
   // cube.rotation.x += 0.01;
   // cube.rotation.y += 0.01
   
   var render = function render() {
   requestAnimationFrame( render );
   renderer.render( scene, camera );
   };

   render();

  </script>
 </body>
</html>

Answer 1

您可以通过使用 CubeTextureLoader 然后将纹理分配给 scene.background

{
  const loader = new THREE.CubeTextureLoader();
  const texture = loader.load([
    'resources/images/cubemaps/computer-history-museum/pos-x.jpg',
    'resources/images/cubemaps/computer-history-museum/neg-x.jpg',
    'resources/images/cubemaps/computer-history-museum/pos-y.jpg',
    'resources/images/cubemaps/computer-history-museum/neg-y.jpg',
    'resources/images/cubemaps/computer-history-museum/pos-z.jpg',
    'resources/images/cubemaps/computer-history-museum/neg-z.jpg',
  ]);
  scene.background = texture;
}

见this

Three.js 的天空盒

Skybox for Three.js

three.js

skybox