3D世界-Three.js的探究與實踐

kermit發表於2019-01-16

3DJS

此文的github及當中示例:piexl.github.io/explore-thr…

專案需求

在開發育空網站時我們需要在頁面內使用四面體，還要增加一些互動和操作，因此使用了3D類庫Three.js也經歷多種波折才實現了我們最終的效果。

需要的實現的互動： 1.四面體自動旋轉； 2.旋轉過程中監聽當前使用者正對那個面 3.四面體點選某個面時跳轉到這個面對應的連結 4.實現粒子背景

3D世界的初認識

Three.js官方文件使用起來對於初學者來說並不優化，通過下面連個Three.js的先關資料對它的理解能更塊些

Three.js 文件結構：圖片來自

Three.js 核心物件結構和基本的渲染流程：圖片來自

右手座標系 Three.js 採用的是的右手座標系，座標系的原點在畫布中心（canvas.width / 2, canvas.height / 2）。我們可以通過 Three.js 提供的 THREE.AxisHelper() 輔助方法將座標系視覺化。RGB顏色分別代表 XYZ 軸，如下圖

右手座標系：圖片來自

建立一個場景

準備html,引入Three.js


<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <title>My first three.js app</title>
    <style>
        body { margin: 0; }
        canvas { width: 100%; height: 100% }
    </style>
</head>
<body>
    <script src="https://cdn.bootcss.com/three.js/r83/three.js"></script>
</body>
</html>
複製程式碼

建立場景

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
複製程式碼

上面的程式碼構建了scene, camera 和 renderer。Three.js的架構支援多種camera，這裡使用最常見的遠景相機（PerspectiveCamera），也就是類似於人眼觀察的方式。第一個屬性75設定的是視角（field of view）。第二個屬性設定的是相機拍攝面的長寬比（aspect ratio）。我們幾乎總是會使用元素的寬除以高，否則會出現擠壓變形。接下來的2個屬性是近裁剪面（near clipping plane）和遠裁剪面（far clipping plane）。下面這張圖可以幫助你理解：

建立立方體

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x2185D0 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
複製程式碼

渲染場景

在大多數螢幕上，重新整理率一般是60次/秒

function animate() {
    requestAnimationFrame( animate );
    renderer.render( scene, camera );
}
animate();
複製程式碼

使立方體動起來

將下列程式碼新增到animate()函式中renderer.render呼叫的上方：

cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
複製程式碼

最終實現效果

3D世界的深層瞭解

四面體的實現嘗試一(引入模型法)

效果見頁面引入模型法

優點：實現方式簡單，貼圖完整缺點： 1.無法設定模型的中心，導致旋轉中心偏差模型異常 2.材質貼圖後期修改麻煩，無法分開修改 3.點選事件無法增加

準備素材

四面體模型
材質貼圖
obj模型匯入庫OBJLoader.js

實現方法

構建創景及場景引數設定

//場景設定
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 50 );
camera.position.z = 20;
var renderer = new THREE.WebGLRenderer({
    antialias: true,
    alpha: true //canvas是否包含alpha
});
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
複製程式碼

其中WebGLRenderer的alpha引數為場景的背景透明度，為true則透明能可看到場後後面的背景。

場中輔助線、控制器及環境光的設定

//座標輔助線
var axesHelper = new THREE.AxesHelper( 100 );
scene.add( axesHelper );

//控制器
var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableZoom = false;

//建立一個環境光，並增加到場景中
var ambientLight = new THREE.AmbientLight(0xffffff);
scene.add(ambientLight);
複製程式碼

載入模型

//載入模型
var mesh;
var manager = new THREE.LoadingManager(); //載入管理器
//匯入模型紋理Texture
var texture = new THREE.Texture();
var loader = new THREE.ImageLoader(manager);
loader.load('../imgs/obj/texture.jpg', function (image) {
    texture.image = image;
    texture.needsUpdate = true;
});
// 建立loader變數，用於匯入模型
var loader = new THREE.OBJLoader(manager);
//第一個表示模型路徑，第二個表示完成匯入後的回撥函式，一般我們需要在這個回撥函式中將匯入的模型新增到場景中
loader.load('../imgs/obj/tetrahedron.obj', function (obj) {
    obj.traverse(function (child) {
        if (child instanceof THREE.Mesh) {
            child.material.side = THREE.DoubleSide;
            child.material.map = texture;
        }
    });
    mesh = obj;//儲存到全域性變數中
    mesh.position.y = 0;
    scene.add(mesh);//將匯入的模型新增到場景中
    animate();
});
複製程式碼

ImageLoader為圖片載入器，OBJLoader為obj物件模型載入器，並在模型載入回撥中執行渲染函式

渲染模型

function animate(){
    requestAnimationFrame(animate);
    if (mesh.rotation.y < Math.PI * 2) {
        mesh.rotation.y += 0.01;
        mesh.rotation.x += 0.01;
    }
    renderer.render(scene, camera);
}
複製程式碼

渲染時更改模型的角度，讓模型轉起來

[注] 載入模型的方法很多，具體根據你製作模型的軟體和匯出的模型的格式而定，obj形式只是其中一中而已

四面體的實現嘗試二（幾何四面體實現）

效果見頁面幾何四面體實現

優點：實現簡單，大小，材質等引數更改方便缺點：貼圖無規則，無法貼圖

實現步驟

構件場景並設定基本引數

//構建場景
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 50 );
camera.position.z = 30;
var renderer = new THREE.WebGLRenderer({
    alpha: true
});
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
複製程式碼

座標線、控制器及環境光的增加

// 座標線
var axesHelper = new THREE.AxesHelper( 100 );
scene.add( axesHelper );

//控制器
var orbit = new THREE.OrbitControls( camera, renderer.domElement );
orbit.enableZoom = false;

//設定環境光
var ambientLight = new THREE.AmbientLight(0xffffff);
scene.add(ambientLight);
複製程式碼

建立四面體模型，並設定材質

// 建立模型
var mesh = new THREE.Object3D()
//設定線段樣式
mesh.add( new THREE.LineSegments(
    new THREE.Geometry(),
    new THREE.LineBasicMaterial( {
        color: 0xffffff,
        transparent: true,
        opacity: 0.5
    } )
) );

//設定模型的材質
mesh.add( new THREE.Mesh(
    new THREE.Geometry(),
    new THREE.MeshPhongMaterial( {
        map: new THREE.TextureLoader().load('../imgs/texture.jpg?'+new Date().getTime()),
    } )
));
//四面幾何體的類,第一個引數為四面體的半徑，第二個引數增加的單數，如果不為這不是四面體
var geometry = new THREE.TetrahedronGeometry(14, 0);
mesh.children[ 0 ].geometry.dispose();
mesh.children[ 1 ].geometry.dispose();
mesh.children[ 0 ].geometry = new THREE.WireframeGeometry( geometry );
mesh.children[ 1 ].geometry = geometry;
scene.add( mesh );
複製程式碼

增加渲染器和輔助線

//包圍盒的輔助物件
var box = new THREE.BoxHelper( mesh, 0xffff00 );
scene.add( box );

//渲染器
var render = function () {
    requestAnimationFrame( render );
    var time = Date.now() * 0.001;
    if(mesh.rotation.y <= Math.PI*2){
        mesh.rotation.x += 0.005;
        mesh.rotation.y += 0.005;
    }
    renderer.render( scene, camera );
};
render();
複製程式碼

增加模型的輔助線更有利於我們對模型的理解

四面體的實現嘗試三（頂點構造法）

效果見頁面頂點構造法

優點：材質貼圖可分開，中心點穩定不會偏移缺點：構造複雜,運算效率低

實現步驟

構建場景

//構建場景
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z = 30;
var renderer = new THREE.WebGLRenderer({
    antialias: true,
    alpha: true
});
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
複製程式碼

增加控制器、環境光及座標輔助線，事件處理外掛的初始化

//控制器
var orbit = new THREE.OrbitControls( camera, renderer.domElement );
orbit.enableZoom = false;

//環境光
var ambientLight = new THREE.AmbientLight(0xffffff);
scene.add(ambientLight);

//座標輔助線
var axesHelper = new THREE.AxesHelper( 100 );
scene.add( axesHelper );

//事件處理初始化
var interaction = new THREE.Interaction(renderer, scene, camera);
複製程式碼

建立四面體的每個頂點及構造四個面

利用下面的這張圖有助於我們理解這個四面體的構建，設定一個基本單位r，四面的四個點頂點位置如下圖：

//定義幾何點
var cubeGeometry = new THREE.Geometry();
//建立四面的頂點
var r = 8;
var vertices = [
    new THREE.Vector3(r, r, r), //v0
    new THREE.Vector3(-r, -r, r), //v1
    new THREE.Vector3(-r, r, -r), //v2
    new THREE.Vector3(r, -r, -r), //v3
];
//設定四面體的各個座標點
cubeGeometry.vertices = vertices;
//建立立方的面，各個面的排列順序
var faces=[
    new THREE.Face3(0,1,2),
    new THREE.Face3(1,3,2),
    new THREE.Face3(2,3,0),
    new THREE.Face3(3,1,0),
];
cubeGeometry.faces = faces;
複製程式碼

為四面體每個面設定貼圖

//給四面體設定貼圖
var materials = [];  //建立一個貼圖陣列
//設定貼圖陣列
for(var i = 0;i < cubeGeometry.faces.length;i++){
    materials[i] = new THREE.MeshBasicMaterial({
        // map: new THREE.TextureLoader().load('../imgs/texture' + (i+1) + '.jpg?'+new Date().getTime()),
        map: new THREE.TextureLoader().load('../imgs/texture_new-0' + (i+1) + '.jpg?'+new Date().getTime()),
        side: THREE.DoubleSide,
    })
}
//記錄每個面的id，將紋理座標和faceid間接關聯，否則紋理圖片始終都是第一張的圖片
var faceId = 0;
var uv = [
    new THREE.Vector2(0,0), //圖片左下角
    new THREE.Vector2(1,0), //圖片右下角
    new THREE.Vector2(1,1), //圖片右上角
    new THREE.Vector2(0,1), //圖片左上角
];
//設定紋理座標
for(var m=0;m<cubeGeometry.faces.length;m+=1){
    cubeGeometry.faces[m].materialIndex = faceId;
    cubeGeometry.faceVertexUvs[0][m] = [uv[0],uv[1],uv[2]];
    faceId++;
}
複製程式碼

建立四面體併為其增加輔助線

//建立四面體
var cube = new THREE.Mesh(cubeGeometry,materials);

//增加盒輔助線
var box = new THREE.BoxHelper( cube, 0xffff00 );
scene.add( box );
複製程式碼

為四面體增加各面的法線點

要尋找過四面體每個面過中心點的法線，即過此面的中心且垂直於這個面的點構成的線. 以四面體ABC面為例：

C為ABC面的中心， ∵ Bb ⊥ cb 且 eb ⊥ Bb ∴ Bb ⊥ bce ∴ Bb ⊥ ec 同理可證 Ba ⊥ ec ∵ Bb ⊥ ec 且 Ba ⊥ ec ∴ ec ⊥ ABC 所以 ec為面ABC的法線，e為ABC面法線上的點

其他面的法線點如下圖中（efgh）：

//四個面的法線點
var pointsGeometry = new THREE.Geometry();
var normalPoints = [
    new THREE.Vector3(-r, r, r),
    new THREE.Vector3(-r, -r, -r),
    new THREE.Vector3(r, r, -r),
    new THREE.Vector3(r, -r, r)
];
pointsGeometry.vertices = normalPoints;
var pointsMaterial = new THREE.PointsMaterial( {
    color: 0xfffffff,
    size:0.5,
} );
var pointsField = new THREE.Points( pointsGeometry, pointsMaterial );
複製程式碼

把四面體和法線點放到同一個組中

var group = new THREE.Group();
group.add( cube );
group.add( pointsField );
group.autoRate = true;
scene.add( group );
複製程式碼

監聽當前正對到那個面

四面體轉動過程中法線點的新座標獲取：

當四面體繞繞Y軸轉動轉動（Y座標不發生變化）: Y軸準東的角度:ralationY = group.rotation.y 開始時在水平面的角度:startY = Math.abs(Math.atan(x/z)) 那麼Y軸總角度為:degY = startY + ralationY 水平面轉動的半徑為:fR = Math.sqrt(Math.pow(x, 2) + Math.pow(z, 2)) 轉動後打的點x座標為: x = fR * (z / x > 0 ? Math.sin(degY) : Math.cos(degY)) * (x > 0 ? 1 : -1)

以法線點e(-r, r, r)和f(-r, -r, -r)為例參考下圖：

當四面體繞繞X軸轉動轉動（X座標不發生變化）: X軸準東的角度:ralationX = group.rotation.x 開始時在豎直面的角度:startX = Math.abs(Math.atan(y/z)), 那麼X軸總角度為:degX = startX + ralationX 豎直面轉動的半徑為:sR = Math.sqrt(Math.pow(y, 2) + Math.pow(z, 2)) 轉動後打的點y座標為: y = sR * (z / y > 0 ? Math.cos(degX) : Math.sin(degX)) * (y > 0 ? 1 : -1)

以法線點e(-r, r, r)和f(-r, -r, -r)為例參考下圖：

//法線點的初始位置
var originalPonits = [
    new THREE.Vector3(-r, r, r),
    new THREE.Vector3(-r, -r, -r),
    new THREE.Vector3(r, r, -r),
    new THREE.Vector3(r, -r, r)
];
//監聽當前屬於哪個面
function checkCurFace(){
    var degCell = 2 * Math.PI / 360;
    var distance = [];//與相機位置的距離
    originalPonits.forEach(function (item, index) {
        var itemOldPoint = normalPoints[index];
        var x = itemOldPoint.x,
            y = itemOldPoint.y,
            z = itemOldPoint.z,
            startX = Math.abs(Math.atan(y/z)),
            startY = Math.abs(Math.atan(x/z)),
            ralationX = group.rotation.x,
            ralationY = group.rotation.y,
            degX = startX + ralationX,
            degY = startY + ralationY,
            fR = Math.sqrt(Math.pow(x, 2) + Math.pow(z, 2)),//底部投影半徑
            sR = Math.sqrt(Math.pow(y, 2) + Math.pow(z, 2)),//側面投影半徑
            cR = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2) + Math.pow(z, 2)); //向量點距中心的半徑

        item.x = fR * (z / x > 0 ? Math.sin(degY) : Math.cos(degY)) * (x > 0 ? 1 : -1);
        item.z = sR * (z / y > 0 ? Math.sin(degX) : Math.cos(degX)) * (z > 0 ? 1 : -1);
        item.y = sR * (z / y > 0 ? Math.cos(degX) : Math.sin(degX)) * (y > 0 ? 1 : -1);

        var distanceX = camera.position.x - item.x,
            distanceY = camera.position.y - item.y,
            distanceZ = camera.position.z - item.z;
        distance.push(Math.sqrt(Math.pow(distanceX, 2) + Math.pow(distanceY, 2) + Math.pow(distanceZ, 2)));
    });
    var minDistance = Math.min.apply(null, distance),
        curIndex = distance.indexOf(minDistance);
    console.log('curIndex', '當前面的序號為:'+curIndex);
}
複製程式碼

這個檢查函式中使用了立體結合的一些知識，最終根據轉動時每個法線點座標更新，獲得它與相機兩點點的距離，距離最短的就是當前的這是啟用面。

給四面體增加事件

//給四面體增加事件
cube.on('click', function (ev) {
    //點選檢查當前的啟用面
    checkCurFace();
});
cube.on('mouseover', function (ev) {
    //滑鼠進入四面體組停止轉動
    group.autoRate = false;
});
cube.on('mouseout', function (ev) {
    //滑鼠離開四面體組開始轉動
    group.autoRate = true;
});
複製程式碼

增加渲染器讓四面體旋轉起來

//渲染器
var render = function () {
    requestAnimationFrame( render );
    var time = Date.now() * 0.001;
    if(group.autoRate){
        if(group.rotation.x < Math.PI*2){
            group.rotation.x += 0.01;
            group.rotation.y += 0.01;
        }else{
            group.rotation.x = 0;
            group.rotation.y = 0;
        }
    }
    checkCurFace();
    renderer.render( scene, camera );
};
render();
複製程式碼

在每次更新是檢查當前屬於那個面

粒子背景的實現

效果見頁面粒子背景

實現方法

構建場景

//建立場景
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 2000);
camera.position.z = 1000;
var renderer = new THREE.WebGLRenderer({
    alpha: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild( renderer.domElement );
複製程式碼

增加光源

//光源新增到場景中
var ambientLight = new THREE.AmbientLight(0xffffff);
scene.add(ambientLight);
複製程式碼

建立星空點

//建立星空點
var starsGeometry = new THREE.Geometry();
for ( var i = 0; i < 1000; i ++ ) {
    var star = new THREE.Vector3();
    star.x = Math.random() * 2000 - 1000;
    star.y = Math.random() * 2000 - 1000;
    star.z = Math.random() * 2000 - 1000;
    starsGeometry.vertices.push( star );
}
var textureLoader = new THREE.TextureLoader();
var sprite = textureLoader.load('../imgs/snowflake1.png');
var PointSizes = [2,3,4,5,6,7,8,9];
var starsMaterial = new THREE.PointsMaterial( {
    color: 0xfffffff,
    size: PointSizes[parseInt(Math.random()*7)],
    map: sprite,
} );
var starField = new THREE.Points( starsGeometry, starsMaterial );
scene.add( starField );
複製程式碼

粒子類Points( geometry, material )

geometry — （可選）是一個Geometry或者BufferGeometry的例項，預設值是一個新的BufferGeometry
material — （可選）是一個物件，預設值是一個具有隨機顏色的新的 PointsMaterial

渲染場景

// 渲染器
function render() {
    var time = Date.now() * 0.00005;
    camera.position.x += camera.position.x * 0.05;
    camera.position.y += camera.position.y * 0.05;
    camera.lookAt(scene.position);
    for (var i = 0; i < scene.children.length; i++) {
        var object = scene.children[i];
        if (object instanceof THREE.Points) {
            object.rotation.y = time * (i < 4 ? i + 1 : -(i + 1));
        }
    }
    requestAnimationFrame(render);
    renderer.render(scene, camera);
}
render();
複製程式碼

每次渲染的時候修改相機的x和y的位置，讓星空轉起來。修改每個點的y座標讓點有自身的變化。

參考連結

threejs官方文件: threejs.org/docs/index.… (現在可切換中文文件了)
threejs教程:teakki.com/p/58a3ef1bf…
Three.js 現學現賣: aotu.io/notes/2017/…
threejs+tweenjs實現3D粒子模型切換: juejin.im/post/5b8d47…
three.interaction.js(給threejs中模型增加事件的類庫)：github.com/jasonChen19…

Three.js - 走進3D的奇妙世界
2019-11-28
JS3D
Three.js 實現3D開放世界小遊戲：阿狸的多元宇宙 ?
2022-04-01
JS3D遊戲元宇宙
[gRPC via C#] gRPC本質的探究與實踐
2022-03-03
RPCC#
three.js簡單實踐
2024-03-06
JS
攜程後臺低程式碼平臺的探究與實踐
2023-11-07
基於three.js的3D粒子動效實現
2019-04-09
JS3D
使用Three.js實現神奇的3D文字懸浮效果
2022-03-09
JS3D
Three.js 實現3D全景偵探小遊戲?️
2021-12-16
JS3D遊戲
RC4Drop加密技術：原理、實踐與安全性探究
2024-04-18
加密
使用 three.js 中的 CSS3DRenderer 實現 3d 卡片的效果
2019-04-16
JSCSSS33D
使用three.js實現炫酷的酸性風格3D頁面
2021-09-28
JS3D
真實世界中 Rust 程式的安全實踐
2020-07-01
Rust
Three.js 實現虎年春節3D創意頁面
2022-01-11
JS3D
Three.js實現臉書元宇宙3D動態Logo
2021-11-18
JS元宇宙3DGo
Three.js實現2022冬奧主題3D趣味頁面
2022-03-03
JS3D
Three.js 實現2022冬奧主題3D趣味頁面 ?
2022-02-03
JS3D
Squirrel狀態機-從原理探究到最佳實踐
2023-01-28
UI
探究客戶關係管理的重要性及實踐方法
2023-04-14
使用three.js載入.obj格式的3d檔案
2020-11-26
JSOBJ3D
探究《畫中世界》創作始末
2021-07-21
3D遊戲：五、與遊戲世界互動
2020-10-27
3D遊戲
ChatGPT的探索與實踐
2023-09-21
ChatGPT
OceanBase 的探索與實踐
2024-12-05
實踐篇 -- Redis客戶端快取在SpringBoot應用的探究
2021-10-12
Redis客戶端快取Spring Boot
Three.js中載入和渲染3D Tiles
2024-03-20
JS3D
WiFiAp探究實錄--功能實現與原始碼分析
2024-08-04
WiFi原始碼
基於three.js的3D炫酷元素週期表
2019-03-12
JS3D
three.js實現數字孿生3D倉庫一期（開源）
2024-04-22
JS3D
開源實踐 | 攜程在OceanBase的探索與實踐
2022-01-06
開源實踐 | 攜程在 OceanBase 的探索與實踐
2022-01-09
volatile的語義與實踐
2020-10-20
Three.js進階篇之7 - 3D宇宙特效
2018-03-15
JS3D特效
抖音世界盃的畫質最佳化實踐
2023-02-23
Rhinoceros 8：塑造真實世界的3D建模軟體 mac/win版
2023-12-05
ROS3DMac
threeJs構建3D世界
2023-01-22
JS3D
啟用資料價值，探究DataOps下的資料架構及其實踐
2022-10-26
架構
Redis核心原理與實踐--事務實踐與原始碼分析
2021-11-10
Redis原始碼
世界經濟論壇：數字孿生城市框架與全球實踐報告
2022-04-27
框架

3D世界-Three.js的探究與實踐

專案需求

3D世界的初認識

建立一個場景

3D世界的深層瞭解

四面體的實現嘗試一(引入模型法)

實現方法

構建創景及場景引數設定

場中輔助線、控制器及環境光的設定

載入模型

渲染模型

四面體的實現嘗試二（幾何四面體實現）

構件場景並設定基本引數

座標線、控制器及環境光的增加

建立四面體模型，並設定材質

增加渲染器和輔助線

四面體的實現嘗試三（頂點構造法）

構建場景

增加控制器、環境光及座標輔助線，事件處理外掛的初始化

建立四面體的每個頂點及構造四個面

為四面體每個面設定貼圖

建立四面體併為其增加輔助線

為四面體增加各面的法線點

把四面體和法線點放到同一個組中

監聽當前正對到那個面

給四面體增加事件

增加渲染器讓四面體旋轉起來

粒子背景的實現

構建場景

增加光源

建立星空點

渲染場景

參考連結

相關文章