three.js入門——畫一個3D正方體

時間 2019-12-04

標籤 three.js 入門一個 3d 正方體欄目 JavaScript 简体版

原文原文鏈接

three.js 是一款WebGL框架，WebGL可讓咱們在canvas上實現3D效果。
實現3D效果在國內來講還算是比較新的東西，可供查閱的資料也很少。
這篇文章僅是一個入門篇，介紹如何繪製一個3D正方體。

介紹完畢，首先奉上實現的效果圖：
javascript

這就是實現的效果圖，仍是挺有立體感的吧？html

繪製前的準備

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

具體實現過程

準備一個canvas畫布

這個畫布是咱們展示整個3D正方形的畫布，也就是上圖那個黑色的方框。canvas

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

這個惟美的場景就是scene，咱們用相機camera拍攝下來造成照片優化
爲了能看清楚這個照片，咱們把這個照片放置在一個畫布canvas上ui
最後，咱們再用renderer修飾渲染一下spa

這樣，咱們就能成功展示這個3D世界了。
【程序仍是很貼近生活噠?】
經過現實世界的理解，咱們接下來開始代碼啦o(￣▽￣)ブcode

準備好canvas、scene、camera、renderer，給一個初始化的方法

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

接下來咱們要作的就是完善這個init()方法啦。

建立一個3D場景scene
場景最簡單了，只須要用Scene聲明一個scene對象。htm

scene = new THREE.Scene();

準備好camera
咱們這裏設置的相機是一個透視的相機PerspectiveCamera
camera有四個參數

第一個參數是視線輻射的角度，這個參數越大，咱們能看到的視覺越廣，這個物體看上去會更小。
第二個參數是圖像內容展現的比例：width/height。咱們通常把這個比例設置爲和畫布的比例同樣，這樣看到的圖片纔不會變形。
第三四個參數分別是相機離展現內容（正方體）最近的距離和最遠的距離。

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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。