---
tags: 隨手筆記, Three.js
title: Three.js Install
---

# Three.js Install
紀錄 Three.js 建立過程

## ▶ 前置作業
- 在專案目錄下，終端機中輸入 `npm i three`

## ▶ 建立至 Vue

import * as THREE from "three";
// 建立 Three.js 場景
const scene = new THREE.Scene();
// 建立攝影機與設定位置
const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
camera.position.z = 1;
// 建立渲染器並將其加至 document body 內
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 建立一個 Mesh 物件
const createMesh = () => {
  // 建立一個立方體
  const geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
  // 匯入材質
  const material = new THREE.MeshNormalMaterial();
  // 建立 Mesh 物件
  const mesh = new THREE.Mesh(geometry, material);
  // 加入至場景
  scene.add(mesh);
  // 建立 animation 讓物件旋轉
  function animation(time) {
    mesh.rotation.x = time / 2000;
    mesh.rotation.y = time / 1000;
    renderer.render(scene, camera);
  }
  renderer.setAnimationLoop(animation);
};
createMaterial();

## 參考來源
> 1. [three - npm](https://www.npmjs.com/package/three)
> 2. [three - docs](https://threejs.org/docs/index.html#manual/en/introduction/Installation)

<!-- {%hackmd S1DMFioCO %} -->