three.js畫一個(gè)3D立體的正方體教程

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 20:05:37

three.js畫一個(gè)3D立體的正方體教程

three.js畫一個(gè)3D立體的正方體教程:Three.js是一個(gè)3DJavaScript庫(kù)，基于右手坐標(biāo)系，可以創(chuàng)建簡(jiǎn)單或是比較復(fù)雜的三維圖形并應(yīng)用豐富多彩的紋理和材質(zhì)，可以添加五光十色的光源，可以在3D場(chǎng)景中移動(dòng)物體或是添加腳本動(dòng)畫等等。本文介紹了利用three.js如何畫一個(gè)3D立體的正方體的方法，需要的可

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀three.js畫一個(gè)3D立體的正方體教程:Three.js是一個(gè)3DJavaScript庫(kù)，基于右手坐標(biāo)系，可以創(chuàng)建簡(jiǎn)單或是比較復(fù)雜的三維圖形并應(yīng)用豐富多彩的紋理和材質(zhì)，可以添加五光十色的光源，可以在3D場(chǎng)景中移動(dòng)物體或是添加腳本動(dòng)畫等等。本文介紹了利用three.js如何畫一個(gè)3D立體的正方體的方法，需要的可

Three.js是一個(gè)3DJavaScript庫(kù)，基于右手坐標(biāo)系，可以創(chuàng)建簡(jiǎn)單或是比較復(fù)雜的三維圖形并應(yīng)用豐富多彩的紋理和材質(zhì)，可以添加五光十色的光源，可以在3D場(chǎng)景中移動(dòng)物體或是添加腳本動(dòng)畫等等。本文介紹了利用three.js如何畫一個(gè)3D立體的正方體的方法，需要的可以參考下。

簡(jiǎn)介

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

Three.js中的基本概念

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

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

也就是我們通過(guò)相機(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)的效果圖：

這就是實(shí)現(xiàn)的效果圖，還是挺有立體感的吧？

繪制前的準(zhǔn)備

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

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

準(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>

明確繪制思路

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

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

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

這個(gè)唯美的場(chǎng)景就是scene，我們用相機(jī)camera拍攝下來(lái)形成照片

為了能看清楚這個(gè)照片，我們把這個(gè)照片放置在一個(gè)畫布canvas上

最后，我們?cè)儆胷enderer修飾渲染一下

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

【程序還是很貼近生活噠

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com