在 Vue 3 中使用 Three.js 创建 3D 场景

介绍

本文将介绍如何在 Vue 3 中使用 Three.js 构建一个 3D 场景。我们会使用 Vue 3 的 <script setup> 语法，并拆分不同的初始化函数，使代码结构更加清晰。

代码实现

1. 创建 Vue 组件

在 template 部分，我们创建一个 div 容器，并使用 ref 绑定它，以便在 setup 中操作。

css 复制代码

<template>
    <div ref="container" style="width: 100vw; height: 100vh;"></div>
</template>

2. 引入依赖和定义变量

在 script setup 部分，我们引入 Vue 相关的 API 和 Three.js 相关的库，并定义全局变量。

xml 复制代码

<script setup>
import { onMounted, ref } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

const container = ref(null);
let scene, camera, renderer, controls, cube, cube_mesh;

3. 初始化场景

ini 复制代码

const initScene = () => {
    scene = new THREE.Scene();
    const loader = new THREE.CubeTextureLoader();
    loader.setPath("images/");
    scene.background = loader.load([
        "6.jpg", "3.jpg", "5.jpg", "2.jpg", "4.jpg", "1.jpg"
    ]);
};

4. 初始化相机

ini 复制代码

const initCamera = () => {
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 2000);
    camera.position.set(700, -50, 700);
};

5. 添加光源

ini 复制代码

const initLights = () => {
    const hemLight = new THREE.HemisphereLight(0x2894ff, 0xffffbb, 50);
    scene.add(hemLight);
};

6. 创建 3D 物体

ini 复制代码

const initObjects = () => {
    const geometry = new THREE.BoxGeometry(100, 100, 100, 3, 3, 3);
    const material = new THREE.MeshBasicMaterial({ color: 0x00fff0 });
    cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
    
    const material_wf = material.clone();
    cube_mesh = new THREE.Mesh(geometry, material_wf);
    scene.add(cube_mesh);
};

7. 初始化渲染器

ini 复制代码

const initRenderer = () => {
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    container.value.appendChild(renderer.domElement);
};

8. 初始化控制器

ini 复制代码

const initControls = () => {
    controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    controls.enableZoom = true;
    controls.autoRotate = true;
    controls.minDistance = 10;
    controls.maxDistance = 2000;
    controls.enablePan = true;
    controls.screenSpacePanning = true;
    controls.target.set(0, 200, 0);
    controls.autoRotateSpeed = 0.5;
};

9. 动画渲染

ini 复制代码

const animate = () => {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    cube_mesh.rotation.x += 0.01;
    cube_mesh.rotation.y += 0.01;
    controls.update();
    renderer.render(scene, camera);
};

10. 组件挂载后执行初始化

scss 复制代码

onMounted(() => {
    initScene();
    initCamera();
    initLights();
    initObjects();
    initRenderer();
    initControls();
    animate();
});
</script>

最后

通过 Vue 3 和 Three.js，创建 3D 场景,每个功能模块都被封装成独立的函数，方便理解和维护。