溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
簡介
three.js 是一款WebGL框架，WebGL可以讓我們在canvas上實現3D效果。實現3D效果在國內來說還算是比較新的東西，可供查閱的資料也不多。這篇文章僅是一個入門篇，介紹如何繪制一個3D正方體。
Three.js中的基本概念
Three.js包含3個基本概念：場景（Scene）、相機（Camera）和渲染器（Renderer）。
場景就是需要繪制的對象，相機代表取景的視角，渲染器是繪制的載體（可以掛靠到瀏覽器的DOM元素中），
也就是我們通過相機拍攝場景然后繪制到目標介質中去。
創建場景、相機和渲染器
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 );
上述代碼首先創建一個場景，然后創建一個PerspectiveCamera（立體感的相機），接著創建了一個WebGL的渲染器（注意Three.js也支持非3D的Canvas 2D的渲染器），然后掛靠為HTML文檔body的DOM子元素。
介紹完畢，首先奉上實現的效果圖：
這就是實現的效果圖，還是挺有立體感的吧？
繪制前的準備
寫代碼前，要先下載最新的three.js框架包，引入自己的頁面。
具體實現過程
準備一個canvas畫布
這個畫布是我們展現整個3D正方形的畫布，也就是上圖那個黑色的方框。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Camera 相機</title>
<style>
#canvas {
width: 400px;
height: 300px;
border: 1px solid red;
margin: 50px auto;
display:block;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="./libs/three.min.js"></script>
</body>
</html>
明確繪制思路
接下來的繪制過程會涉及到多個概念：canvas、scene、camera、renderer。
為了能更好理解繪制過程的代碼和有助于記憶，我們先來理解這幾個概念：
假設我們現在正在旅游的途中，看到了一個很唯美的畫面，想把這個3D世界記錄下來
這樣，我們就能成功展現這個3D世界了。
【程序還是很貼近生活噠😊】
通過現實世界的理解，我們接下來開始代碼啦o(￣▽￣)ブ
準備好canvas、scene、camera、renderer，給一個初始化的方法
<script>
var camera, scene, renderer, canvas;
init();
function init () {
canvas = document.getElementById('canvas');
}
接下來我們要做的就是完善這個init()方法啦。
創建一個3D場景scene
場景最簡單了，只需要用Scene聲明一個scene對象。
scene = new THREE.Scene();
準備好camera
我們這里設置的相機是一個透視的相機PerspectiveCamera
camera有四個參數
camera = new THREE.PerspectiveCamera(45, 400/300, 1, 10);
接下來給camera設置擺放的位置，并把camera放到場景scene中
由于我們的世界是3D的，camera的擺放位置也是三維的，涉及三個參數：X軸、Y軸、Z軸。(0, 0, 0)是相機的原點，(1, 1, 5)就是把我們的相機往右和往上移動了1個單位，往后移動了5個單位。
ps: 這個時候畫布canvas的大小正好是正方體的5倍。
camera.position.set(1, 1, 5); scene.add(camera);
在場景中添加一個立方體
每個形狀都是一個mesh，geometry可以理解為物體的骨骼， material可以理解為物體的皮囊
再創建一個可填充的形狀cube
這樣就構成了完整的實物
我們再將這個形狀放入場景scene中
CubeGeometry參數設置為1：1：1表示這是一個正方體，當然可以自行修改比例，變成不一樣的立方體
var geometry = new THREE.CubeGeometry(1, 1, 1);
// 添加three自帶的最簡單的一種材質
var material = new THREE.MeshBasicMaterial({
color: 0xff0000,
});
var cube = new THREE.Mesh(geometry, material);
var cube = new THREE.Mesh(geometry, material);
最后，創建renderer對圖像進行渲染
將canvas交給renderer，也就是一個渲染的容器
antialias: true 平滑，抗鋸齒，輸出的畫面會進行優化，不會帶毛邊
renderer = new THREE.WebGLRenderer({
canvas: canvas,
antialias: true
});
// 設置renderer的樣式
renderer.setSize(canvas.width, canvas.height);
renderer.render(scene, camera);
經過以上步驟，我們的的正方體就成功創建好了。
以下是本例完整代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Camera 相機</title>
<style>
#canvas {
width: 400px;
height: 300px;
border: 1px solid red;
margin: 50px auto;
display:block;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="./libs/three.min.js"></script>
<script>
var camera, scene, renderer, canvas;
init();
function init () {
canvas = document.getElementById('canvas');
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, 400/300, 1, 10);
camera.position.set(1, 1, 5);
scene.add(camera);
var geometry = new THREE.CubeGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({
color: 0xff0000,
});
// cube 是一個可以填充的形狀
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
renderer = new THREE.WebGLRenderer({
// 將canvas交給renderer 一個渲染的容器
canvas: canvas,
// 平滑， 抗鋸齒 輸出的畫面會進行優化，不會帶毛邊
antialias: true
});
// 設置renderer的樣子
renderer.setSize(canvas.width, canvas.height);
renderer.render(scene, camera);
}
</script>
</body>
</html>
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
