【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。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/32208.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

题解:P3569 [POI2014] KAR-Cards

题意 有 n n n 个元素&#xff0c;第 i i i 个元素有两个权值 a i a_i ai​ 和 b i b_i bi​&#xff1b;有 m m m 次操作&#xff0c;每次操作会交换两个元素的位置&#xff0c;且都需要回答&#xff1a;是否存在一种方案&#xff0c;使得每个元素各选择一个权值后&#…

STM32读取芯片内部温度

基于stm32f103cbt6这款芯片&#xff0c;原理部分请参考其他文章&#xff0c;此文章为快速上手得到结果&#xff0c;以结果为导向。 1.基础配置 打开stm32cubemx只需要勾选中 ADC1 Temperature Sensor Channel 2.代码分析 /** 函数名&#xff1a;float GetAdcAnlogValue(voi…

120.网络游戏逆向分析与漏洞攻防-邮件系统数据分析-邮件发送功能的封装

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 如果看不懂、不知道现在做的什么&#xff0c;那就跟着做完看效果&#xff0c;代码看不懂是正常的&#xff0c;只要会抄就行&#xff0c;抄着抄着就能懂了 内容…

【前端面试】理解 JavaScript 中的 Set 和 Map 对象

目录 一、Set 对象1. 基本操作2. 遍历操作3. Set 的特性4. 与数组的互操作 二、Map 对象1. 基本操作2. 遍历操作3. Map 的特性4. 与对象的比较 三、算法题及题解题目&#xff1a;找出数组中的重复元素题目&#xff1a;数组去重题目&#xff1a;统计字符串中每个字符出现的次数题…

简单的 Python Web 应用 Docker 化案例

简单的 Python Web 应用 Docker 化案例 在这个案例中&#xff0c;我们将展示如何使用 Docker 容器化一个简单的 Python Web 应用。我们将创建一个基于 Flask 框架的 Hello World 应用&#xff0c;并使用 Docker 和 Docker Compose 管理容器化环境。 1. 创建 Python Web 应用 …

STM32项目分享:家庭环境监测系统

目录 一、前言 二、项目简介 1.功能详解 2.主要器件 三、原理图设计 四、PCB硬件设计 1.PCB图 2.PCB板打样焊接图 五、程序设计 六、实验效果 七、资料内容 项目分享 一、前言 项目成品图片&#xff1a; 哔哩哔哩视频链接&#xff1a; https://www.bilibili.…

集群初始配置

假设已经有三台或多台 Linux&#xff0c;可以是虚拟机或真实设备。如果希望使用这些 Linux 组成一个集群&#xff0c;并在上面运行一些分布式系统&#xff0c;可能需要如下操作。 1 设置静态IP 输入命令route -n打印路由表&#xff0c;可以查看网关地址。图形界面操作&#x…

跌倒识别:守护公共安全的AI技术应用场景-免费API调用

随着科技的不断进步&#xff0c;人工智能在各个领域的应用日益广泛&#xff0c;其中在公共安全领域&#xff0c;智能跌倒识别系统正逐渐成为守护人们安全的重要工具。本文将分享智能跌倒识别系统在不同场景下的应用及其重要性。 产品在线体验地址-API调用或本地化部署 AI算法模…

【Golang - 90天从新手到大师】Day02 - 基本语法

系列文章合集 Golang - 90天从新手到大师 变量和常量 变量声明 标准声明 var name type批量声明 var (name1 type1name2 type2... )声明时初始化 var name type value类型推导 var name value短变量声明 name : value匿名声明 在使用多重赋值时&#xff0c;如果想要…

【第一性原理】邓巴数字

这里写自定义目录标题 什么是邓巴数字邓巴数背后的科学历史上各个组织的人数与邓巴数字的关系在人类进化中的意义现代社会中邓巴数字的体现邓巴数字的意义其他与沟通相关的数据注意事项结论参考 罗宾邓巴教授生于1947年&#xff0c;进化心理学家&#xff0c;牛津大学教授&#…

[信号与系统]关于LTI系统的转换方程、拉普拉斯变换和z变换

前言 本文还是作为前置知识。 LTI系统的传递函数 LTI系统的传递函数 H ( z ) H(z) H(z) 是输出信号的z变换 Y ( z ) Y(z) Y(z) 与输入信号的z变换 X ( z ) X(z) X(z) 的比值&#xff1a; H ( z ) Y ( z ) X ( z ) H(z) \frac{Y(z)}{X(z)} H(z)X(z)Y(z)​ 多项式比值表…

C++之提高篇

1.标准输入输出流 cin与cout的使用&#xff0c;就不多说了&#xff0c;说一个有关保留小数位数的操作&#xff0c;使用ostream对象的precision&#xff08;&#xff09;方法&#xff0c;表达的意思是数字总共有几位&#xff0c;注意&#xff0c;此时是包括整数部分的&#xff…

OpenAI策略:指令层级系统让大模型免于恶意攻击

现代的大模型&#xff08;LLMs&#xff09;不再仅仅是简单的自动完成系统&#xff0c;它们有潜力赋能各种代理应用&#xff0c;如网页代理、电子邮件秘书、虚拟助手等。然而&#xff0c;这些应用广泛部署的一个主要风险是敌手可能诱使模型执行不安全或灾难性的行动&#xff0c;…

使用 Python 进行测试(7)...until you make it

总结 我很懒&#xff0c;我想用最少的行动实现目标&#xff0c;例如生成测试数据。我们可以&#xff1a; 使用随机种子保证数据的一致性。 >>> random.seed(769876987698698) >>> [random.randint(0, 10) for _ in range(10)] [10, 9, 1, 9, 10, 6, 5, 10…

计算机组成原理 | 硬件电路整理

计算机组成原理 | 硬件电路整理 桶形移位器原理图 全加器逻辑框图 多位可控加减法电路逻辑框图 可级联的4位先行进位电路 4位快速加法器 16位组内并行、组间并行加法器 实现原码一位乘法的逻辑框图 补码一位乘法的逻辑框图 无符号数阵列乘法器 原码不恢复余数法硬件逻辑框图 基…

vue第一次页面加载会触发那几个钩子函数?

在 Vue.js 中&#xff0c;当页面或组件第一次加载时&#xff0c;会触发一系列的生命周期钩子。特别是关于首次加载的&#xff0c;主要的几个钩子函数是 beforeCreate、created、beforeMount、mounted。 以下是一个简单的 Vue 组件示例&#xff0c;其中包含了这些钩子函数&…

Matlab 单目相机标定(内置函数,棋盘格)

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 具体的标定原理可以参阅之前的博客Matlab 单目相机标定(内置函数),这里实现对棋盘格数据的标定过程。 二、实现代码 getCameraCorners.m function [camCorners, usedImIdx, imCheckerboard] = getCameraCorners(…

规模弹性: 管理谷歌的TPUv4机器学习超级计算机(二)

本文为翻译文章&#xff0c;原文为&#xff1a; Resiliency at Scale: Managing Google’sTPUv4 Machine Learning Supercomputer。 由于字数过长&#xff0c;文章分为两期发布&#xff0c;本片涵盖原文后半部分4&#xff5e;9节&#xff0c;前三章节请参考文章&#xff1a;规…

Mybatis plus:IService接口

一、介绍 在MybatisPlus框架中&#xff0c;IService接口扮演着重要的角色。作为一个通用的服务接口&#xff0c;IService定义了一系列方法&#xff0c;包括查询、插入、更新、删除等。这些方法的定义使得在服务层进行数据库操作变得更为便捷和高效。 IService 接口是一个泛型接…

Springboot应用的信创适配-补充

Springboot应用的信创适配-CSDN博客 因为篇幅限制&#xff0c;这里补全Spring信创适配、数据库信创适配、Redis信创适配、消息队列信创适配等四个章节。 Springboot应用的信创适配 Springboot应用的信创适配&#xff0c;如上图所示需要适配的很多&#xff0c;从硬件、操作系统、…