用Three.js畫的旋轉手機HTML代碼示例
以下是一篇介紹 HTML 代碼和 Three.js 的三維旋轉手機代碼示例：
<!DOCTYPE html>
<html>
<head>
<title>三維旋轉手機</title>
<meta charset="UTF-8">
<meta name="description" content="用 Three.js 創建一個旋轉的三維手機">
<meta name="author" content="Bob">
<script src="https://dm.qunapu.com/threejs/build/three.min.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<script>
// 創建場景
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);
// 創建正方體
const geometry = new THREE.BoxGeometry(1.5, 3, 0.5);
const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 創建光源
const light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(0, 0, 10);
scene.add(light);
// 渲染場景
function animate() {
requestAnimationFrame(animate);
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>上面的代碼用 Three.js 創建了一個簡單的三維旋轉手機場景，包含了以下 HTML 元素和 Three.js 代碼元素：
- `<script>`: 在 HTML 中嵌入 JavaScript 代碼的元素。
- `const`: 聲明一個常量。
- `new THREE.Scene()`: 創建一個 Three.js 場景，將其中的物體添加到其中。
- `new THREE.PerspectiveCamera()`: 創建一個 Three.js 透視相機。
- `new THREE.WebGLRenderer()`: 創建一個 Three.js WebGL 渲染器。
- `new THREE.BoxGeometry()`: 創建一個立方體。
- `new THREE.MeshBasicMaterial()`: 創建了一個用於添加到 Mesh 的 Basic Material，代表使用一種固定顏色的材質。
- `new THREE.Mesh()`: 創建了一個 Mesh 物體。
- `new THREE.PointLight()`: 創建了一個 Three.js 點光源。
- `requestAnimationFrame()`: 請求瀏覽器執行一次動畫幀，用於循環渲染場景。
- `cube.rotation.y`: 改變立方體物體的旋轉。
HTML 頁面中使用了內聯 JavaScript，通過創建 Three.js 場景、相機、渲染器、物體和光源，以及添加旋轉動畫，來創建一個簡單的旋轉的三維手機場景。其中，通過 CSS 樣式設置了頁面的樣式，去除了默認的滚動條。
