此文的github及當中示例:piexl.github.io/explore-thr…
專案需求
在開發育空網站時我們需要在頁面內使用四面體，還要增加一些互動和操作，因此使用了3D類庫Three.js也經歷多種波折才實現了我們最終的效果。
需要的實現的互動： 1.四面體自動旋轉； 2.旋轉過程中監聽當前使用者正對那個面 3.四面體點選某個面時跳轉到這個面對應的連結 4.實現粒子背景
3D世界的初認識
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面為例：
其他面的法線點如下圖中（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…