Question

我在项目中使用了一个小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();

现在，该立方体显示在镜头前并旋转但是我看不到天空盒。我曾尝试更改Skybox和相机上的值，但没有任何效果，所以现在问您。

Answer 1

如果摄像机朝外，则可能看不到您的天空盒。尝试将side:THREE.BackSide设置为您的一系列Skybox材料。

理想情况下，为使其表现得像真实的天空盒，您可能需要执行以下操作：

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

Three.JS skybox不会出现。我在尺寸上做错了吗

1 个答案: