JavaScript >> Javascript 文檔 >  >> Tags >> Three.js

如何輕鬆開始使用 ThreeJS - 第 1 部分

嗨,伙計們,希望你們一切都好! :)

最近,我在 Twitter 上看到了一段預告視頻:這是一篇 @prismicio 帖子,是對偉大的 @brunosimon 的採訪。在採訪中,他解釋瞭如何使用 ThreeJS 來增強具有 3D 元素的網站。

這是對該推文的引用:

這次採訪和 Bruno 解釋 ThreeJS 概念的熱情給了我很多啟發,所以我決定開始深入這個新的虛擬世界。

我將嘗試以最簡單、更清晰的方式進行回顧和解釋。
我向你保證,在大約 30 行代碼中,你將創建你的第一個工作 3D 元素(在文章末尾回顧)。

項目設置

第一步是創建一個新的index.html 文件應如下所示:

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1"/>
    <link rel="stylesheet" href="css/styles.css"/>
    <title>My first ThreeJS demo app</title>
  </head>
  <body>
    <script src="js/script.js" type="module"></script>
  </body>
</html>

然後我們應該在我們的 index.html 中添加兩個“鏈接”的外部文件 文件:我們創建 styles.cssscript.js 文件,我們將它們分別放在 css 中 和 js 文件夾。

現在是時候為我們的項目配置初始化我們的包管理器了,所以我們啟動一個

我的默認包管理器是 NPM,但您顯然可以使用 Yarn。

Three.js 安裝設置

為了開始使用 Three.js,我們應該安裝它。我們可以通過打開終端並啟動來做到這一點:

然後,在 script.js 裡面 我們可以使用以下行導入三:

import * as THREE from "three";

現在我們已經導入了它,我們可以開始使用它了。

首先要知道的是,一旦安裝了 Three,我們就可以訪問一個非常具體的變量,即“THREE”。通過記錄它,我們已經可以看到我們可以訪問這個庫支持的很多東西:

console.log(THREE);

如何添加場景、相機和縱橫比

我們需要從三件事開始:第一件事是場景 ,就像電影場景一樣。在場景中,您將添加 objects (可能是字符)和一個相機 .

首先我們創建一個空的場景

const scene = new THREE.Scene();

在場景裡面我們說我們需要添加一個camera .
在這裡有必要知道 Three.js 中存在各種類型的相機(在文檔中查看此處以獲取更多信息)。
我們將使用的是 PerspectiveCamera ,它模仿人眼看到的方式,就像一個現實生活中的相機:離你越近,你看到的越大。

要創建相機,我們需要添加:

const camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight);

相機需要一些選項作為參數:

  • 第一個選項是FOV(視野) 並且旨在作為度數。我們可能會選擇 180 度的開角或 30 度的非常近的角度,例如照片鏡頭。
    根據 Bruno 的經驗,他建議保持在 40 度到最大 70 度的範圍內,因此我們將使用 55 度的角度。

  • 第二個必需選項是縱橫比 :因為我們想要覆蓋頁面的整個背景,我們將插入視口的寬度和高度,在 JS 中我們可以使用 window.innerWidth 檢索這些尺寸 和 window.innerHeight .
    TL/DR:縱橫比就是寬度除以高度。

Three.js 要理解的一件事是,無論我們想要包含什麼對象,我們都必須將它添加到場景中,在這個階段我們已經可以通過鍵入以下內容來添加我們的相機:

scene.add(camera);

向場景添加網格

有了這第一篇文章(是的,這將是一個小系列 😉),我們將在場景中添加一個立方體。
立方體是我們可以看到的對象,在 Three.js 中,我們可以看到的對象稱為 mesh .

網格由兩部分組成:它的幾何形狀 組成一個幾何體,比如一個立方體的頂點數)和一個材質 ,這就是幾何體在場景中渲染時的外觀。

我們需要首先創建我們的幾何體,因為我們想要一個立方體,我們將使用它的相關類,“BoxGeometry”:

const geometry = new THREE.BoxGeometry(1, 1, 1);

此類一旦收到所需的參數,即 width,就會自動知道它應該創建立方體點 , 高度深度 (參考文檔)。

現在是時候添加我們的立方體在渲染時將使用的材質了。對於第一個實驗,我們希望我們的立方體完全是紅色的。所以我們添加以下內容:

const material = new THREE.MeshBasicMaterial({color: 0xff0000});

文檔中提供了“MeshBasicMaterial”類和所有可用的網格和幾何類以及大量示例。作為參數,我們傳入了一種顏色。

顏色參數可以通過多種方式指定:

  • 作為字符串('red');
  • 作為十六進制 (#FF0000);
  • 以 16 為基數的十六進制 (0xff0000)。

此時我們有了幾何體和材質,因此我們可以繼續將它們混合在一個網格中並將其添加到場景中:

const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

渲染場景

終於可以看看我們的立方體了!

我們使用最常見的 WebGL 渲染器“WebGLRenderer”聲明渲染器:

const renderer = new THREE.WebGLRenderer();

我們的渲染器需要知道一個大小,正如我們之前所說,我們希望我們的場景佔據整個視口寬度。所以我們可以告訴渲染器:

renderer.setSize(window.innerWidth, window.innerHeight);

為了看到我們的場景,我們現在需要在 canvas 內進行繪製 🎨。
查看我們的渲染器變量,我們可以注意到我們的畫布包含在 domElement 中 財產。
如果我們記錄它,我們可以看到我們的畫布:

console.log(renderer.domElement);

此時,我們將讓 ThreeJS 創建我們的畫布並將其附加到 <body> 中 頁面的;我們可以通過添加以下行來做到這一點:

document.body.appendChild(renderer.domElement);

檢查我們的 DOM,我們現在應該看到我們的 <canvas> <body> 中添加的元素 .

作為渲染器的最後一步,我們現在必須告訴它在頁面內渲染畫布。它需要場景 (我們應該在其中添加 所有必要的元素)和相機 .

renderer.render(scene, camera)

但是等一下。
為什麼我們還看不到立方體?

固定相機並旋轉立方體

上一個問題的答案與相機位置有關 .
我們仍然看不到立方體,因為我們在立方體內 .

你現在可能想知道:既然立方體是紅色的,我不應該看到我周圍的一切都是紅色的嗎?
答案是否定的:默認情況下,我們看不到幾何的“內部”。我們可以看到臉,但看不到它的反面。

所以,既然我們知道了上面的內容,我們應該將相機位置移到外面 多維數據集。向上移動我們定義相機變量的位置,我們在該行下方添加以下內容:

camera.position.z = 3

為了將相機向後移動 ,我們需要處理Z 軸。
完成後,我們終於可以看到我們的立方體了:

我們還可以通過編輯 x 上的位置來將相機位置移動到左/右或上/下 和 軸(即:對於我們的最終演示,我們會將對象向右移動一點,以便我們可以在左側為標題、段落和可能的 CTA 保留空間)。

由於使用這些設置,我們的對像是平面的,它似乎不是一個真正的立方體。我們可以旋轉立方體以查看一些角度。

要進行旋轉,我們只需要處理我們的網格對象。
正如布魯諾所說,為了水平移動它,我們必須考慮在 y 軸上放置一個尖峰,所以在我們的網格聲明行下,我們將添加:

mesh.rotation.y = 0.5

回顧

我在這裡留下了完整的 script.js 代碼塊,以便您更好地查看它:

// script.js
import * as THREE from "three";

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight);
camera.position.z = 3;
scene.add(camera);

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const mesh = new THREE.Mesh(geometry, material);
mesh.rotation.y = 0.5;
scene.add(mesh);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.render( scene, camera );

document.body.appendChild(renderer.domElement);

我們終於可以在頁面上看到我們的 3D 立方體,我們可以調整它的位置、旋轉和顏色。

在接下來的文章中(即將在接下來的幾天內發布),我們將動畫 立方體,我們將看到如何改變它的幾何形狀和材質,我們還將看到如何使畫布響應式 .
我們還將添加一些流暢的動畫和一些很酷的與我們的對象的小交互。

我們將實現的最終結果已在此演示鏈接中可見:
👉🏼 https://th3wall-threejs.netlify.app

我希望你已經學到了一些東西,我希望你覺得這篇文章很有趣。

請在 Twitter、GitHub 和 Hashnode 上關注我。
喜歡就告訴我吧!

謝謝。
牆體


上一篇
Tutorial JavaScript 教程
  1. 是否可以在 Vue.js 中使用 python 腳本?

  2. 深入了解 JavaScript 事件循環

  3. 使用 React 片段、門戶和 Refs

  4. 使用逗號運算符讓塊返回最後一條語句

  5. 選擇 node.js 數據庫

  6. 如何使用 Chakra UI 啟用從右到左 (RTL) 支持

  7. 在 3 分鐘內生成 LitElement 項目的最快方法

  1. parseInt() 和 Number() 有什麼區別?

  2. 如何在 jQuery 和 JavaScript 中檢查復選框是否被選中

  3. 動態添加文本到 SVG 路徑

  4. 我第二次當警長的經歷

  5. 常見問題的有用 JavaScript 代碼片段😎

  6. 打字稿:不可分配給類型錯誤

  7. 驗證 CSS 顏色名稱

  1. 鑽頭還是沒有鑽頭?在 TensorFlow 中構建文本分類器

  2. 使用 lerna 和 yarn 工作區管理 monorepos

  3. 學習如何使用 React Router v6

  4. 收集數據以繪製房價地圖