【ThreeJS】Threejs +Vue3 开发基础

目前流行的前端3D框架以以Three.js、Babylon.js、A-Frame和ThingJS为例:
1.Three.js
功能: 提供了大量的3D功能,包括基本几何形状、材质、灯光、动画、特效等。
易用性: 功能强大且易于使用,抽象了复杂的底层细节,使得开发者可以更容易地开发3D应用。然而,对于初学者来说,可能需要花费较多时间理解和学习。
性能: 由于其广泛的使用和成熟的生态系统,Three.js在性能上表现良好。
社区支持: 拥有庞大的开发者社区和丰富的教程资源,方便开发者学习和交流。
2.Babylon.js
功能: 与Three.js类似,提供了丰富的3D功能,但更加注重游戏和虚拟现实的应用。
易用性: 同样易于使用,并且提供了多种材质和着色器、物理引擎、灯光、粒子系统等功能,可用于创建复杂的3D场景和交互式应用程序。
性能: 在性能方面与Three.js相当,均能满足大多数3D应用的需求。
社区支持: 虽然社区规模可能稍小于Three.js,但Babylon.js同样拥有活跃的开发者社区和丰富的教程资源。
3.A-Frame
功能: 基于WebVR的3D框架,使用简单的HTML标记语言来构建3D场景。
易用性: 非常适合快速创建3D体验,提供了一组简单易用的组件,包括实体、相机、光源、声音、特效等。
性能: 在WebVR应用中表现良好,但由于其专注于VR体验,可能在某些非VR应用中表现受限。
社区支持: A-Frame的社区相对较小,但活跃度高,且得到了Mozilla等机构的支持。
4.ThingJS
功能: 新兴的3D框架,专注于物联网领域的JavaScript 3D Library。封装了对模型的操作和交互事件,简化了3D应用开发。
易用性: 对于无3D开发经验的人员来说,ThingJS更容易上手。它封装了复杂的3D概念,使得开发者可以更专注于业务逻辑的实现。
性能: 虽然性能可能稍逊于Three.js和Babylon.js等成熟的框架,但足以满足大多数物联网应用的需求。
社区支持: ThingJS的社区规模较小,但得到了优锘科技等公司的支持,并提供了丰富的教程和示例。

我们选中Threejs,没办法,开源,资料又多,坑比较少。

1. 安装依赖

首先,你需要在你的Vue3项目中安装Three.js。你可以使用npm或yarn来安装它.

npm install three  
# 或者  
yarn add three

2. 集成Three.js到Vue3组件

接下来,你可以在一个Vue3组件中集成Three.js。以下是一个基本的步骤指南:

  • 创建Vue3组件:你可以使用Vue CLI或Vite等工具创建一个新的Vue3项目,并添加一个Vue组件。
  • 引入Three.js:在你的Vue组件中,使用import语句引入Three.js库。
  • 设置Three.js场景:在组件的setup函数或mounted钩子中,设置Three.js的场景、相机和渲染器。
  • 渲染循环:使用requestAnimationFrame来创建一个渲染循环,并在其中更新和渲染你的3D场景。
  • 添加交互:根据需要,为你的3D场景添加鼠标或触摸事件交互。

3. 示例代码

以下是一个简单的Vue3组件示例,它使用了Three.js来渲染一个旋转的立方体:

<template>  
  <div ref="mount"></div>  
</template>  
  
<script setup lang="ts">  
import * as THREE from 'three';  
  
const mount = ref(null);  
  
onMounted(() => {  
  const width = mount.value.clientWidth;  
  const height = mount.value.clientHeight;  
  
  // 创建场景  
  const scene = new THREE.Scene();  
  
  // 创建相机  
  const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);  
  camera.position.z = 5;  
  
  // 创建渲染器  
  const renderer = new THREE.WebGLRenderer();  
  renderer.setSize(width, height);  
  mount.value.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);  
  
  // 渲染循环  
  const animate = () => {  
    requestAnimationFrame(animate);  
    cube.rotation.x += 0.01;  
    cube.rotation.y += 0.01;  
    renderer.render(scene, camera);  
  };  
  
  animate();  
});  
</script>  
  
<style scoped>  
div {  
  width: 100vw;  
  height: 100vh;  
}  
</style>

4. 注意事项

这里有几个注意事项:

  1. onMounted 挂载threejs场景dom时,必须在 onMounted里面。mount.value.appendChild(renderer.domElement);
  2. 必须为dom挂载width/height。
  • 19
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

神精兵院院长

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值