threejs创建地球和太阳实例

之前我们通过threejs创建了一个地球，距离threejs创建太阳系近了一步，今天我们在之前的基础上增加一个太阳。

上一节我们已经创建了一个地球，那么这一节我们只需要再增加一个太阳就可以了。我们对上一节的代码进行一下封装，我们将创建网格模型的方法进行封装，3个参数单独分离出来，分别是纹理图球体半径以及位置这三项。

创建星球

import * as THREE from "three";
import {link} from "@/config/config.js";

function addGeoMetry(textureImg, radius, x) {
    var texLoader = new THREE.TextureLoader();
    // 创建地球
    var texture = texLoader.load(link + textureImg)
    var material = new THREE.MeshBasicMaterial({
        map: texture,
    }); //材质对象Material
    var geometry = new THREE.SphereGeometry(radius, 25, 25);
    var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
    mesh.position.x = x
    return mesh
}

export default addGeoMetry

整理参数

我们需要创建地球和太阳两个球体，所以我们要将地球和太阳的纹理图半径和位置整理出来。

list: [{
    texture: 'img/diqiu.jpg',
    radius: 10,
    x: 150
  }, {
    texture: 'img/taiyang.jpg',
    radius: 30,
    x: 0
  }],

创建

通过我们整理的参数，我们循环创建出我们需要的星球，并添加到场景中，这样星球我们就创建出来了。

this.list.forEach((type, index) => {
  var mesh = addGeoMetry(type.texture, type.radius, type.x)
  scene.add(mesh); //网格模型添加到场景中
});

渲染函数处理让星球转起来

星球我们创建了，我们还需要让星球转起来，通过渲染函数，我们循环遍历场景下的网格模型，然后使用rotateY让模型转起来。

function render() {
  scene.children.forEach((type) => {
    if (type.type == 'Mesh') {
      type.rotateY(0.01)
    }
  });
  renderer.render(scene, camera); //执行渲染操作
  requestAnimationFrame(render); //请求再次执行渲染函数render，渲染下一帧
}

render();

窗口适配

当窗口变化时，我们需要调整画布，让其跟随窗口变化。

onWindowResize() {
      // Update camera
      const width = this.$refs.home.clientWidth;
      const height = this.$refs.home.clientHeight;
      camera.aspect = width / height;
      camera.updateProjectionMatrix();

      // Update renderer
      renderer.setSize(width, height);
    },

演示地址

threejs创建地球和太阳实例

threejs太阳系实现系列

Three.js太阳系案例，有了太阳和地球，接下来我们开始让地球围绕太阳公转