Vue里引入three.js

本文详细介绍如何在Vue.js项目中引入并使用Three.js进行3D渲染。从安装Three.js开始,逐步讲解如何在组件中设置相机、场景、渲染器等,并通过动画演示3D模型的旋转效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近因为three.js的项目要用Vue.js 来重构,所以不太清楚在Vue里面怎么引入。找了很多方法都是一直报错,最后在Stack Overflow找到了。

首先是下载包,直接用 npm install three --save 就行了。

然后就是在component里面引入。

<template>
    <div>
      <div id="container"></div>
    </div>
</template>

<script>
import * as Three from 'three'

export default {
  name: 'ThreeTest',
  data() {
    return {
      camera: null,
      scene: null,
      renderer: null,
      mesh: null
    }
  },
  methods: {
    init: function() {
        let container = document.getElementById('container');

        this.camera = new Three.PerspectiveCamera(70, container.clientWidth/container.clientHeight, 0.01, 10);
        this.camera.position.z = 1;

        this.scene = new Three.Scene();

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

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

        this.renderer = new Three.WebGLRenderer({antialias: true});
        this.renderer.setSize(container.clientWidth, container.clientHeight);
        container.appendChild(this.renderer.domElement);

    },
    animate: function() {
        requestAnimationFrame(this.animate);
        this.mesh.rotation.x += 0.01;
        this.mesh.rotation.y += 0.02;
        this.renderer.render(this.scene, this.camera);
    }
  },
  mounted() {
      this.init();
      this.animate()
  }
}
</script>
<style scoped>
  #container {
    height: 400px;
  }
</style>

 

### 如何在 Vue 项目引入并配置 Three.js #### 创建 Vue 项目 如果尚未创建 Vue 项目,可以使用 Vue CLI 或 Vite 来快速搭建环境。对于现代开发推荐使用 Vite 构建工具来初始化项目[^1]。 ```bash pnpm create vite@latest vue-threejs-demo --template vue cd vue-threejs-demo ``` #### 安装 Three.js 完成项目初始化后,在项目根目录下运行命令以安装 Three.js: ```bash npm install three ``` 这一步会将 Three.js 添加到项目的依赖项中[^2]。 #### 配置和加载 Three.js 为了在 Vue 组件中使用 Three.js,可以通过 `import` 将其引入。以下是完整的示例代码,展示如何设置基础场景、相机以及渲染器,并将其嵌入到 Vue 页面中。 ```javascript <template> <div ref="threeContainer"></div> </template> <script setup> import * as THREE from "three"; import { onMounted, ref } from "vue"; const threeContainer = ref(null); onMounted(() => { const container = threeContainer.value; // 设置场景 const scene = new THREE.Scene(); // 设置相机 const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); // 设置渲染器 const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); container.appendChild(renderer.domElement); // 添加立方体 const geometry = new THREE.BoxGeometry(1, 1, 1); const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); const cube = new THREE.Mesh(geometry, material); scene.add(cube); camera.position.z = 5; function animate() { requestAnimationFrame(animate); // 更新物体位置或其他属性 cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); } animate(); }); </script> <style scoped> #app { width: 100%; height: 100%; } </style> ``` 此代码片段展示了如何在一个 Vue 组件中集成 Three.js 并实现简单的旋转立方体效果[^1]。 #### 加载外部模型 (GLTF 文件) 如果需要加载 `.gltf` 或 `.glb` 格式的三维模型,则需额外导入 `GLTFLoader` 工具类。以下是如何操作的一个例子[^3]: ```javascript import * as THREE from "three"; import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js"; // 假设已经定义好场景和其他必要部分... function loadModel() { const loader = new GLTFLoader(); loader.load("/path/to/model.glb", (gltf) => { const model = gltf.scene; // 获取加载的模型节点 scene.add(model); // 将模型添加至场景中 }, undefined, (error) => { console.error("An error occurred while loading the model:", error); }); } loadModel(); // 调用函数执行模型加载逻辑 ``` 以上方法能够帮助开发者成功地在 Vue 中加载复杂的三维资产。 ---
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值