07 UV贴图 - 实现一个地球 - Threejs入门

创建一个球体，加上一个地球的图片，一个地球就做好了~ [ 练一练 ] [ 看一看 ]

示例代码

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'

const $app = document.getElementById('app')

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(
  50,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
)
camera.position.set(0, 0, 60)

const renderer = new THREE.WebGLRenderer({
  antialias: true,
})
renderer.setSize(window.innerWidth, window.innerHeight)
$app.appendChild(renderer.domElement)

// 创建一个纹理加载器对象
const txLoader = new THREE.TextureLoader()
const txImg = txLoader.load('/imgs/Earth.jpg')

// 创建一个网格几何体
const geo = new THREE.SphereGeometry(10)

// 创建一个网格材质
const mtr = new THREE.MeshBasicMaterial({
  map: txImg
})

// 创建一个网格，并添加到场景中
const mesh = new THREE.Mesh(geo, mtr)
scene.add(mesh)

new OrbitControls(camera, renderer.domElement)

function animate() {
  requestAnimationFrame(animate)
  renderer.render(scene, camera)
}
animate()

演示效果