Three.JS 天空盒不会出现。我在尺寸方面做错了吗答案

【问题标题】：Three.JS skybox wont show up. Did I do something wrong with the dimensionsThree.JS 天空盒不会出现。我在尺寸方面做错了吗
【发布时间】：2019-04-30 20:06:30
【问题描述】：

我在我的项目中使用了一个小的 three.js 场景我创建了一个天空盒，但它不会显示出来。

但我做了一个小盒子，那个盒子很好用。也许我给相机设置错误，所以它看不到天空盒。

这是我的完整代码：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 20000);
camera.position.set(0, 0, 0);
camera.lookAt(scene.position);
var div = document.getElementById("background");
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
div.appendChild( renderer.domElement );
camera.position.z = 5;

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

var skyboxMaterials =
[
    new THREE.MeshBasicMaterial( 
        {map: new THREE.TextureLoader().load("skybox/ft.png"),side: THREE.DoubleSide}
        ),
    new THREE.MeshBasicMaterial( 
        {map: new THREE.TextureLoader().load("skybox/bk.png"),side: THREE.DoubleSide}
        ),
    new THREE.MeshBasicMaterial( 
        {map: new THREE.TextureLoader().load("skybox/up.png"),side: THREE.DoubleSide}
        ),
    new THREE.MeshBasicMaterial( 
        {map: new THREE.TextureLoader().load("skybox/dn.png"),side: THREE.DoubleSide}
        ),
    new THREE.MeshBasicMaterial( 
        {map: new THREE.TextureLoader().load("skybox/rt.png"),side: THREE.DoubleSide}
        ),
    new THREE.MeshBasicMaterial( 
        {map: new THREE.TextureLoader().load("skybox/lf.png"),side: THREE.DoubleSide}
        )
];

var skyboxGeom = new THREE.CubeGeometry( 5000, 5000, 5000, 1, 1, 1 );
var skybox = new THREE.Mesh( skyboxGeom, skyboxMaterials );
scene.add( skybox );

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

var animate = function () {
    requestAnimationFrame( animate );

    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render( scene, camera );
};

animate();

现在立方体出现在镜头前并旋转但我看不到天空盒。我尝试更改天空盒和相机的值，但没有任何效果，所以我现在问你。

【问题讨论】：

标签： javascript html three.js 3d skybox

【解决方案1】：

如果相机朝外，它可能看不到天空盒。尝试将side:THREE.BackSide 设置为您的天空盒材质数组。

理想情况下，为了让它表现得像一个真正的天空盒，你可能想要做这样的事情：

//provided this is the scene graph (same parent, otherwise you have to transform camera position)
scene.add(camera)
scene.add(skybox)

function animate(){

   skyBox.position.copy(camera.position)
   renderer.render()
}

这应该消除所有视差。我不确定是否最好在场景之前或之后绘制天空盒，但无论哪种方式，您都可以执行以下操作：

skyBox.renderOrder = -1 || 1 //before or after

【讨论】：