一、three.min.js 多大
three.min.js文件大小約為512KB，是由three.js引擎壓縮而成的最小化版本。
three.min.js是可以自己下載的，也可以從多個不同的外部來源獲取。其中最受歡迎的是CDN(Content Delivery Network，內容分發網路)。
在項目中使用CDN的好處是可以加快頁面載入速度以及減少對所屬伺服器的流量負擔。在three.min.js中使用CDN時，可以直接從CDN網站的鏈接中調用庫文件，而不必將該文件的副本儲存在項目伺服器上。
以下是three.min.js的下載和使用示例:
<!DOCTYPE html>
<html>
<head>
<title>Three.min.js示例</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
<script>
alert(THREE.REVISION); // 在控制台中列印 three.min.js的版本。
</script>
</body>
</html>
二、three.min.js與其他庫的關係
在three.min.js中，包含了許多為三維圖形計算和渲染構建的重要功能。為了展示這些功能，three.min.js還需要依賴其他庫，其中包括：
- stats.js -用於監測渲染幀數和性能瓶頸的JS文件；
- dat.gui -一個小的菜單調節UI庫，用於改變場景中的參數值
以下是如何在項目中使用three.min.js和其他庫的示例：
<!DOCTYPE html>
<html>
<head>
<title>Three.min.js及其他庫的示例</title>
</head>
<body>
<!--引入three.min.js-->
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
<!--引入stats.js-->
<script src="https://cdn.jsdelivr.net/npm/three-stdlib/stats.min.js"></script>
<!--引入 dat.gui-->
<script src="https://cdn.jsdelivr.net/npm/dat.gui@0.7.7/build/dat.gui.min.js"></script>
<script>
// 創建場景對象和各種參數
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
var controls = new THREE.OrbitControls(camera, renderer.domElement);
var gui = new dat.GUI();
// 創建GUI菜單
var parameters = { rotationSpeed: 0.02, zoom: 1, bounce: true };
gui.add(parameters, 'rotationSpeed', 0, 0.5);
gui.add(parameters, 'zoom', 0.01, 3);
gui.add(parameters, 'bounce');
// 創建3D立方體
var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 調整相機的位置
camera.position.z = 5;
//添加性能監測器的代碼
var stats = new Stats();
document.body.appendChild(stats.dom);
// 渲染幀數相關的代碼
var animate = function () {
requestAnimationFrame(animate);
cube.rotation.x += parameters.rotationSpeed;
cube.rotation.y += parameters.rotationSpeed;
cube.scale.x = parameters.zoom;
cube.scale.y = parameters.zoom;
cube.scale.z = parameters.zoom;
if (parameters.bounce) {
cube.position.y = Math.abs(Math.sin(cube.position.x / 2)) * 2;
} else {
cube.position.y = 0;
}
controls.update();
renderer.render(scene, camera);
stats.update(); // 更新性能數據
};
animate();
</script>
</body>
</html>
三、three.min.js中的重要基礎對象
three.min.js中一個重要的概念是基礎對象，也稱為構建塊。這些基礎對象形成了3D場景的基礎，其中包括:
- 場景(Scene): 所有3D渲染都發生在場景中。
- 相機(Camera)：決定哪些部分會被渲染出場景。
- 寬度、高度、深度、角度等屬於視野和視線的基礎對象
- 幾何形狀(Geometry)：決定對象的大小和形狀。
- 材質(Material)：決定對象的外觀，如顏色、紋理或透明度。
- 光源(Light)：決定場景中的光照效果。
- 網格(Mesh)：對象的基本表示方法，通常以幾何形狀和材料的組合。
以下是一個三維立方體的代碼示例：
<!DOCTYPE html>
<html>
<head>
<title>使用three.min.js創建立方體的示例</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
<script>
// 創建場景對象
var scene = new THREE.Scene();
// 創建相機對象(三維場景中類似於觀察者，自定義攝像機位置)
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// 創建渲染器(WebGL渲染，基於three.js)
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 創建幾何形狀
var geometry = new THREE.BoxGeometry();
// 創建材質
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// 創建網格對象
var cube = new THREE.Mesh(geometry, material);
// 將網格對象添加到場景中
scene.add(cube);
// 調整相機的位置
camera.position.z = 5;
// 渲染函數
var animate = function () {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
};
animate();
</script>
</body>
</html>
四、three.min.js與React
three.min.js是一個非常強大的3D引擎，因此它在多種不同的平台和框架中都可以使用。React是一種流行的JavaScript框架，它是一個構建用戶界面的庫。
以下是一個使用three.min.js和React構建3D立方體的代碼示例：
<!DOCTYPE html>
<html>
<head>
<title>Three.min.js和React構建立方體的示例</title>
</head>
<body>
<div id="root"></div>
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
<script type="module">
// 將React構造函數提取出來
const { useState, useEffect, useRef } = React;
// 創建場景、相機和網格對象
const App = () => {
const mount = useRef(null);
const [cube, setCube] = useState(null);
const [scene] = useState(new THREE.Scene());
const [camera] = useState(new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000));
useEffect(() => {
// 創建幾何形狀
const geometry = new THREE.BoxGeometry(1, 1, 1);
// 創建材質
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
// 創建立方體
const cubeObject = new THREE.Mesh(geometry, material);
setCube(cubeObject);
// 將網格對象添加到場景中
if (mount.current) {
scene.add(cubeObject);
camera.position.z = 5;
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
mount.current.appendChild(renderer.domElement);
// 渲染函數
const animate = function () {
requestAnimationFrame(animate);
cubeObject.rotation.x += 0.01;
cubeObject.rotation.y += 0.01;
renderer.render(scene, camera);
};
animate();
}
}, []);
return (
<div ref={mount} />
);
};
// 渲染函數
ReactDOM.render(<App />, document.getElementById("root"));
</script>
</body>
</html>
五、總結
three.min.js是一個龐大而專業的3D引擎，可以創建出美麗而實用的3D場景。它可以用於前端及後端項目中。利用three.min.js構建3D景觀並非易事，但是通過嘗試，探索和實踐，您終將在3D渲染和計算方面取得更高的成就。
原創文章，作者：YSMJ，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/138586.html
微信掃一掃 
支付寶掃一掃 