three.js第二章（在vue3项目中创建第一个场景）

安装three.js

npm install three

在main.ts中全局注册three.js

import { createApp } from 'vue';
import App from './App.vue';
import * as THREE from 'three'; // 导入Three.js

const app = createApp(App);

app.config.globalProperties.$THREE = THREE; // 将Three.js库添加到Vue的全局属性中

app.mount('#app');

在项目中使用three.js创建第一个场景

<template>
  <div ref="canvasContainer"></div>
</template>

<script>
export default {
  mounted() {
    // 场景
    const scene = new this.$THREE.Scene()
    // 相机
    const camera = new this.$THREE.PerspectiveCamera(
      40,  //视角
      window.innerWidth / window.innerHeight, //长宽比
      0.1,  //近裁剪面
      1000 //远裁剪面
    );

    // 渲染器
    const renderer = new this.$THREE.WebGLRenderer();
    // 设置渲染器的大小
    renderer.setSize(window.innerWidth, window.innerHeight);
    // 将渲染器添加到DOM中
    this.$refs.canvasContainer.appendChild(renderer.domElement);
    // 几何体
    const geometry = new this.$THREE.BoxGeometry();
    // 材质
    const material = new this.$THREE.MeshBasicMaterial({ color: 0x00ff00 });
    //网格
    const cube = new this.$THREE.Mesh(geometry, material);
    // 添加到场景中
    scene.add(cube);
    //相机位置
    camera.position.z = 10;

    const animate = () => {
      // 更新动画
      requestAnimationFrame(animate);
      // 更新立方体的旋转角度
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      // 渲染场景
      renderer.render(scene, camera);
    };

    animate();
  },
};
</script>

实现效果