基于 three.js 渲染任何畫面，都要基于這 3 個要素來實現
1場景scene：放置物體的容器
2攝像機：類似人眼，可調整位置，角度等信息，展示不同畫面
3渲染器：接收場景和攝像機對象，計算在瀏覽器上要渲染的最終 2D 畫面
第一步：下載three包
npm i three第二步：引入three對象
import * as THREE from 'three'; 第三步：創建場景
// 3. 創建場景（容器）const scene = new THREE.Scene();第四步：創建攝像機（人眼）
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
最后一步：創建渲染器，設置畫布大小，顯示另傳給渲染器
// 創建渲染器（繪制）const renderer = new THREE.WebGLRenderer()// 設置畫布大小（會生成 canvas 標簽）renderer.setSize(window.innerWidth, window.innerHeight)// 把畫布標簽添加到頁面顯示document.body.appendChild(renderer.domElement)// 把空場景和攝像機傳給渲染器，默認是黑色背景的世界renderer.render(scene, camera)完整代碼如下
<template></template><script setup>// 1. 引入 three.js 對象（命名導出->默認導入）import * as THREE from 'three'; // 2. 創建場景（容器）const scene = new THREE.Scene();// 3. 創建攝像機（人眼）const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);// 4. 創建渲染器（繪制）const renderer = new THREE.WebGLRenderer()// 設置畫布大小（會生成 canvas 標簽）renderer.setSize(window.innerWidth, window.innerHeight)// 把畫布標簽添加到頁面顯示document.body.appendChild(renderer.domElement)// 把空場景和攝像機傳給渲染器，默認是黑色背景的世界renderer.render(scene, camera)
</script><style scoped></style>
＞)
