私は、スカイボックスを作成しようとしているが、私はスカイボックスを作成しようとしている、と私は試してみました、すべてのチュートリアルでは動作しません基本的な

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

私は現在、それを実行すると、私はエラーを取得「キャッチされない例外TypeErrorを：プロパティ 『x』は未定義のを読み取ることができません」サーバーが殺されるまで、コンソールが無限ループに。私は例、文書、または別の質問で正確な答えを見つけることができませんでした。助言がありますか？

UPDATE：いくつかのより多くの掘削後、私は最終的に私は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に表示されているすべての例は、サポートファイル、テクスチャアセットなどとともにそこにあります。このようにして、実際のサンプルを使ってプロジェクトを開始し、そこからビルドすることができます。あなたのローカルサーバーからそれらを実行する必要があります（あなたのポストから、私はあなたがすでにこれを知っている収集）。 Panorama Cubeのようないくつかの例があります。ダウンロードのexamplesディレクトリでは、この例のローカルコピーになります「webgl_panorama_cube.html」と呼ばれるファイルがあります。

Answer 2

それは、キューブテクスチャを受け入れるようあなたは、THREE.Scene()ストレートの.backgroundプロパティを使用することができます。答えを

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>