three.js 項目搭建（一）——實現一個3D大西瓜

語言: CN / TW / HK
時間 2022-10-10 02:15:16

用到的庫：

創建項目

此處通過React腳手架快速創建一個項目（本篇文章並非主要介紹React，故此處快速開始，不做過多描述，不瞭解的小夥伴可以查看React官方文檔） npx create-react-app tree-test

開始搭建

創建場景

相機、幾何體等都需要添加至場景中

```js import * as THREE from 'three';

// 創建場景 const scene = new THREE.Scene(); ```

創建相機

js // PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number ) // fov — 攝像機視錐體垂直視野角度 // aspect — 攝像機視錐體長寬比 // near — 攝像機視錐體近端面 // far — 攝像機視錐體遠端面 const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); // 設置相機位置 camera.position.set(0, 0, 10); // 添加至場景中 scene.add(camera);

添加座標軸輔助器

js // 添加座標軸輔助器 const axesHelper = new THREE.AxesHelper(5); scene.add(axesHelper);

添加物體

使用three.js提供的幾何體

js // 添加物體 // BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer) // width — X軸上面的寬度，默認值為1。 // height — Y軸上面的高度，默認值為1。 // depth — Z軸上面的深度，默認值為1。 // widthSegments — （可選）寬度的分段數，默認值是1。 // heightSegments — （可選）高度的分段數，默認值是1。 // depthSegments — （可選）深度的分段數，默認值是1。 const geometry = new THREE.BoxGeometry(1, 1, 1); // 基礎網格材質 const material = new THREE.MeshBasicMaterial({ color: 0x43ad7f1f }); // 根據幾何體和材質創建物體 const cube = new THREE.Mesh(geometry, material); // 添加至場景中 scene.add(cube); 在圖形學中，任何物體都可以由若干個三角形拼接形成，所以我們也可以通過自己繪製三角形拼接形成圖形

js const geometry = new THREE.BufferGeometry(); // 拼成一個矩形至少需要兩個三角形，6個點，每個點三個座標，共18個座標 const vertices = new Float32Array([ -1.1, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.1, -1.0, 1.0, ]); // BufferAttribute // .array : TypedArray // 在 array 中保存着緩存中的數據。 // .count : Integer // 保存 array 除以 itemSize 之後的大小。 geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3)); const material = new THREE.MeshBasicMaterial({ color: 0x43ad7f1f }); material.wireframe = true; const mesh = new THREE.Mesh(geometry, material); scene.add(mesh); 效果如圖：

image.png

若material.wireframe = false;後，圖形的前後是有差別的： 從z軸正方向查看： image.png 從z軸負方向查看： image.png

更進一步，我們生成隨機半透明的幾何圖形

js // 添加物體 for (let i = 0; i < 50; i++) { // 每個三角形需要三個頂點，每個頂點需要三個值 const geometry = new THREE.BufferGeometry(); // 注意：此處new Float32Array時一定要傳入參數，否則圖形不會顯示 const positionArray = new Float32Array(9); for (let j = 0; j < 9; j++) { positionArray[j] = Math.random() * 10 - 5; } geometry.setAttribute( 'position', new THREE.BufferAttribute(positionArray, 3) ); let color = new THREE.Color(Math.random(), Math.random(), Math.random()); // 注意：此處一定要設置transparent=true後再設置opacity const material = new THREE.MeshBasicMaterial({ color, transparent: true, opacity: 0.5, }); const mesh = new THREE.Mesh(geometry, material); // material.wireframe = true; scene.add(mesh); } 效果：

image.png

初始化渲染器及軌道

```js // 初始化渲染器 const renderer = new THREE.WebGLRenderer(); // 設置渲染的尺寸大小 renderer.setSize(window.innerWidth, window.innerHeight); // 創建軌道控制器 // OrbitControls( object : Camera, domElement : HTMLDOMElement ) // object: （必須）將要被控制的相機。該相機不允許是其他任何對象的子級，除非該對象是場景自身。

// domElement: 用於事件監聽的HTML元素。 const controls = new OrbitControls(camera, renderer.domElement); // 為控制器設置阻尼，讓控制器有真實的效果 controls.enableDamping = true; ```

渲染

本demo採用React Hook，📢注意renderer.domElement並非React認識的元素，所以需要採用JS原生方式添加子元素（或許是我不知道，很高興有大佬評論告知其他添加到頁面上的寫法）

js useEffect(() => { const app = document.getElementById('App'); app?.appendChild(renderer.domElement); // 使用渲染器，通過相機將場景渲染進來 render(); }); const render = () => { controls.update(); renderer.render(scene, camera); // 此處採用動畫是為了響應軌道滑行變換 requestAnimationFrame(render); };

動畫

此處簡單做了個動畫示例，更復雜的動畫可以查看gsap js // 設置動畫 gsap.to(cube.position, { x: 5, duration: 5 });

GUI工具的使用

```js import * as dat from 'dat.gui';

// 實例化可視化GUI工具 可以通過按 H 鍵隱藏GUI面板 const gui = new dat.GUI(); //可傳遞參數{ closed:true ,width:400 } // gui.hide() //隱藏GUI面板，可通過按兩次 H鍵開啟顯示

// 往GUI面板添加要顯示的對象的參數 // 參數一:對象;參數二:要調整的對象屬性;參數三:最小值;參數四:最大值;參數五:調整精度 // 添加配置 cube y 軸座標 gui.add(cube.position, 'y', -3, 3, 0.01); // 添加配置 cube 是否可見 gui.add(cube, 'visible');

const params = { color: '#ffff00', fn: () => { gsap.to(cube.position, { z: 5, duration: 2, yoyo: true, repeat: -1 }); }, }; // 添加一個色盤，顏色改變時改變cube的顏色 gui.addColor(params, 'color').onChange(value => { cube.material.color.set(value); }); // 添加一個名稱為”立方體運動“的設置項，控制是否執行params.fn函數 gui.add(params, 'fn').name('立方體運動'); // 創建一個文件夾，用於存放這些設置 const folder = gui.addFolder('設置立方體'); // 設置 cube 是否顯示線框 folder.add(cube.material, 'wireframe'); ``` 上述配置之後效果如下圖👇🏻

image.png

完整代碼

```js //app.js

import React, { useEffect } from 'react'; import * as THREE from 'three'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'; import gsap from 'gsap'; import * as dat from 'dat.gui'; // 實例化可視化GUI工具 可以通過按 H 鍵隱藏GUI面板 const gui = new dat.GUI(); //可傳遞參數{ closed:true ,width:400 } // gui.hide() //隱藏GUI面板，可通過按兩次 H鍵開啟顯示

function App() { // 創建場景 const scene = new THREE.Scene();

// PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number ) // fov — 攝像機視錐體垂直視野角度 // aspect — 攝像機視錐體長寬比 // near — 攝像機視錐體近端面 // far — 攝像機視錐體遠端面 const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); // 設置相機位置 camera.position.set(0, 0, 10); scene.add(camera);

// 添加物體 // BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer) // width — X軸上面的寬度，默認值為1。 // height — Y軸上面的高度，默認值為1。 // depth — Z軸上面的深度，默認值為1。 // widthSegments — （可選）寬度的分段數，默認值是1。 // heightSegments — （可選）高度的分段數，默認值是1。 // depthSegments — （可選）深度的分段數，默認值是1。 const geometry = new THREE.BoxGeometry(1, 1, 1); // 基礎網格材質 const material = new THREE.MeshBasicMaterial({ color: 0x43ad7f1f }); // 根據幾何體和材質創建物體 const cube = new THREE.Mesh(geometry, material); scene.add(cube);

//#region GUI 面板 // 往GUI面板添加要顯示的對象的參數 // 參數一:對象;參數二:要調整的對象屬性;參數三:最小值;參數四:最大值;參數五:調整精度 gui.add(cube.position, 'y', -3, 3, 0.01); gui.add(cube, 'visible'); const params = { color: '#ffff00', fn: () => { gsap.to(cube.position, { z: 5, duration: 2, yoyo: true, repeat: -1 }); }, }; gui.addColor(params, 'color').onChange(value => { cube.material.color.set(value); }); gui.add(params, 'fn').name('立方體運動'); const folder = gui.addFolder('設置立方體'); folder.add(cube.material, 'wireframe'); //#endregion

// 初始化渲染器 const renderer = new THREE.WebGLRenderer(); // 設置渲染的尺寸大小 renderer.setSize(window.innerWidth, window.innerHeight); // 創建軌道控制器 // OrbitControls( object : Camera, domElement : HTMLDOMElement ) // object: （必須）將要被控制的相機。該相機不允許是其他任何對象的子級，除非該對象是場景自身。 // domElement: 用於事件監聽的HTML元素。 const controls = new OrbitControls(camera, renderer.domElement); // 為控制器設置阻尼，讓控制器有真實的效果 controls.enableDamping = true;

// 添加座標軸輔助器 const axesHelper = new THREE.AxesHelper(5); scene.add(axesHelper);

// 將webgl渲染的canvas內容添加到頁面上 useEffect(() => { const app = document.getElementById('App'); app?.appendChild(renderer.domElement); // 設置動畫 gsap.to(cube.position, { x: 5, duration: 5 }); // 使用渲染器，通過相機將場景渲染進來 render(); });

window.addEventListener('resize', () => { // 更新攝像頭 camera.aspect = window.innerWidth / window.innerHeight; // 更新攝像機的投影矩陣 camera.updateProjectionMatrix(); // 更新渲染器 renderer.setSize(window.innerWidth, window.innerHeight); // 設置渲染器的像素比 renderer.setPixelRatio(window.devicePixelRatio); }); window.addEventListener('dblclick', () => { const fullScreenElement = document.fullscreenElement; if (fullScreenElement) { document.exitFullscreen(); } else { renderer.domElement.requestFullscreen(); } });

const render = () => { controls.update(); renderer.render(scene, camera); requestAnimationFrame(render); };

return

; }

export default App; ```

效果

image.png

進一步加工

導入紋理

為了讓看到文章的小夥伴也獲得貼圖，我就直接放掘金上傳圖片的url作為示例了 ```js // 導入紋理 new THREE.TextureLoader().load( 'http://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/172a9f6fc326477f9a328e64127bc8ed~tplv-k3u1fbpfcp-watermark.image?', function (texture) { // in this example we create the material when the texture is loaded const material = new THREE.MeshStandardMaterial({ map: texture, // 粗糙程度 roughness: 0.5, }); // 添加物體 const cubeGeometry = new THREE.SphereGeometry(2, 32, 16); const cube = new THREE.Mesh(cubeGeometry, material); scene.add(cube); },

// 目前暫不支持onProgress的回調
undefined,
// onError回調
function (err) {
  console.error('An error happened.', err);
}

); ``` 另外，一些可以獲取貼圖的網站： - http://www.poliigon.com/textures - http://www.arroway-textures.ch/textures - http://quixel.com/bridge

燈光

js // 燈光 // 環境光 const light = new THREE.AmbientLight(0x404040); scene.add(light); // 直線光 const lineLight = new THREE.DirectionalLight(0xffffff); lineLight.position.set(10, 10, 10); scene.add(lineLight);

效果

image.png

題外話

村上春樹説，世界上存在着不能流淚的悲傷，這種悲傷無法向人解釋，它永遠一成不變，如無風夜晚的雪花，靜靜地沉積在心裏，當你雖不認同卻只能無奈的屈服，當你不滿與現狀卻又看不清出路，當你充滿憂慮卻又無力改變，當焦慮變成了每一個異鄉人的家常便飯，我們又該如何去完成這一堂人生的必修課。

「」
「」