javascript - 地球和太阳模型未渲染

Question

我已经多次尝试调试此问题，但找不到解决方案。所以基本上，我的地球模型和太阳模型没有正确渲染。它们显示为暗淡的填充颜色。尽管已将纹理添加到球体，但纹理并未加载到其上。

我建议查看第 104 - 141 行，因为这是我创建太阳和地球模型的地方。

此外，我希望获得一些关于我的 Animate 功能的帮助。

当前代码:

// Standard Variables / To be changed later.
var scene, camera, renderer //, container;
var W, H;
var delta = Math.delta;

W = parseInt(window.innerWidth);
H = parseInt(window.innerHeight);


camera = new THREE.PerspectiveCamera(45, W / H, 1, 1000000);
camera.position.z = 36300;
scene = new THREE.Scene();

// renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize(W, H);
document.body.appendChild(renderer.domElement);

// Adding Stars.
var starsGeometry = new THREE.Geometry();
var starsMaterial = new THREE.ParticleBasicMaterial({
  color: 0xbbbbbbb,
  opacity: 0.6,
  size: 1,
  sizeAttenuation: false
});
var stars;

// Adding stars to the Scene.
for (var i = 0; i < 45000; i++) {
  var vertex = new THREE.Vector3();
  vertex.x = Math.random() * 2 - 1;
  vertex.y = Math.random() * 2 - 1;
  vertex.z = Math.random() * 2 - 1;
  vertex.multiplyScalar(7000);
  starsGeometry.vertices.push(vertex);
}

stars = new THREE.ParticleSystem(starsGeometry, starsMaterial);
stars.scale.set(50, 50, 50);
scene.add(stars);


// ------------------------------------------------------------
var starsGeometry2 = new THREE.Geometry();
var starsMaterial2 = new THREE.ParticleBasicMaterial({
  color: 0xbbbbbbb,
  opacity: 1,
  size: 1,
  sizeAttenuation: false
});
var stars2;

// Adding stars to the Scene.
for (var i = 0; i < 10000; i++) {
  var vertex = new THREE.Vector3();
  vertex.x = Math.random() * 2 - 1;
  vertex.y = Math.random() * 2 - 1;
  vertex.z = Math.random() * 2 - 1;
  vertex.multiplyScalar(7000);
  starsGeometry2.vertices.push(vertex);
}

stars2 = new THREE.ParticleSystem(starsGeometry2, starsMaterial2);
stars2.scale.set(70, 150, 100);
scene.add(stars2);

// Ambient light to the Scene.
var ambient = new THREE.AmbientLight(0x222222);
scene.add(ambient);




// ------------------------------------------------------------

//Sun
var sun, gun_geom, sun_mat;
sun_geom = new THREE.SphereGeometry(2300, 80, 80);
//texture.anisotropy = 8;
sun_mat = new THREE.MeshPhongMaterial();
sun = new THREE.Mesh(sun_geom, sun_mat);
sun_mat = THREE.ImageUtils.loadTexture('images/sunmap.jpg');
//sun_mat.bumpMap  = THREE.ImageUtils.loadTexture('images/sunmap.jpg');     
//sun_mat.bumpScale = 0.05;
//var texture = THREE.ImageUtils.loadTexture('images/sunmap.jpg');
scene.add(sun);


var geometry = new THREE.SphereGeometry(2300, 80, 80);
var texture2 = THREE.ImageUtils.loadTexture('images/earthmap1k.jpg');

var material = new THREE.MeshPhongMaterial({
  map: texture2,
  emissive: 0xffffff
});
var earth = new THREE.Mesh(geometry, material);


//earth_mat = new THREE.MeshNormalMaterial();
//earth = new THREE.Mesh(earth_geom, earth_mat);

scene.add(earth);

var t = 0;

document.addEventListener('mousemove', function(event) {
  y = parseInt(event.offsetY);

});

// Call Animate function within load function.

animate();

function animate() {
  requestAnimationFrame(animate);

  sun.rotation.y += 0.001;
  earth.rotation.y += 1 / 16 * delta;

  //camera.position.y = y * 5;
  camera.lookAt(scene.position);


  t += Math.PI / 180 * 2;

  renderer.render(scene, camera);
}

// everything now within `onload`

body {
  background: whitesmoke;
  margin: 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/109/three.min.js"></script>

我的意思是:

Answer 1

当我运行你的代码时，我收到所有这些错误

THREE.ParticleBasicMaterial has been renamed to THREE.PointsMaterial.
THREE.ParticleSystem has been renamed to THREE.Points.
THREE.ParticleBasicMaterial has been renamed to THREE.PointsMaterial.
THREE.ParticleSystem has been renamed to THREE.Points.
THREE.ImageUtils.loadTexture has been deprecated. Use THREE.TextureLoader() instead.
THREE.ImageUtils.loadTexture has been deprecated. Use THREE.TextureLoader() instead.

您应该修复这些错误

否则不确定这段代码应该做什么

sun_mat = new THREE.MeshPhongMaterial();
sun = new THREE.Mesh(sun_geom, sun_mat);
sun_mat = THREE.ImageUtils.loadTexture('images/sunmap.jpg');

它制作 Material ，将其传递给 THREE.Mesh，然后尝试制作未使用的纹理，并将 sun_mat 重新分配给该纹理，但 sun_mat 不被其他任何东西使用。

我把代码改成了这个

const loader = new THREE.TextureLoader();

//Sun
var sun, gun_geom, sun_mat;
sun_geom = new THREE.SphereGeometry(2300, 80, 80);
sun_mat = new THREE.MeshPhongMaterial({
  emissive: 0xffffff,
  emissiveMap: loader.load('https://threejs.org/examples/textures/waterdudv.jpg'),
});
sun = new THREE.Mesh(sun_geom, sun_mat);
scene.add(sun);


var geometry = new THREE.SphereGeometry(2300, 80, 80);
var texture2 = loader.load('https://threejs.org/examples/textures/planets/earth_atmos_2048.jpg');

var material = new THREE.MeshPhongMaterial({
  emissiveMap: texture2,
  emissive: 0xffffff,
});
var earth = new THREE.Mesh(geometry, material);

scene.add(earth);

您还会注意到上面我从使用 map 更改为 emissiveMap。如果您想让 map 正常工作，您需要添加除 AmbientLight 之外的一些灯光。

然后代码使地球和太阳具有相同的大小并堆叠在彼此之上。我移动了地球

earth.position.set(5000, 0, 0);

然后在渲染循环中有这段代码

earth.rotation.y += 1 / 16 * delta;

但 delta 定义为

var delta = Math.delta;

不存在 Math.detla 这样的东西，因此 delta 未定义，这意味着 earth.rotation.y += 1/16 * delta; code> 变成了 NaN 这意味着地球的数学破裂了，所以它消失了。

我刚刚设置了delta = 1。

您可能会发现 this articles对您的 Three.js 学习很有帮助，因为它们是最新的版本 109(它们没有使用您发布的代码引用的过时的类)

// Standard Variables / To be changed later.
var scene, camera, renderer //, container;
var W, H;
var delta = 1.;//Math.delta;

W = parseInt(window.innerWidth);
H = parseInt(window.innerHeight);


camera = new THREE.PerspectiveCamera(45, W / H, 1, 1000000);
camera.position.z = 36300;
scene = new THREE.Scene();

// renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize(W, H);
document.body.appendChild(renderer.domElement);

// Adding Stars.
var starsGeometry = new THREE.Geometry();
var starsMaterial = new THREE.PointsMaterial({
  color: 0xbbbbbbb,
  opacity: 0.6,
  size: 1,
  sizeAttenuation: false
});
var stars;

// Adding stars to the Scene.
for (var i = 0; i < 45000; i++) {
  var vertex = new THREE.Vector3();
  vertex.x = Math.random() * 2 - 1;
  vertex.y = Math.random() * 2 - 1;
  vertex.z = Math.random() * 2 - 1;
  vertex.multiplyScalar(7000);
  starsGeometry.vertices.push(vertex);
}

stars = new THREE.Points(starsGeometry, starsMaterial);
stars.scale.set(50, 50, 50);
scene.add(stars);


// ------------------------------------------------------------
var starsGeometry2 = new THREE.Geometry();
var starsMaterial2 = new THREE.PointsMaterial({
  color: 0xbbbbbbb,
  opacity: 1,
  size: 1,
  sizeAttenuation: false
});
var stars2;

// Adding stars to the Scene.
for (var i = 0; i < 10000; i++) {
  var vertex = new THREE.Vector3();
  vertex.x = Math.random() * 2 - 1;
  vertex.y = Math.random() * 2 - 1;
  vertex.z = Math.random() * 2 - 1;
  vertex.multiplyScalar(7000);
  starsGeometry2.vertices.push(vertex);
}

stars2 = new THREE.Points(starsGeometry2, starsMaterial2);
stars2.scale.set(70, 150, 100);
scene.add(stars2);

// Ambient light to the Scene.
var ambient = new THREE.AmbientLight(0x222222);
scene.add(ambient);




// ------------------------------------------------------------
const loader = new THREE.TextureLoader();


//Sun
var sun, gun_geom, sun_mat;
sun_geom = new THREE.SphereGeometry(2300, 80, 80);
sun_mat = new THREE.MeshPhongMaterial({
  emissive: 0xffffff,
  emissiveMap: loader.load('https://i.imgur.com/gl8zBLI.jpg'),
});
sun = new THREE.Mesh(sun_geom, sun_mat);
scene.add(sun);


var geometry = new THREE.SphereGeometry(2300, 80, 80);
var texture2 = loader.load('https://i.imgur.com/BpldqPj.jpg');

var material = new THREE.MeshPhongMaterial({
  emissiveMap: texture2,
  emissive: 0xffffff,
});
var earth = new THREE.Mesh(geometry, material);
earth.position.set(5000, 0, 0);

scene.add(earth);

var t = 0;

document.addEventListener('mousemove', function(event) {
  y = parseInt(event.offsetY);

});

// Call Animate function within load function.

animate();

function animate() {
  requestAnimationFrame(animate);

  sun.rotation.y += 0.001;
  earth.rotation.y += 1 / 16 * delta;

  //camera.position.y = y * 5;
  camera.lookAt(scene.position);


  t += Math.PI / 180 * 2;

  renderer.render(scene, camera);
}

// everything now within `onload`

body {
  background: whitesmoke;
  margin: 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/109/three.min.js"></script>