Question

我正在尝试创建一个天空盒，我尝试过的每个教程都无法正常工作。我以为我可以创建一个数组并将其作为材质的参数传递，就像我在前面的例子中看到的那样，但是从那时起该方法显然已经改为TextureLoader（）。以下是我的代码：

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

当我今天运行时，我收到错误＆＃34;未捕获的TypeError：无法读取属性＆＃39; x＆＃39;未定义＆＃34;在控制台无限循环，直到服务器被杀死。我在这里的例子，文档或其他问题中找不到确切的答案。有什么建议吗？

更新：经过一些挖掘，我终于找到了我在cubeGeometry下的文档中需要的示例，但它仍然没有渲染。我的代码如下：

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

我在控制台中没有任何错误消息，但多维数据集根本没有呈现。场景中的其他对象正常渲染。

Answer 1

您下载了Three.js Master file吗？它具有正常运行的所有示例。因此，您在Examples Page上看到的所有示例都包含支持文件，纹理资源等。这样，您可以使用工作示例启动项目并从那里构建。您需要从本地服务器运行它们（从您的帖子中，我知道您已经知道了）。有一些例子可以帮助您（{3}}。在下载的示例目录中，您将找到名为＆＃39; webgl_panorama_cube.html ＆＃39;的文件。这将是本例的本地副本。

Answer 2

您可以直接使用.background THREE.Scene()属性，因为它接受立方体纹理。

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>

我试图制作一个天空盒，但我必须遗漏一些基本的东西

2 个答案: