開發環境
npm i three@0.156.1
npm i @types/three@0.156.0
入門代碼
index.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><!-- <link rel="stylesheet" href="demo.css" /> --><style>body {margin: 0;}</style><!-- 核心依賴 --><scriptasyncsrc="https://unpkg.com/es-module-shims@1.8.3/dist/es-module-shims.js"></script><script type="importmap">{"imports": {"three": "../../node_modules/three/build/three.module.js"}}</script></head><body><script type="module" src="demo.js"></script></body>
</html>
demo.js
import * as THREE from "three";//! 場景
const scene = new THREE.Scene();//! 透視相機（垂直視野角度，長寬比，近端面，遠端面）
const camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000
);
camera.position.z = 5;//! 渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
window.onresize = function () {renderer.setSize(window.innerWidth, window.innerHeight);//camera.setViewOffset(window.innerWidth,window.innerHeight,0,0,window.innerWidth,window.innerHeight);
};//！ 線
{// 定義材質const material = new THREE.LineBasicMaterial({ color: 0x00ff00 });// 創建幾何體const points = [];points.push(new THREE.Vector3(-3, 0, 0));points.push(new THREE.Vector3(0, 3, 0));points.push(new THREE.Vector3(3, 0, 0));points.push(new THREE.Vector3(0, -3, 0));points.push(new THREE.Vector3(-3, 0, 0));const geometry = new THREE.BufferGeometry().setFromPoints(points);// 創建 Lineconst line = new THREE.Line(geometry, material);// 添加到場景scene.add(line);
}//! 立方體
{// 定義材質const material = new THREE.MeshBasicMaterial({ color: 0x0ffff0 });// 幾何對象const geometry = new THREE.BoxGeometry(1, 1, 1);// 創建 Cubeconst cube = new THREE.Mesh(geometry, material);// 添加到場景scene.add(cube);// 動畫效果function animate() {// 向瀏覽器發起一個執行某函數的請求（一般默認保持60FPS的頻率）requestAnimationFrame(animate);// 旋轉 Cubecube.rotation.x += 0.01;cube.rotation.y += 0.01;// 旋轉 Cameracamera.rotation.z += 0.01;// 刷新相機renderer.render(scene, camera);}animate();
}
攝像機（Camer）
TODO
材質（Mesh）
TODO
圖層（Layers）
TODO
基本幾何圖形
TODO
加載3D模型
TODO
