實例詳解three.js畫一個3D立體的正方體-js教程-PHP中文網

實例詳解three.js畫一個3D立體的正方體

小云云

發布： 2017-12-19 16:34:12

原創

2882 人瀏覽過

本文將實例詳解three.js畫一個3D立體的立方體，Three.js是一個3DJavaScript庫，基於右手坐標系，可以創建簡單或是比較複雜的三維圖形並應用豐富多彩的紋理和材質，可以加入五光十色的光源，可以在3D場景中移動物體或是加入腳本動畫等等。本文介紹了利用three.js如何畫一個3D立體的立方體的方法，需要的可以參考下。

簡介

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世界記錄下來