我正在尝试制作Skybox，但我必须缺少一些基本知识

Question

I am trying to make a skybox, and every tutorial I have tried will not work. I thought I could make an array and pass it as a param for the material like I saw in an earlier example, but the method has apparently changed to TextureLoader() since then. Below is my code:

// Adds a skybox around the content
    var skyBoxMaterials = [
    new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( 'images/skybox/sky1.jpg') }),
    new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( 'images/skybox/sky2.jpg') }),
    new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( 'images/skybox/sky3.jpg') }),
    new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( 'images/skybox/sky4.jpg') }),
    new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( 'images/skybox/sky5.jpg') }),
    new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( 'images/skybox/sky6.jpg') }),
  ];
  var skyBoxGeom = new THREE.CubeGeometry( 10000, 10000, 10000, 1, 1, 1);
    skyBox = new THREE.Mesh( skyBoxGeom, skyBoxMaterials );
    skyBox.position.set(0, 25.1, 0);
    scene.add( skyBox );

When I run it currently, I get the error "Uncaught TypeError: Cannot read property 'x' of undefined" in the console infinitely looping until the server is killed. I could not find the exact answer in the examples, docs, or in another question, here. Any suggestions?

UPDATE: After some more digging, I finally found the example I needed in the docs under cubeGeometry, but it still does not render. My code is below:

// Adds a skybox around the content
  var loader = new THREE.CubeTextureLoader();
  loader.setPath( 'images/skybox/' );

  var textureCube = loader.load( [
       'sky1.jpg', 'sky2.jpg',
        'sky3.jpg', 'sky4.jpg',
         'sky5.jpg', 'sky6.jpg'
     ] );

  var skyMaterials = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: 
  textureCube } );
  var skyBoxGeom = new THREE.CubeGeometry( 10000, 10000, 10000, 1, 1, 1);
  skyBox = new THREE.Mesh( skyBoxGeom, skyMaterials );
  skyBox.position.set(0, 25.1, 0);
  scene.add( skyBox );

I do not have any error messages in the console, but the cube is not rendering at all. The other objects in the scene render normally.

Answer 1

Have you downloaded the Three.js Master file ? It has all the examples in working order. So all the examples you see on the Examples Page are there along with support files, textures assets etc. This way, you can start your project with a working example and build from there. You will need to run them from your local server (from your post, I gather you already know this). There are a few examples that may help you like Panorama Cube . In the examples directory of the download, you will find a file called ' webgl_panorama_cube.html ' that will be your local copy of this example.

Answer 2

You can use .background property of THREE.Scene() straight, as it accepts cube textures.

 var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 ); camera.position.set( 0, 0, 300 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); var controls = new THREE.OrbitControls( camera, renderer.domElement ); var loader = new THREE.CubeTextureLoader(); loader.setCrossOrigin( "" ); loader.setPath( 'https://threejs.org/examples/textures/cube/skybox/' ); var cubeTexture = loader.load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] ); scene.background = cubeTexture; render(); function render() { requestAnimationFrame(render); renderer.render( scene, camera ); } 

 body { overflow: hidden; margin: 0; } 

 <script src="https://threejs.org/build/three.min.js"></script> <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>