three.js旋转，材质，灯光使用 —— 太阳地球月亮运动

import * as THREE from 'three'
//引入控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

const { log } = console

//创建场景
const scene = new THREE.Scene();
scene.background = new THREE.Color("#000")
//scene.environment = new THREE.Color("#ddd")

//创建相机添加至场景
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 10, 1)

//创建渲染器
const renderer = new THREE.WebGLRenderer({
  antialias: true // 搞锯齿
})
renderer.setSize(window.innerWidth, window.innerHeight)

//添加辅助线
const axes = new THREE.AxesHelper(5)
//scene.add(axes)
axes.position.set(0, 0, 0)

//创建星球
const createBall = (sizeArray) => {
  const spereGeometry = new THREE.SphereGeometry(...sizeArray)
  const spereMaterial = new THREE.MeshLambertMaterial()
  return new THREE.Mesh(spereGeometry, spereMaterial)
}

//创建地球组级太阳组
const earchGroup = new THREE.Group()
const sunGroup = new THREE.Group()

const earch = createBall([1, 20, 20])
earch.material.map = new THREE.TextureLoader().load('./earch.jpg')
earchGroup.add(earch)

const moon = createBall([.3, 20, 20])
moon.material.map = new THREE.TextureLoader().load('./moon.png')
earchGroup.add(moon)
moon.position.set(0, 0, 2)
earchGroup.add(moon)
earchGroup.position.x = 6

//scene.add(earchGroup)
const spereGeometry = new THREE.SphereGeometry(2, 30, 30)
const spereMaterial = new THREE.MeshBasicMaterial()

const sun = new THREE.Mesh(spereGeometry, spereMaterial)
sun.material.map = new THREE.TextureLoader().load('./sun.jpg')
sunGroup.add(sun)
sunGroup.add(earchGroup)
scene.add(sunGroup)

//添加环境 光
// const alight = new THREE.AmbientLight("#FFF", .7)
// scene.add(alight)



//添加点光源
const light = new THREE.PointLight({
  color: "0xff0000",
  intensity: 100
});
light.position.set(0, 0, 0);
scene.add(light);
//添加控制器，并设置阻尼
const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true

document.body.appendChild(renderer.domElement)

const clock = new THREE.Clock()
const render = () => {
  const time = clock.getElapsedTime()
  earchGroup.rotation.y = time
  earch.rotation.y = time
  moon.rotation.y = time
  sunGroup.rotation.y = time
  controls.update()
  renderer.render(scene, camera)
  requestAnimationFrame(render)
}
render()