Положение камеры не внутри Skybox three.js
Я работаю над трехмерным проектом солнечной системы, который включает в себя вращение ракеты вокруг планеты. Я попытался, следуя этому руководству (https://thewikihow.com/video_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). Когда я запускаю проект на своем компьютере, он работает, поскольку у меня есть эта версия.
Могу ли я в любом случае правильно связать сценарий, чтобы вы все могли просмотреть мой проект и помочь?
---------------------РЕДАКТИРОВАТЬ---------------------------- -------
Итак, я понял, что ошибка может быть связана с моим рендерингом? кажется, что скайбокс, который я делал, был слишком большим, но когда я сделал его намного меньше, он стал виден. Хотя, если бы я посмотрел под определенными углами, часть куба с исчезновением, как будто он не рендерится.
Как видно из этого скриншота https://imgur.com/a/iYorLxP
@Marquizzo, мой главный вопрос был о скайбоксе, я пытался заставить jsfiddle работать, чтобы вы, ребята, могли лучше понять мою ошибку
@Marquizzo Я сделал скайбокс, но моя камера на самом деле не запускается внутри него, и он не работает так, как должен.
Вам может пригодиться эта статья
@gman Я не слишком уверен, как применить это к моему? Я сделал часть css, но вторая часть webglrenderer меня смущает, так как у меня уже есть webglrenderer
@Marquizzo Я тоже добавил обновление в пост
Я не уверен, что вы подразумеваете под «вторым WebGLRenderer». В статье, на которую я ссылаюсь, нет второго WebGLRenderer. Вместо этого есть скайбокс на основе шейдера, который использует кубическую карту, которая решает ваши проблемы.
@gman Я имел в виду, что у меня уже есть свойство WebGLRenderer, и ссылка, которую вы сказали, тоже говорит о том, чтобы сделать ее, я не был слишком уверен, как объединить эти фрагменты кода вместе, если это имеет смысл
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вам нужно сузить количество вопросов до один вопрос на вопрос. Если вы хотите выяснить, как построить работающий скайбокс, нет причин, чтобы весь этот код, включая части вашей ракеты, планеты и позиции, был частью вашего вопроса. Это создает огромную стену кода, которую никто не хочет читать в свободное время.
Тем не менее, это довольно плохой учебник, который просит вас сделать много ненужной работы. В Three.js уже есть встроенный и более простой способ создания скайбокса: КубТекстураЗагрузчик:
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;
Приведенный выше код был взят непосредственно из этот пример.
С этим методом вам вообще не нужно беспокоиться о положении вашей камеры; он всегда будет в центре куба, независимо от того, как далеко ваша камера перемещается в любом направлении.
И пожалуйста, научитесь задавать вопрос с помощью минимальный, полный и проверяемый пример, чтобы людям было легче помогать вам и решать одну проблему за раз.
Какая именно ссылка в переменной r? У меня есть страница 404, поэтому я не знаю, как связать ее со своей, но остальное выглядит очень прямолинейно.
ааа, я предполагал, что это будет начальная часть URL-адреса изображений, поэтому я сделал свой следующим образом: «var r = «../assets/textures/skybox/ame_nebula/»;» а потом сделал "r + "purplenebula_ft.png"" и т.д. Но скайбокс не создается.
Ссылка в переменной — это папка, в которой хранятся изображения, поэтому, когда вы добавите px.png в конец URL-адреса, это займет у вас прямо к изображению. Вы проверили свои инструменты разработчика на вкладке консоли или сети? Если нет, выполните быстрый поиск того, как открыть консоль в вашем браузере, чтобы увидеть, загружаются ли вообще туманности .png. Я думаю, что ваш путь, вероятно, указывает на неправильную папку.
они загружаются, просто не создается скайбокс. В любом случае, я решил этот вопрос с ответом Ника, так что все хорошо, спасибо
Судя по вашему редактированию, проблема заключается в ваших настройках усеченная камера. Это определяет, как далеко объекты могут быть удалены от камеры и все еще визуализируются. Некоторые части вашего неба не находятся в дальней плоскости просмотра, поэтому они обрезаются, в результате чего появляется белый фон вашей сцены. Чтобы исправить это, увеличьте дальнюю усеченную пирамиду выше 1000 при создании камеры:
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 3000);
Это абсолютно идеально! :D Теперь я могу свободно перемещаться по своей сцене внутри куба, и он никогда не прерывается. Большое спасибо за это предложение, теперь Skybox отлично работает.
Вы задаете слишком много вопросов одновременно. Вам нужна помощь со скайбоксом, положением камеры и импортом SceneUtils... StackOverflow был создан, чтобы ответить на один вопрос на каждый вопрос. Преподаватель класса научил вас пользоваться консолью браузера? Если вы откроете консоль в JSFiddle, вы увидите явную ошибку:
THREE.SceneUtils has been moved to /examples/js/utils/SceneUtils.js. Просто добавьте эту строку<script type = "text/javascript" src = "https://threejs.org/examples/js/utils/SceneUtils.js"></script>, и ваши SceneUtils будут доступны в JSFiddle.