我正在从事一个3D太阳系项目，该项目涉及火箭绕行星旋转。我尝试按照本教程（https://www.youtube.com/watch?v=7fJgVyq0OYo）创建一个供我的行星存在的天空盒。尽管没有显示任何错误，并且我知道正在创建天空盒，但是它离我的行星和火箭都不远，而且我不确定如何使摄像机从场景的中心开始。我的代码如下，
// once everything is loaded, we run our Three.js stuff.
$(function() {
var stats = initStats();
// create a scene, that will hold all our elements such as objects, cameras and lights.
var scene = new THREE.Scene();
// create a camera, which defines where we're looking at.
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
// create a render and set the size
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xEEEEEE, 1.0);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
window.addEventListener('resize', function()
{
var width = window.innerWidth;
var height = window.innerHeight;
renderer.setSize(width, height);
camera.aspect = width / height;
camera.updateProjectionMatrix();
} );
controls = new THREE.OrbitControls(camera, renderer.domElement);
var geometry = new THREE.CubeGeometry(10000,10000,10000);
var cubeMaterials =
[
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("../assets/textures/skybox/ame_nebula/purplenebula_ft.png"), side: THREE.DoubleSide}),
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("../assets/textures/skybox/ame_nebula/purplenebula_bk.png"), side: THREE.DoubleSide}),
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("../assets/textures/skybox/ame_nebula/purplenebula_up.png"), side: THREE.DoubleSide}),
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("../assets/textures/skybox/ame_nebula/purplenebula_dn.png"), side: THREE.DoubleSide}),
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("../assets/textures/skybox/ame_nebula/purplenebula_rt.png"), side: THREE.DoubleSide}),
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("../assets/textures/skybox/ame_nebula/purplenebula_lf.png"), side: THREE.DoubleSide})
];
var cubeMaterial = new THREE.MeshFaceMaterial(cubeMaterials);
var cube = new THREE.Mesh(geometry, cubeMaterial);
scene.add(cube);
// create the object group that contains all the sub-shapes
var rocketGroup = new THREE.Object3D();
scene.add(rocketGroup);
//display grid
//scene.add(new THREE.GridHelper(100,10));
var rocketMaterial = new THREE.MeshLambertMaterial({color: 0xEEEEEE});
var hingeMaterial = new THREE.MeshLambertMaterial({color: 0xFD1414});
/////////////////////////////////////////////////////////////////////////////////////////
var rocketAntennaOne = new THREE.CylinderGeometry( 0, 1, 1, 5);
var rocketAntennaOneMesh = new THREE.Mesh(rocketAntennaOne, hingeMaterial, new THREE.MeshPhongMaterial());
var rocketAntennaTwo = new THREE.CylinderGeometry( 1, 1.5, 0.5, 5 );
var rocketAntennaTwoMesh = new THREE.Mesh(rocketAntennaTwo, hingeMaterial, new THREE.MeshPhongMaterial());
var rocketAntennaThree = new THREE.CylinderGeometry( 1.5, 2, 0.5, 5 );
var rocketAntennaThreeMesh = new THREE.Mesh( rocketAntennaThree,hingeMaterial, new THREE.MeshPhongMaterial());
/////////////////////////////////////////////////////////////////////////////////////////
var rocketBodyOne = new THREE.CylinderGeometry( 2, 4, 3, 5 );
var rocketBodyOneMesh = new THREE.Mesh(rocketBodyOne,rocketMaterial, new THREE.MeshPhongMaterial());
var rocketBodyTwo = new THREE.CylinderGeometry( 4, 5.5, 3, 5 );
var rocketBodyTwoMesh = new THREE.Mesh(rocketBodyTwo,rocketMaterial, new THREE.MeshPhongMaterial());
var rocketBodyThree = new THREE.CylinderGeometry( 5.5, 7, 3, 5 );
var rocketBodyThreeMesh = new THREE.Mesh(rocketBodyThree,rocketMaterial, new THREE.MeshPhongMaterial());
var rocketBodyFour = new THREE.CylinderGeometry( 7, 7.5, 3, 5 );
var rocketBodyFourMesh = new THREE.Mesh(rocketBodyFour,rocketMaterial, new THREE.MeshPhongMaterial());
var rocketBodyFive = new THREE.CylinderGeometry( 7.5, 8, 3.5, 5 );
var rocketBodyFiveMesh = new THREE.Mesh(rocketBodyFive,rocketMaterial, new THREE.MeshPhongMaterial());
var rocketBodySix = new THREE.CylinderGeometry( 8, 8, 5, 5 );
var rocketBodySixMesh = new THREE.Mesh(rocketBodySix,rocketMaterial, new THREE.MeshPhongMaterial());
var rocketBodySeven = new THREE.CylinderGeometry( 8, 7.5, 3.5, 5 );
var rocketBodySevenMesh = new THREE.Mesh(rocketBodySeven,rocketMaterial, new THREE.MeshPhongMaterial());
var rocketBodyEight = new THREE.CylinderGeometry( 7.5, 7, 3.5, 5 );
var rocketBodyEightMesh = new THREE.Mesh(rocketBodyEight,rocketMaterial, new THREE.MeshPhongMaterial());
var rocketBodyNine = new THREE.CylinderGeometry( 7, 6.5, 3, 5 );
var rocketBodyNineMesh = new THREE.Mesh(rocketBodyNine,rocketMaterial, new THREE.MeshPhongMaterial());
var rocketBodyTen = new THREE.CylinderGeometry( 6.5, 6, 3, 5 );
var rocketBodyTenMesh = new THREE.Mesh(rocketBodyTen,rocketMaterial, new THREE.MeshPhongMaterial());
/////////////////////////////////////////////////////////////////////////////////////////
var rocketBodyUpper = new THREE.CylinderGeometry( 3.5, 4, 3.5, 5 );
var rocketBodyUpperMesh = new THREE.Mesh(rocketBodyUpper,rocketMaterial, new THREE.MeshPhongMaterial());
/////////////////////////////////////////////////////////////////////////////////////////
var rocketBodyLower = new THREE.CylinderGeometry( 2.75, 3, 2.5, 5 );
var rocketBodyLowerMesh = new THREE.Mesh(rocketBodyLower,rocketMaterial, new THREE.MeshPhongMaterial());
//var rocketWindow = new THREE.RingGeometry(5,6,30);
//var rocketWindowMesh = new THREE.Mesh(rocketWindow,hingeMaterial, new THREE.MeshPhongMaterial());
///////////////////////////////////////////////////////////////////////////////////////
var x = 0;
var y = 0;
var RocketFinOne = new THREE.Shape();
RocketFinOne.moveTo( x + 0, y + 0 );
RocketFinOne.lineTo( x + 0, y + 16);
RocketFinOne.lineTo( x + 7, y + 20);
RocketFinOne.lineTo( x + 7, y + 15);
RocketFinOne.lineTo( x + 2.5, y + 13);
var extrudeSettings = {amount: 0.01, bevelEnabled:true, bevelSegments:2,steps:2,bevelSize:1,bevelThickness:1};
var geometry = new THREE.ExtrudeGeometry( RocketFinOne,extrudeSettings );
var material = new THREE.MeshLambertMaterial( { color: 0xFD1414 } );
var rocketFinOneMesh = new THREE.Mesh( geometry, material ) ;
var RocketFinTwo = new THREE.Shape();
RocketFinTwo.moveTo( x + 0, y + 0 );
RocketFinTwo.lineTo( x + 0, y + 16);
RocketFinTwo.lineTo( x + 7, y + 20);
RocketFinTwo.lineTo( x + 7, y + 15);
RocketFinTwo.lineTo( x + 2.5, y + 13);
var extrudeSettings = {amount: 0.01, bevelEnabled:true, bevelSegments:2,steps:2,bevelSize:1,bevelThickness:1};
var geometry = new THREE.ExtrudeGeometry( RocketFinTwo,extrudeSettings );
var material = new THREE.MeshLambertMaterial( { color: 0xFD1414 } );
var rocketFinTwoMesh = new THREE.Mesh( geometry, material ) ;
var RocketFinThree = new THREE.Shape();
RocketFinThree.moveTo( x + 0, y + 0 );
RocketFinThree.lineTo( x + 0, y + 16);
RocketFinThree.lineTo( x + 7, y + 20);
RocketFinThree.lineTo( x + 7, y + 15);
RocketFinThree.lineTo( x + 2.5, y + 13);
var extrudeSettings = {amount: 0.01, bevelEnabled:true, bevelSegments:2,steps:2,bevelSize:1,bevelThickness:1};
var geometry = new THREE.ExtrudeGeometry( RocketFinThree,extrudeSettings );
var material = new THREE.MeshLambertMaterial( { color: 0xFD1414 } );
var rocketFinThreeMesh = new THREE.Mesh( geometry, material ) ;
var RocketFinFour = new THREE.Shape();
RocketFinFour.moveTo( x + 0, y + 0 );
RocketFinFour.lineTo( x + 0, y + 16);
RocketFinFour.lineTo( x + 7, y + 20);
RocketFinFour.lineTo( x + 7, y + 15);
RocketFinFour.lineTo( x + 2.5, y + 13);
var extrudeSettings = {amount: 0.01, bevelEnabled:true, bevelSegments:2,steps:2,bevelSize:1,bevelThickness:1};
var geometry = new THREE.ExtrudeGeometry( RocketFinFour,extrudeSettings );
var material = new THREE.MeshLambertMaterial( { color: 0xFD1414 } );
var rocketFinFourMesh = new THREE.Mesh( geometry, material ) ;
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var planetEarth = createPlanetEarthMesh(new THREE.SphereGeometry(100, 400, 400));
var planetMoon = createMoonMesh (new THREE.SphereGeometry (40,100,100));
var planetSun = createSunMesh (new THREE.SphereGeometry (150,100,100));
// add the sphere to the scene
scene.add(planetEarth);
scene.add(planetMoon);
scene.add(planetSun);
//scene.add(EarthMesh);
//////////////////////////////////////
scene.add(rocketAntennaOneMesh);
scene.add(rocketAntennaTwoMesh);
scene.add(rocketAntennaThreeMesh);
/////////////////////////////////////
scene.add(rocketBodyOneMesh);
scene.add(rocketBodyTwoMesh);
scene.add(rocketBodyThreeMesh);
scene.add(rocketBodyFourMesh);
scene.add(rocketBodyFiveMesh);
scene.add(rocketBodySixMesh);
scene.add(rocketBodySevenMesh);
scene.add(rocketBodyEightMesh);
scene.add(rocketBodyNineMesh);
scene.add(rocketBodyTenMesh);
///////////////////////////////////////
scene.add(rocketBodyUpperMesh);
scene.add(rocketBodyUpperMesh);
///////////////////////////////////////
//scene.add(rocketWindowMesh);
//////////////////////////////////////
scene.add( rocketFinOneMesh );
scene.add( rocketFinTwoMesh );
scene.add( rocketFinThreeMesh );
scene.add( rocketFinFourMesh );
rocketGroup.position.y = 100;
planetEarth.position.y=-100;
planetMoon.position.x=-100;
planetSun.position.x=200;
//Specify the position of the rocket cone
rocketAntennaOneMesh.position.y = 52.05;
rocketAntennaTwoMesh.position.y = 51.3;
rocketAntennaThreeMesh.position.y = 50.8;
rocketBodyOneMesh.position.y = 49.1;
rocketBodyTwoMesh.position.y = 46.1;
rocketBodyThreeMesh.position.y = 43.1;
rocketBodyFourMesh.position.y = 40.1;
rocketBodyFiveMesh.position.y = 36.9;
rocketBodySixMesh.position.y = 32.7;
rocketBodySevenMesh.position.y = 28.5;
rocketBodyEightMesh.position.y = 25.2;
rocketBodyNineMesh.position.y = 22;
rocketBodyTenMesh.position.y = 19;
/////////////////////////////////////////////////////////
rocketBodyUpperMesh.position.y = 16;
rocketBodyLowerMesh.position.y = 14;
////////////////////////////////////////////////////////
//rocketWindowMesh.position.y = 100;
//rocketwindowMesh.position.x = -20;
////////////////////////////////////////////////////
rocketFinOneMesh.position.x=-7;
rocketFinOneMesh.position.y=3;
rocketFinOneMesh.rotation.z = 0.1 * Math.PI;
rocketFinTwoMesh.position.x=6 ;
rocketFinTwoMesh.position.y=3;
rocketFinTwoMesh.rotation.z = 0.1 * Math.PI;
rocketFinTwoMesh.rotation.y = 1 * Math.PI;
rocketFinThreeMesh.position.x=0;
rocketFinThreeMesh.position.y=3;
rocketFinThreeMesh.position.z = 7;
rocketFinThreeMesh.rotation.z = 0.1 * Math.PI;
rocketFinThreeMesh.rotation.y = 0.5 * Math.PI;
rocketFinFourMesh.position.x=0;
rocketFinFourMesh.position.y=3;
rocketFinFourMesh.position.z = -6;
rocketFinFourMesh.rotation.z = 0.1 * Math.PI;
rocketFinFourMesh.rotation.y = 1.5 * Math.PI;
//Add the rocketCone to the lowpolyRocket group
rocketGroup.add(rocketAntennaOneMesh);
rocketGroup.add(rocketAntennaTwoMesh);
rocketGroup.add(rocketAntennaThreeMesh);
/////////////////////////////////////////
rocketGroup.add(rocketBodyOneMesh);
rocketGroup.add(rocketBodyTwoMesh);
rocketGroup.add(rocketBodyThreeMesh);
rocketGroup.add(rocketBodyFourMesh);
rocketGroup.add(rocketBodyFiveMesh);
rocketGroup.add(rocketBodySixMesh);
rocketGroup.add(rocketBodySevenMesh);
rocketGroup.add(rocketBodyEightMesh);
rocketGroup.add(rocketBodyNineMesh);
rocketGroup.add(rocketBodyTenMesh);
//////////////////////////////////////////
rocketGroup.add(rocketBodyUpperMesh);
rocketGroup.add(rocketBodyLowerMesh);
/////////////////////////////////////////
rocketGroup.add(rocketFinOneMesh);
rocketGroup.add(rocketFinTwoMesh);
rocketGroup.add(rocketFinThreeMesh);
rocketGroup.add(rocketFinFourMesh);
//position and point the camera to the center of the scene
camera.position.x = -400;
camera.position.y = 0;
camera.position.z = 3;
camera.lookAt(scene.position);
// add subtle ambient lighting
var ambientLight = new THREE.AmbientLight(0x0c0c0c);
scene.add(ambientLight);
// add spotlight for the shadows
var spotLight = new THREE.PointLight(0xffffff);
spotLight.position.set(-200, 50, 150);
spotLight.castShadow = true;
scene.add(spotLight);
// add the output of the renderer to the html element
$("#WebGL-output").append(renderer.domElement);
var controls = new function() {
this.EarthMoonRotationSpeed = 1.0;
this.EarthMoonRotationSpeed = 1.0;
};
var gui = new dat.GUI();
gui.add(controls, 'EarthMoonRotationSpeed', 0, 5);
// call the render function
var angle = 0;
render();
function render() {
stats.update();
angle += 0.002 * controls.EarthMoonRotationSpeed;
planetEarth.rotation.y = angle;
angle += 0.002 * controls.EarthMoonRotationSpeed;
planetMoon.rotation.y = angle;
// render using requestAnimationFrame
requestAnimationFrame(render);
renderer.render(scene, camera);
}
function createPlanetEarthMesh(geom) {
var loader = new THREE.TextureLoader();
var planetEarthTexture = loader.load("../assets/textures/planets/Earth.png");
var normalEarthTexture = loader.load("../assets/textures/planets/EarthNormal.png");
var planetEarthMaterial = new THREE.MeshPhongMaterial({map: planetEarthTexture, bumpMap: normalEarthTexture});
// create a multimaterial
var planetEarthMesh = THREE.SceneUtils.createMultiMaterialObject(geom, [planetEarthMaterial]);
return planetEarthMesh;
}
function createMoonMesh(geom) {
var loader = new THREE.TextureLoader();
var planetMoonTexture = loader.load("../assets/textures/planets/moon.jpg");
var normalMoonTexture = loader.load("../assets/textures/planets/moonbump.jpg");
var planetMoonMaterial = new THREE.MeshPhongMaterial({map: planetMoonTexture, bumpMap: normalMoonTexture});
// create a multimaterial
var planetMoonMesh = THREE.SceneUtils.createMultiMaterialObject(geom, [planetMoonMaterial]);
return planetMoonMesh;
}
function createSunMesh(geom) {
var loader = new THREE.TextureLoader();
var planetSunTexture = loader.load("../assets/textures/planets/sun.jpg");
//var normalSunTexture = loader.load("../assets/textures/planets/moonbump.jpg");
var planetSunMaterial = new THREE.MeshPhongMaterial({map: planetSunTexture});
//bumpMap: normalMoonTexture
// create a multimaterial
var planetSunMesh = THREE.SceneUtils.createMultiMaterialObject(geom, [planetSunMaterial]);
return planetSunMesh;
}
function initStats() {
var stats = new Stats();
stats.setMode(0); // 0: fps, 1: ms
// Align top-left
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
$("#Stats-output").append(stats.domElement);
return stats;
}
});body {
margin: 0;
}<script type="text/javascript" src="https://threejs.org/build/three.js"></script>
<script type="text/javascript" src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script type="text/javascript" src="https://threejs.org/examples/js/libs/stats.min.js"></script>
<script type="text/javascript" src="https://threejs.org/examples/js/libs/dat.gui.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://threejs.org/examples/js/utils/SceneUtils.js"></script>
由于“ SceneUtils.js”似乎不起作用，因此该片段不会显示。我假设（不确定如何检查版本）该项目是使用Three.js的旧版本完成的，因为我必须使用默认项目创建该项目。 （这是分配的一部分，我们被要求使用该版本的three.js）。当我在计算机上运行该项目时，由于具有该版本，因此它可以正常工作。
无论如何，我是否可以正确链接脚本，以便您都可以查看我的项目和帮助？
---------------------编辑------------------------- ----------
好的，所以我意识到错误可能与我的渲染有关？似乎我正在制作的Skybox太大，但是当我将其缩小时，它会显示。尽管如果我看某些角度，则立方体的一部分消失了，好像没有渲染一样。
如您从此屏幕截图https://imgur.com/a/iYorLxP
所见答案 0 :(得分：1)
您需要将问题范围缩小到每个问题一个问题。如果您想弄清楚如何构建一个可运行的天窗，则没有理由让所有这些代码（包括您的火箭零件，行星和位置）成为您的问题的一部分。它创建了一堵巨大的代码墙，没人愿意在业余时间阅读这些代码。
话虽如此，那是一个非常糟糕的教程，要求您做很多不必要的工作。 Three.js已经带有内置的，更简单的创建天空盒的方式：CubeTextureLoader：
var r = "https://threejs.org/examples/textures/cube/Park3Med/";
var urls = [
r + "px.jpg",
r + "nx.jpg",
r + "py.jpg",
r + "ny.jpg",
r + "pz.jpg",
r + "nz.jpg"
];
var textureCube = new THREE.CubeTextureLoader().load( urls );
scene.background = textureCube;
上面的代码直接来自this example
使用这种方法，您完全不必担心相机的位置；无论相机沿任何方向移动多远，它都始终位于立方体的中心。
然后请，学习如何用minimal, complete and verifiable example提问，这样人们就可以更轻松地一次帮助您解决一个问题。
答案 1 :(得分：0)
从您的编辑看来，问题出在您的camera frustum设置上。这指定了对象可以距相机多远并且仍可以渲染。天空盒的某些部分不在远景平面内，因此被切除，导致出现白色背景。要解决此问题，请在创建相机时将平截头体的高度增加到1000以上：
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 3000);