目錄
項目搭建
初始化three.js基礎(chǔ)代碼
創(chuàng)建月球模型
添加地球模型
添加模型標(biāo)簽
今天簡單實現(xiàn)一個three.js的小Demo，加強(qiáng)自己對three知識的掌握與學(xué)習(xí)，只有在項目中才能靈活將所學(xué)知識運(yùn)用起來，話不多說直接開始。
項目搭建
本案例還是借助框架書寫three項目，借用vite構(gòu)建工具搭建vue項目，vite這個構(gòu)建工具如果有不了解的朋友，可以參考我之前對其講解的文章：vite腳手架的搭建與使用 。搭建完成之后，用編輯器打開該項目，在終端執(zhí)行 npm i 安裝一下依賴，安裝完成之后終端在安裝 npm i three 即可。
<template>
<!-- 地月模型 -->
<EarthMoonSurrounding></EarthMoonSurrounding>
</template>
<script setup>
import EarthMoonSurrounding from './components/EarthMoonSurrounding.vue';
</script>
<style lang="less">
*{
margin: 0;
padding: 0;
}
</style>初始化three.js基礎(chǔ)代碼
three.js開啟必須用到的基礎(chǔ)代碼如下：
導(dǎo)入three庫：
import * as THREE from 'three'初始化場景：
const scene = new THREE.Scene()初始化相機(jī)：
const camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,200)
camera.position.set(10,5,20)初始化渲染器：
const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setSize(window.innerWidth,window.innerHeight)監(jiān)聽屏幕大小的改變，修改渲染器的寬高和相機(jī)的比例：
window.addEventListener("resize",()=>{
renderer.setSize(window.innerWidth,window.innerHeight)
camera.aspect = window.innerWidth/window.innerHeight
camera.updateProjectionMatrix()
})設(shè)置渲染函數(shù)：
const render = () =>{
requestAnimationFrame(render);
renderer.render(scene, camera);
}進(jìn)行掛載：
onMounted(()=>{
render()
})ok，寫完基礎(chǔ)代碼之后，接下來開始具體的Demo實操。
創(chuàng)建月球模型
首先這里通過直接給畫布的canvas標(biāo)簽添加css樣式，給其一個背景圖片作為背景：
canvas{
background-image: url('../../public/images/star.jpg');
background-size: cover;
}然后使用TextureLoader用于加載圖片紋理的工具，將圖片文件加載為 Three.js 中的紋理對象，并且可以將紋理應(yīng)用到場景中的任何物體上，從而實現(xiàn)更加生動的渲染效果。
// 創(chuàng)建月球
const moonGeometry = new THREE.SphereGeometry(MOON_RADIUS,16,16)
const moonMaterial = new THREE.MeshPhongMaterial({
map: textureLoader.load('/public/textures/planets/moon_1024.jpg')
})
const moon = new THREE.Mesh(moonGeometry, moonMaterial)
moon.receiveShadow = true
moon.castShadow = true;
scene.add(moon)創(chuàng)建好模型之后給場景中添加光源：
// 創(chuàng)建添加聚光燈光源
const dirLight = new THREE.SpotLight(0xffffff)
dirLight.position.set(0,0,10)
dirLight.intensity = 1
dirLight.castShadow = true
scene.add(dirLight)
// 添加環(huán)境光
const aLight = new THREE.AmbientLight(0xffffff)
aLight.intensity = 0.03
scene.add(aLight)在渲染函數(shù)中通過getElapsedTime方法計算動畫經(jīng)過的時間或者控制動畫的播放速度，來動態(tài)改變月球位置，讓其繞圓周開始運(yùn)動。
let clock = new THREE.Clock();
// 設(shè)置渲染函數(shù)
const render = () =>{
const elapsed = clock.getElapsedTime()
// 月球旋轉(zhuǎn)
moon.position.set(Math.sin(elapsed)*5,0,Math.cos(elapsed)*5)
renderer.render(scene,camera)
requestAnimationFrame(render)
}
添加地球模型
這里也采用TextureLoader用于加載圖片紋理的工具，將圖片文件加載為 Three.js 中的紋理對象，并且可以將紋理應(yīng)用到場景中的任何物體上，從而實現(xiàn)更加生動的渲染效果。
// 創(chuàng)建地球
const earthGeometry = new THREE.SphereGeometry(EARTH_RADIUS,16,16)
const earthMaterial = new THREE.MeshPhongMaterial({
map: textureLoader.load('/public/textures/planets/earth_atmos_2048.jpg'),
specularMap: textureLoader.load('/public/textures/planets/earth_specular_2048.jpg'),
normalMap: textureLoader.load('/public/textures/planets/earth_normal_2048.jpg'),
})
const earth = new THREE.Mesh(earthGeometry,earthMaterial)
earth.receiveShadow = true
earth.castShadow = true
scene.add(earth)這里依然在render渲染函數(shù)處通過getElapsedTime方法計算動畫經(jīng)過的時間或者控制動畫的播放速度，來動態(tài)改變地球自轉(zhuǎn)速度，讓自轉(zhuǎn)運(yùn)動。
let clock = new THREE.Clock();
let oldtime = 0
// 設(shè)置渲染函數(shù)
const render = () =>{
const elapsed = clock.getElapsedTime()
// 月球旋轉(zhuǎn)
moon.position.set(Math.sin(elapsed)*5,0,Math.cos(elapsed)*5)
// 地球自轉(zhuǎn)
let axis = new THREE.Vector3(0,1,0)
earth.rotateOnAxis(axis, (elapsed - oldtime) * Math.PI / 10)
oldtime = elapsed
requestAnimationFrame(render)
}
添加模型標(biāo)簽
在 Three.js 中，CSS2DRenderer 是一個用于將 HTML 元素渲染成 2D 貼圖，并將其添加到 Three.js 場景中的工具類。它可以幫助我們更方便地在 Three.js 場景中添加 HTML 元素，比如顯示標(biāo)簽、文字等。CSS2DRenderer 類似于 Three.js 中的 WebGLRenderer，但是它渲染的不是 Three.js 的 3D 對象，而是 HTML 元素。
import { CSS2DRenderer} from 'three/examples/jsm/renderers/CSS2DRenderer'
// 創(chuàng)建標(biāo)簽選擇器
const labelRenderer = new CSS2DRenderer();
labelRenderer.setSize(window.innerWidth, window.innerHeight)
labelRenderer.domElement.style.position = 'absolute';
labelRenderer.domElement.style.top = '0px';
document.body.appendChild(labelRenderer.domElement)
// 給CSS2DRenderer添加控制器
const controls1 = new OrbitControls(camera,labelRenderer.domElement)
controls1.enableDamping = trueCSS2DObject 則是可以在 Three.js 場景中創(chuàng)建的一個 CSS2D 元素。它類似于 Three.js 中的 Mesh，但是它表示的不是三維物體，而是一個 CSS 元素。你可以通過創(chuàng)建 CSS2DObject 實例，將其添加到 Three.js 的場景中，并設(shè)置其內(nèi)部的 HTML 元素，從而在 Three.js 場景中顯示 HTML 內(nèi)容。
import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer'
// 創(chuàng)建月球標(biāo)簽
const moonDiv = document.createElement('div');
moonDiv.className = 'label';
moonDiv.textContent = 'Moon';
const moonLabel = new CSS2DObject(moonDiv)
moonLabel.position.set(0, MOON_RADIUS + 0.5, 0);
moon.add(moonLabel)
// 創(chuàng)建地球標(biāo)簽
const earthDiv = document.createElement('div');
earthDiv.className = 'label';
earthDiv.textContent = 'Earch';
const eartchLabel = new CSS2DObject(earthDiv)
eartchLabel.position.set(0, EARTH_RADIUS + 0.5, 0);
earth.add(eartchLabel)然后給出直接設(shè)置類名的樣式：
最后在渲染函數(shù)中加載渲染標(biāo)簽函數(shù) ：
文章來源：http://www.zghlxwxcb.cn/news/detail-466986.html
demo做完，給出本案例的完整代碼：（獲取素材也可以私信博主）文章來源地址http://www.zghlxwxcb.cn/news/detail-466986.html
<script setup>
import * as THREE from 'three'
import { onMounted } from 'vue';
// 控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
// 文字2D渲染器
import { CSS2DRenderer,CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer'
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,200)
camera.position.set(10,5,20)
// 創(chuàng)建渲染器
const renderer = new THREE.WebGLRenderer({
alpha: true
})
renderer.setPixelRatio(window.devicePixelRatio) // 根據(jù)屏幕顯示像素比
renderer.setSize(window.innerWidth,window.innerHeight)
renderer.shadowMap.enabled = true // 渲染陰影
document.body.appendChild(renderer.domElement)
window.addEventListener("resize",()=>{
renderer.setSize(window.innerWidth,window.innerHeight)
camera.aspect = window.innerWidth/window.innerHeight
camera.updateProjectionMatrix()
})
// 設(shè)置控制器
const controls = new OrbitControls(camera,renderer.domElement)
controls.enableDamping = true
let clock = new THREE.Clock();
let oldtime = 0
// 設(shè)置渲染函數(shù)
const render = () =>{
const elapsed = clock.getElapsedTime()
// 月球旋轉(zhuǎn)
moon.position.set(Math.sin(elapsed)*5,0,Math.cos(elapsed)*5)
// 地球自轉(zhuǎn)
let axis = new THREE.Vector3(0,1,0)
earth.rotateOnAxis(axis, (elapsed - oldtime) * Math.PI / 10)
oldtime = elapsed
renderer.render(scene,camera)
labelRenderer.render(scene, camera)
requestAnimationFrame(render)
}
// 設(shè)置地球和月球的半徑大小
const EARTH_RADIUS = 2.5
const MOON_RADIUS = 0.27
// 實例化紋理加載器
const textureLoader = new THREE.TextureLoader()
// 創(chuàng)建標(biāo)簽選擇器
const labelRenderer = new CSS2DRenderer();
labelRenderer.setSize(window.innerWidth, window.innerHeight)
labelRenderer.domElement.style.position = 'absolute';
labelRenderer.domElement.style.top = '0px';
document.body.appendChild(labelRenderer.domElement)
// 給CSS2DRenderer添加控制器
const controls1 = new OrbitControls(camera,labelRenderer.domElement)
controls1.enableDamping = true
// 創(chuàng)建月球
const moonGeometry = new THREE.SphereGeometry(MOON_RADIUS,16,16)
const moonMaterial = new THREE.MeshPhongMaterial({
map: textureLoader.load('/public/textures/planets/moon_1024.jpg')
})
const moon = new THREE.Mesh(moonGeometry, moonMaterial)
moon.receiveShadow = true
moon.castShadow = true;
scene.add(moon)
// 創(chuàng)建月球標(biāo)簽
const moonDiv = document.createElement('div');
moonDiv.className = 'label';
moonDiv.textContent = 'Moon';
const moonLabel = new CSS2DObject(moonDiv)
moonLabel.position.set(0, MOON_RADIUS + 0.5, 0);
moon.add(moonLabel)
// 創(chuàng)建地球
const earthGeometry = new THREE.SphereGeometry(EARTH_RADIUS,16,16)
const earthMaterial = new THREE.MeshPhongMaterial({
map: textureLoader.load('/public/textures/planets/earth_atmos_2048.jpg'),
specularMap: textureLoader.load('/public/textures/planets/earth_specular_2048.jpg'),
normalMap: textureLoader.load('/public/textures/planets/earth_normal_2048.jpg'),
})
const earth = new THREE.Mesh(earthGeometry,earthMaterial)
earth.receiveShadow = true
earth.castShadow = true
scene.add(earth)
// 創(chuàng)建地球標(biāo)簽
const earthDiv = document.createElement('div');
earthDiv.className = 'label';
earthDiv.textContent = 'Earch';
const eartchLabel = new CSS2DObject(earthDiv)
eartchLabel.position.set(0, EARTH_RADIUS + 0.5, 0);
earth.add(eartchLabel)
// 創(chuàng)建添加聚光燈光源
const dirLight = new THREE.SpotLight(0xffffff)
dirLight.position.set(0,0,10)
dirLight.intensity = 1
dirLight.castShadow = true
scene.add(dirLight)
// 添加環(huán)境光
const aLight = new THREE.AmbientLight(0xffffff)
aLight.intensity = 0.03
scene.add(aLight)
onMounted(()=>{
render()
})
</script>
<style lang="less">
canvas{
background-image: url('../../public/images/star.jpg');
background-size: cover;
}
.label {
color: #fff;
font-size: 16px;
}
</style>到了這里，關(guān)于Three.js--》實現(xiàn)3d地月模型展示的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
