配置開發(fā)環(huán)境
因為我這邊是用的Vue作為前端基礎框架所以我們先安裝Vue
Vue Install :

npm install -g @vue/cli
# OR
yarn global add @vue/cli

Create a project:

vue create my-project
# OR
vue ui

安裝Threejs

yarn add three
# OR
yarn add three

引入使用

<script>
import * as THREE from "three";
let camera, scene, renderer;
let geometry, material, mesh;
export default {
  data() {
    return {
      name: "",
    };
  },
  created() {
    this.init();
    this.animate();
  },
  methods: {
    init() {
      //場景（scene）、相機（camera）和渲染器（renderer）
      camera = new THREE.PerspectiveCamera(
        70,
        window.innerWidth / window.innerHeight,
        0.01,
        10
      ); // 創(chuàng)建透視相機
      camera.position.z = 1;

      scene = new THREE.Scene(); // 創(chuàng)建場景

      geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
      material = new THREE.MeshNormalMaterial();

      mesh = new THREE.Mesh(geometry, material);
      scene.add(mesh);

      renderer = new THREE.WebGLRenderer({ antialias: true }); // 創(chuàng)建渲染器
      renderer.setSize(window.innerWidth, window.innerHeight); // 設置渲染器大小
      document.body.appendChild(renderer.domElement);
    },
    animate() {
      requestAnimationFrame(this.animate); //渲染循環(huán)
      mesh.rotation.x += 0.01;
      mesh.rotation.y += 0.02;
      renderer.render(scene, camera); // 渲染render( scene, camera, renderTarget, forceClear ) scene：前面定義的場景 camera：前面定義的相機renderTarget：渲染的目標，默認是渲染到前面定義的render變量中forceClear：每次繪制之前都將畫布的內容給清除，即使自動清除標志autoClear為false，也會清除
    },
  },
};
</script>

運行看到如下效果,說明配置成功

image.png