利用three.js畫一個(gè)3D立體的正方體示例代碼

簡(jiǎn)介

站在用戶的角度思考問題，與客戶深入溝通，找到惠城網(wǎng)站設(shè)計(jì)與惠城網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：網(wǎng)站設(shè)計(jì)制作、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、主機(jī)域名、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋惠城地區(qū)。

three.js 是一款WebGL框架，WebGL可以讓我們?cè)赾anvas上實(shí)現(xiàn)3D效果。實(shí)現(xiàn)3D效果在國(guó)內(nèi)來說還算是比較新的東西，可供查閱的資料也不多。這篇文章僅是一個(gè)入門篇，介紹如何繪制一個(gè)3D正方體。

Three.js中的基本概念

Three.js包含3個(gè)基本概念：場(chǎng)景（Scene）、相機(jī)（Camera）和渲染器（Renderer）。

場(chǎng)景就是需要繪制的對(duì)象，相機(jī)代表取景的視角，渲染器是繪制的載體（可以掛靠到瀏覽器的DOM元素中），

也就是我們通過相機(jī)拍攝場(chǎng)景然后繪制到目標(biāo)介質(zhì)中去。

創(chuàng)建場(chǎng)景、相機(jī)和渲染器

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 );

上述代碼首先創(chuàng)建一個(gè)場(chǎng)景，然后創(chuàng)建一個(gè)PerspectiveCamera（立體感的相機(jī)），接著創(chuàng)建了一個(gè)WebGL的渲染器（注意Three.js也支持非3D的Canvas 2D的渲染器），然后掛靠為HTML文檔body的DOM子元素。

介紹完畢，首先奉上實(shí)現(xiàn)的效果圖：

利用three.js畫一個(gè)3D立體的正方體示例代碼
這就是實(shí)現(xiàn)的效果圖，還是挺有立體感的吧？

繪制前的準(zhǔn)備

寫代碼前，要先下載最新的three.js框架包，引入自己的頁面。

具體實(shí)現(xiàn)過程

準(zhǔn)備一個(gè)canvas畫布

這個(gè)畫布是我們展現(xiàn)整個(gè)3D正方形的畫布，也就是上圖那個(gè)黑色的方框。

<!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 相機(jī)</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>

明確繪制思路

接下來的繪制過程會(huì)涉及到多個(gè)概念：canvas、scene、camera、renderer。

為了能更好理解繪制過程的代碼和有助于記憶，我們先來理解這幾個(gè)概念：

假設(shè)我們現(xiàn)在正在旅游的途中，看到了一個(gè)很唯美的畫面，想把這個(gè)3D世界記錄下來

這個(gè)唯美的場(chǎng)景就是scene，我們用相機(jī)camera拍攝下來形成照片
為了能看清楚這個(gè)照片，我們把這個(gè)照片放置在一個(gè)畫布canvas上
最后，我們?cè)儆胷enderer修飾渲染一下

這樣，我們就能成功展現(xiàn)這個(gè)3D世界了。

【程序還是很貼近生活噠😊】

通過現(xiàn)實(shí)世界的理解，我們接下來開始代碼啦o(￣▽￣)ブ

準(zhǔn)備好canvas、scene、camera、renderer，給一個(gè)初始化的方法

<script>
var camera, scene, renderer, canvas;
init();
function init () {
 canvas = document.getElementById('canvas');
}

接下來我們要做的就是完善這個(gè)init()方法啦。

創(chuàng)建一個(gè)3D場(chǎng)景scene

場(chǎng)景最簡(jiǎn)單了，只需要用Scene聲明一個(gè)scene對(duì)象。

scene = new THREE.Scene();

準(zhǔn)備好camera

我們這里設(shè)置的相機(jī)是一個(gè)透視的相機(jī)PerspectiveCamera

camera有四個(gè)參數(shù)

第一個(gè)參數(shù)是視線輻射的角度，這個(gè)參數(shù)越大，我們能看到的視覺越廣，這個(gè)物體看上去會(huì)更小。
第二個(gè)參數(shù)是圖像內(nèi)容展示的比例：width/height。我們一般把這個(gè)比例設(shè)置為和畫布的比例一樣，這樣看到的圖片才不會(huì)變形。
第三四個(gè)參數(shù)分別是相機(jī)離展示內(nèi)容（正方體）最近的距離和最遠(yuǎn)的距離。

camera = new THREE.PerspectiveCamera(45, 400/300, 1, 10);

接下來給camera設(shè)置擺放的位置，并把camera放到場(chǎng)景scene中

由于我們的世界是3D的，camera的擺放位置也是三維的，涉及三個(gè)參數(shù)：X軸、Y軸、Z軸。(0, 0, 0)是相機(jī)的原點(diǎn)，(1, 1, 5)就是把我們的相機(jī)往右和往上移動(dòng)了1個(gè)單位，往后移動(dòng)了5個(gè)單位。

ps:這個(gè)時(shí)候畫布canvas的大小正好是正方體的5倍。

camera.position.set(1, 1, 5);
scene.add(camera);

在場(chǎng)景中添加一個(gè)立方體

每個(gè)形狀都是一個(gè)mesh，geometry可以理解為物體的骨骼， material可以理解為物體的皮囊

再創(chuàng)建一個(gè)可填充的形狀cube

這樣就構(gòu)成了完整的實(shí)物

我們?cè)賹⑦@個(gè)形狀放入場(chǎng)景scene中

CubeGeometry參數(shù)設(shè)置為1：1：1表示這是一個(gè)正方體，當(dāng)然可以自行修改比例，變成不一樣的立方體

var geometry = new THREE.CubeGeometry(1, 1, 1);
// 添加three自帶的最簡(jiǎn)單的一種材質(zhì)
var material = new THREE.MeshBasicMaterial({
 color: 0xff0000,
});
var cube = new THREE.Mesh(geometry, material); 
var cube = new THREE.Mesh(geometry, material);

最后，創(chuàng)建renderer對(duì)圖像進(jìn)行渲染

將canvas交給renderer，也就是一個(gè)渲染的容器

antialias: true 平滑，抗鋸齒，輸出的畫面會(huì)進(jìn)行優(yōu)化，不會(huì)帶毛邊

renderer = new THREE.WebGLRenderer({
 canvas: canvas,
 antialias: true
});
// 設(shè)置renderer的樣式
renderer.setSize(canvas.width, canvas.height);
renderer.render(scene, camera);

經(jīng)過以上步驟，我們的的正方體就成功創(chuàng)建好了。

利用three.js畫一個(gè)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 相機(jī)</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 是一個(gè)可以填充的形狀
 var cube = new THREE.Mesh(geometry, material);
 scene.add(cube);

 renderer = new THREE.WebGLRenderer({
 // 將canvas交給renderer 一個(gè)渲染的容器
 canvas: canvas,
 // 平滑， 抗鋸齒 輸出的畫面會(huì)進(jìn)行優(yōu)化，不會(huì)帶毛邊
 antialias: true
 });
 // 設(shè)置renderer的樣子
 renderer.setSize(canvas.width, canvas.height);
 renderer.render(scene, camera);
 }
 </script>
</body>
</html>

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)創(chuàng)新互聯(lián)的支持。

分享文章：利用three.js畫一個(gè)3D立體的正方體示例代碼
文章鏈接：http://aaarwkj.com/article10/iggido.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、關(guān)鍵詞優(yōu)化、定制網(wǎng)站、域名注冊(cè)、外貿(mào)網(wǎng)站建設(shè)、

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

利用three.js畫一個(gè)3D立體的正方體示例代碼