????????這十年來 web 得到了快速的發(fā)展，隨著 webgl 的普及，網(wǎng)頁的表現(xiàn)能力越來越強大，網(wǎng)頁上已經(jīng)開始可以做出很多復雜的動畫和精美的效果，還可以通過 webgl 在網(wǎng)頁中繪制高性能的3d圖形，別的不說，凡是入門程序員都離不開github這個網(wǎng)站，細心的人都會發(fā)現(xiàn)，github首頁就使用了3d可視化技術(shù)，如下：
對于網(wǎng)站而言，web 3d 技術(shù)應用，實現(xiàn)了企業(yè)網(wǎng)站的三維呈現(xiàn)，讓企業(yè)形象更加直觀更立體的展現(xiàn)給客戶，打破傳統(tǒng)平面展示模式，而傳統(tǒng)的3d技術(shù)shader直接讓前端開發(fā)者去挑戰(zhàn)的話其實是有難度的，因為其和前端真的就是兩種不一樣的東西，由此適配前端開發(fā)者使用3d技術(shù)的three.js應運而生，讓前端開發(fā)者掌握3d技術(shù)不再是夢，接下來本專欄將詳細介紹three.js的詳細使用，以及相關(guān)項目的展現(xiàn)，關(guān)注博主訂閱專欄，讓學習之路不再迷茫。
目錄
初識Three.js
Three.js的下載與使用
空間實現(xiàn)3d立方體旋轉(zhuǎn)
空間實現(xiàn)3d立方體移動
空間實現(xiàn)3d立方體縮放與旋轉(zhuǎn)
空間實現(xiàn)3d立方體地面以及陰影效果
初識Three.js
Three.js是瀏覽器調(diào)用電腦渲染模塊的webgl框架，但threejs并不是webgl，webgl本身也有自己非常底層的代碼，這方面就涉及一些3d邏輯了，感興趣的朋友可以自己去了解一下，本專欄將著重講解threejs，講解threejs執(zhí)行的一些webgl的一些功能。
注意：會three.js并不意味著你已經(jīng)非常掌握了3d建模了，這是兩個概念，建模需要的是專業(yè)的建模軟件如：3dmax、rhino、maya、blender等，復雜的項目需要專門的建模師搭建模型，然后交給前端來呈現(xiàn)在網(wǎng)頁上，并不是前端來實現(xiàn)建模，而three.js就是建模師和前端溝通的橋梁，當然threejs也能實現(xiàn)一些簡單的3d效果，但是非常復雜的3d建模還是需要專門的建模師來完成。
Three.js版本問題：Three.js處于飛速發(fā)展之中，過去幾年和現(xiàn)在的Three.js基本上每個月都會發(fā)布一個新的版本，主要是增加一些新的功能，也可能廢棄或更改某些API，去three.js官網(wǎng)下載的three.js默認都是最新版本的，在實際開發(fā)過程中，three.js中的API的使用規(guī)則，一切以你項目中的three.js版本對應的文檔為準。
Three.js的下載與使用
關(guān)注我的人都知道，在很早的之前我就說過，博主不可能會將所有的知識講解全都面面俱到，我個人僅僅是對知識的一個拋磚引玉而言，算是一個引路人，要想了解更加具體的知識，還是推薦大家詳細看看?three.js官方文檔 的講解。如果你想查看three.js的所有版本文檔 推薦網(wǎng)址 ，里面詳細介紹了每個版本新添加的功能以及相關(guān)的使用方法，下載的話滑到當前版本的最下面，點擊下面的zip進行解壓縮下載即可：
在項目中引入three.js的話，比如說你采用的是Vue+threejs或React+threejs技術(shù)棧，這很簡單啊threejs就是一個js庫，直接通過npm命令行安裝就行， 注意：使用哪個版本的threejs，查文檔就查對應的版本。安裝方式可參考官方文檔，如下：
如果你是正式項目的話一定是選擇npm安裝而不是使用CDN，官方雖然推薦我們使用webpack，但是我個人還是選擇使用vite來使用，因為其打包的速度更快效率高一點，不過這個還是看個人選擇，接下來我將使用vite來創(chuàng)建react項目，不知道如何使用vite來創(chuàng)建項目的可以參考我之間寫的文章：超詳細教程——vite腳手架的搭建與使用 。
入門three.js的第一步就是認識場景Scene、相機Camera、渲染器Renderer三個基本概念
三維場景Scene：理解為虛擬的3D場景，用來表示模擬生活中的真實三維場景或三維世界
透視相機Camera：模擬人眼所看到的景象，是3D場景的渲染中使用得最普遍的投影模式。
渲染器Renderer：用WebGL渲染出精心制作的場景。
空間實現(xiàn)3d立方體旋轉(zhuǎn)
接下來實現(xiàn)個小Demo，我使用的是React+Vite，代碼如下：
import * as THREE from 'three';
// 1.創(chuàng)建場景
const scene = new THREE.Scene();
// 2.創(chuàng)建相機
const camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000)
// 設置x、y、z軸坐標，即設置相機位置
camera.position.set(0,0,10)
// 將相機添加到場景之中
scene.add(camera)
// 3.添加物體，創(chuàng)建幾何體
const cubeGeometry = new THREE.BoxGeometry(1,1,1) // 設置幾何體大小
const cubeMaterial = new THREE.MeshBasicMaterial({color:0xffff00}) // 設置幾何體材質(zhì)
// 根據(jù)幾何體和材質(zhì)創(chuàng)建物體
const cube = new THREE.Mesh(cubeGeometry,cubeMaterial)
// 將幾何體添加到場景之中
scene.add(cube)
// 4.初始化渲染器
const renderer = new THREE.WebGLRenderer()
// 設置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight)
// 將webgl渲染的canvas內(nèi)容添加到body上
document.body.appendChild(renderer.domElement)
// 使用渲染器，通過相機將場景渲染出來
export const result = renderer.render(scene,camera)import { result } from "./three/three1"
import './App.css'
const App = () => {
return (
<div className="container">
{result}
</div>
)
}
export default App
因為React的渲染機制，不建議將three.js代碼直接寫在函數(shù)式組件中，而是要單獨封裝在一個js文件中，通過按需導入導出即可，結(jié)果如下：
接下來我們需要導入 軌道控制器，目的是通過控制器查看3d物體。就相當于拿著我們定義好的相機，圍繞著我們定義的物體360度旋轉(zhuǎn)的去觀看，如下：
import * as THREE from 'three';
// 導入軌道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
// 1.創(chuàng)建場景
const scene = new THREE.Scene();
// 2.創(chuàng)建相機
const camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000)
// 設置x、y、z軸坐標，即設置相機位置
camera.position.set(0,0,10)
// 將相機添加到場景之中
scene.add(camera)
// 3.添加物體，創(chuàng)建幾何體
const cubeGeometry = new THREE.BoxGeometry(1,1,1) // 設置幾何體大小
const cubeMaterial = new THREE.MeshBasicMaterial({color:0xffff00}) // 設置幾何體材質(zhì)
// 根據(jù)幾何體和材質(zhì)創(chuàng)建物體
const cube = new THREE.Mesh(cubeGeometry,cubeMaterial)
// 將幾何體添加到場景之中
scene.add(cube)
// 4.初始化渲染器
const renderer = new THREE.WebGLRenderer()
// 設置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight)
// 將webgl渲染的canvas內(nèi)容添加到body上
document.body.appendChild(renderer.domElement)
// // 使用渲染器，通過相機將場景渲染出來
// export const result = renderer.render(scene,camera)
// 創(chuàng)建軌道控制器
new OrbitControls(camera,renderer.domElement)
export function render(){
renderer.render(scene,camera)
// 接下來渲染下一幀的時候就會調(diào)用render函數(shù)
requestAnimationFrame(render)
}
// 先開始就渲染一下
render()在App中調(diào)用我們導出的這個render函數(shù)，如下：
接下來可以給這個立方體添加坐標軸輔助線，讓其可以更具體的展示給我們，設置輔助線的話可以參考一下官網(wǎng)給我們提供的函數(shù)：AxesHelper 。
空間實現(xiàn)3d立方體移動
承接上文立方體的樣式，接下來實現(xiàn)3d立方體的移動，實現(xiàn)移動的話可以使用position的set方法，來改變空間物體的向量值，如下：
當然我們也可以在每次渲染其函數(shù)的地方，設置一下每次渲染加一點位置，超過一定距離從零開始，這樣也能實現(xiàn)一下立方體移動的效果，如下：
空間實現(xiàn)3d立方體縮放與旋轉(zhuǎn)
實現(xiàn)物體的縮放與旋轉(zhuǎn)可以通過操作，然后 .set 進行設置數(shù)值，如下：
空間實現(xiàn)3d立方體地面以及陰影效果
實現(xiàn)生成平面幾何的類的方法如下：
給出代碼如下：
首先我們先設置光源，然后設置陰影效果并將其加到場景當中，如下：
文章來源：http://www.zghlxwxcb.cn/news/detail-427163.html
本篇文章算是three.js的啟蒙篇，對于基礎不是很好的人可能看的比較吃力，后面我盡量每個案例都寫的詳細一點，希望大家都能看懂學會，每次寫完后，我都會將文章寫的three.js代碼都共享出來，歡迎大家學習！如果大家覺得不錯的話，可以給博主一鍵三聯(lián)，您的支持就是博主創(chuàng)作的最大動力。文章來源地址http://www.zghlxwxcb.cn/news/detail-427163.html
import * as THREE from 'three';
// 導入軌道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
// 1.創(chuàng)建場景
const scene = new THREE.Scene();
// 2.創(chuàng)建相機
const camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000)
// 設置x、y、z軸坐標，即設置相機位置
camera.position.set(0,0,10)
// 將相機添加到場景之中
scene.add(camera)
// 3.添加物體，創(chuàng)建幾何體
const cubeGeometry = new THREE.BoxGeometry(1,1,1) // 設置幾何體大小
const cubeMaterial = new THREE.MeshLambertMaterial({color:0xff0000}) // 設置幾何體材質(zhì)
// 根據(jù)幾何體和材質(zhì)創(chuàng)建物體
const cube = new THREE.Mesh(cubeGeometry,cubeMaterial)
// 修改物體的位置
// cube.position.set(5,0,0)
cube.position.y = 1.5
// 實現(xiàn)物體的縮放
cube.scale.set(3,2,1) // x、y、z軸的縮放倍數(shù)
// Math.PI是180度，rotation也是以x、y、z進行設置
cube.rotation.set(Math.PI / 4,0,0,"XYZ")
cube.castShadow = true
// 將幾何體添加到場景之中
scene.add(cube)
// 4.初始化渲染器
const renderer = new THREE.WebGLRenderer()
// 設置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight)
// 渲染陰影
renderer.shadowMap.enabled = true
// 將webgl渲染的canvas內(nèi)容添加到body上
document.body.appendChild(renderer.domElement)
// // 使用渲染器，通過相機將場景渲染出來
// export const result = renderer.render(scene,camera)
// 創(chuàng)建地面網(wǎng)格參照
const planeGeometry = new THREE.PlaneGeometry(30,30) // 平面幾何的寬高
const PlaneMateial = new THREE.MeshLambertMaterial({color:0xF8F8FF}) // 幾何平面的顏色
const plane = new THREE.Mesh(planeGeometry,PlaneMateial)
plane.rotation.x = -0.5*Math.PI
plane.position.set(0,0,0)
plane.receiveShadow = true
scene.add(plane)
// 設置光源投影
const ambienLight = new THREE.AmbientLight(0xAAAAA)
scene.add(ambienLight)
// 設置光源
const spotLight = new THREE.SpotLight(0xFFFFFF) // 設置聚光燈
spotLight.position.set(-60,40,-65)
spotLight.castShadow = true //讓聚光燈產(chǎn)生陰影
// 下面三行代碼設置陰影效果
spotLight.shadow.mapSize = new THREE.Vector2(1024,1024)
spotLight.shadow.camera.far = 130
spotLight.shadow.camera.near = 40
// 將陰影添加到場景中
scene.add(spotLight)
// 創(chuàng)建軌道控制器
new OrbitControls(camera,renderer.domElement)
// 添加坐標軸輔助器
const axesHelper = new THREE.AxesHelper(5) // 數(shù)值代表線的長度
scene.add(axesHelper) // 添加到場景之中
export function render(){
cube.position.x +=0.01
cube.rotation.x +=0.01
if(cube.position.x>5){
cube.position.x = 0
}
renderer.render(scene,camera)
// 接下來渲染下一幀的時候就會調(diào)用render函數(shù)
requestAnimationFrame(render)
}
// 先開始就渲染一下
render()到了這里，關(guān)于Three.js--》前端開發(fā)者掌握3d技術(shù)不再是夢，初識threejs的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
