前言：通過上節(jié)課?02.Three.js的入門課程（一），我們了解了Three.js的最小案例DEMO，熟悉了幾個(gè)重要組成部分。這節(jié)課帶領(lǐng)大家編寫一個(gè)3D地球。
一、通過紋理圖渲染一個(gè)地球
1.1.創(chuàng)建一個(gè)紋理加載器對(duì)象TextureLoader，可以加載圖片作為紋理貼圖；
// 引入three.js
import * as THREE from '../../../three.js-r123/build/three.module.js';
// 創(chuàng)建地球mesh網(wǎng)格對(duì)象
// 地球半徑
var R = 100;
var earth = createSphereMesh(R);
// R：地球半徑
function createSphereMesh(R) {
// 創(chuàng)建紋理加載器對(duì)象
var textureLoader = new THREE.TextureLoader();
// 加載紋理貼圖
var texture = textureLoader.load('earth.jpg');
// 創(chuàng)建一個(gè)球體幾何對(duì)象
var geometry = new THREE.SphereBufferGeometry(R, 40, 40);
// 材質(zhì)對(duì)象Material
var material = new THREE.MeshLambertMaterial({
// color: 0x00ffff,
map: texture,//設(shè)置地球顏色貼圖map
});
// 網(wǎng)格模型對(duì)象Mesh
var mesh = new THREE.Mesh(geometry, material);
return mesh;
}
export { earth }
1.2.完整代碼結(jié)構(gòu)
二、小球標(biāo)注球面上一點(diǎn)
2.1.創(chuàng)建一個(gè)小球的網(wǎng)格模型
// 引入Three.js
import * as THREE from '../../../three.js-r123/build/three.module.js';
// 創(chuàng)建一個(gè)小球用于測(cè)試
function createSphereMesh(R,x,y,z) {
// 創(chuàng)建一個(gè)球體幾何對(duì)象
var geometry = new THREE.SphereGeometry(R, 25, 25);
// 材質(zhì)對(duì)象Material
var material = new THREE.MeshLambertMaterial({
color: 0xff0000
});
// 網(wǎng)格模型對(duì)象Mesh
var mesh = new THREE.Mesh(geometry, material);
mesh.position.set(x,y,z);
return mesh
}
export { createSphereMesh }2.2.完整代碼
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<script type="module">
/**
* 01.創(chuàng)建地球
*/
import { scene, renderer } from './scene.js'
// Three.js渲染結(jié)果Canvas畫布插入到body元素中
document.body.appendChild(renderer.domElement);
/**
* 02.創(chuàng)建小球mesh
*/
// 地球半徑
var R = 100;
import { createSphereMesh } from './help.js'
// 北極球面上繪制一個(gè)小球標(biāo)注
scene.add(createSphereMesh(10,0,R,0));
</script>
</body>
</html>scene.js
/**
* 01.引入第三方依賴
*/
// 引入Three.js
import * as THREE from '../../../three.js-r123/build/three.module.js';
// 引入Three.js擴(kuò)展庫(kù)
import { OrbitControls } from '../../../three.js-r123/examples/jsm/controls/OrbitControls.js';
// 引入地球
import { earth } from './earth.js'
/**
* 02.創(chuàng)建場(chǎng)景對(duì)象Scene
*/
var scene = new THREE.Scene();
scene.add(earth);
/**
* 03.光源設(shè)置
*/
// 平行光1
var directionalLight = new THREE.DirectionalLight(0xffffff, 0.6);
directionalLight.position.set(400, 200, 300);
scene.add(directionalLight);
// 平行光2
var directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.6);
directionalLight2.position.set(-400, -200, -300);
scene.add(directionalLight2);
//環(huán)境光
var ambient = new THREE.AmbientLight(0xffffff, 0.6);
scene.add(ambient);
/**
* 04.相機(jī)設(shè)置
*/
// width和height用來設(shè)置Three.js輸出Canvas畫布尺寸，同時(shí)用來輔助設(shè)置相機(jī)渲染范圍
// 窗口文檔顯示區(qū)的寬度
var width = window.innerWidth;
// 窗口文檔顯示區(qū)的高度
var height = window.innerHeight;
// Three.js輸出的Cnavas畫布寬高比
var k = width / height;
// 控制相機(jī)渲染空間左右上下渲染范圍，s越大，相機(jī)渲染范圍越大
var s = 200;
// THREE.OrthographicCamera()創(chuàng)建一個(gè)正投影相機(jī)對(duì)象
// -s * k, s * k, s, -s, 1, 1000定義了一個(gè)長(zhǎng)方體渲染空間，渲染空間外的模型不會(huì)被渲染
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
// 相機(jī)在Three.js坐標(biāo)系中的位置
camera.position.set(200, 300, 200);
// 相機(jī)指向Three.js坐標(biāo)系原點(diǎn)
camera.lookAt(0, 0, 0);
/**
* 05.創(chuàng)建渲染器對(duì)象
*/
var renderer = new THREE.WebGLRenderer({
antialias: true, //開啟鋸齒
});
// 設(shè)置設(shè)備像素比率,防止Canvas畫布輸出模糊
renderer.setPixelRatio(window.devicePixelRatio);
// 設(shè)置渲染區(qū)域尺寸
renderer.setSize(width, height);
// 設(shè)置背景顏色
// renderer.setClearColor(0xb9d3ff, 1);
// renderer.domElement表示Three.js渲染結(jié)果,也就是一個(gè)HTML元素(Canvas畫布)
// body元素中插入canvas對(duì)象
// document.body.appendChild(renderer.domElement);
/**
* 06.渲染循環(huán)
*/
function render() {
// 地球繞y軸旋轉(zhuǎn)動(dòng)畫
// earth.rotateY(0.01);
// 執(zhí)行渲染操作
renderer.render(scene, camera);
// 請(qǐng)求再次執(zhí)行渲染函數(shù)render，渲染下一幀
requestAnimationFrame(render);
}
render();
/**
* 07.Three.js三維坐標(biāo)軸 三個(gè)坐標(biāo)軸顏色RGB分別對(duì)應(yīng)xyz軸
*/
var axesHelper = new THREE.AxesHelper(250);
scene.add(axesHelper);
/**
* 08.創(chuàng)建控件對(duì)象 控件可以監(jiān)聽鼠標(biāo)的變化，改變相機(jī)對(duì)象的屬性
*/
// 旋轉(zhuǎn)：拖動(dòng)鼠標(biāo)左鍵
// 縮放：滾動(dòng)鼠標(biāo)中鍵
// 平移：拖動(dòng)鼠標(biāo)右鍵
var controls = new OrbitControls(camera, renderer.domElement);
export { scene, renderer}earth.js
// 引入three.js
import * as THREE from '../../../three.js-r123/build/three.module.js';
// 地球半徑
var R = 100;
// 創(chuàng)建地球mesh
var earth = createSphereMesh(R);
function createSphereMesh(r) {
// TextureLoader創(chuàng)建一個(gè)紋理加載器對(duì)象，可以加載圖片作為紋理貼圖
var textureLoader = new THREE.TextureLoader();
// 加載紋理貼圖
var texture = textureLoader.load('earth.jpg');
// 創(chuàng)建一個(gè)球體幾何對(duì)象
var geometry = new THREE.SphereBufferGeometry(r, 40, 40);
// 材質(zhì)對(duì)象Material
var material = new THREE.MeshLambertMaterial({
// color: 0x00ffff,
// 設(shè)置地球顏色貼圖map
map: texture,
});
// 網(wǎng)格模型對(duì)象Mesh
var mesh = new THREE.Mesh(geometry, material);
return mesh
}
export { earth }help.js
// 引入Three.js
import * as THREE from '../../../three.js-r123/build/three.module.js';
// 創(chuàng)建一個(gè)小球用于測(cè)試
function createSphereMesh(R,x,y,z) {
// 創(chuàng)建一個(gè)球體幾何對(duì)象
var geometry = new THREE.SphereGeometry(R, 25, 25);
// 材質(zhì)對(duì)象Material
var material = new THREE.MeshLambertMaterial({
color: 0xff0000
});
// 網(wǎng)格模型對(duì)象Mesh
var mesh = new THREE.Mesh(geometry, material);
mesh.position.set(x,y,z);
return mesh
}
export { createSphereMesh }earth.png
2.3.運(yùn)行效果圖
文章來源：http://www.zghlxwxcb.cn/news/detail-761143.html
說明：本文代碼參考技術(shù)博客：www.yanhuangxueyuan.com，如有侵權(quán)，請(qǐng)私信作者，刪除博文處理。?文章來源地址http://www.zghlxwxcb.cn/news/detail-761143.html
到了這里，關(guān)于03.Three.js的入門教程（二）如何創(chuàng)建一個(gè)3D地球？的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
