将 Three 带到 Vue 生态系统,TresJs 中文文档上线

将 Three 带到 Vue 生态系统,TresJs 中文文档上线

  • 中文文档上线
  • 入门指南

ThreeJS 在创建 WebGL 3D 网站方面是一个奇妙的库,同时他也是一个保持不断更新的库,一些对其封装的维护者,如 TroisJS,往往很难跟上其所有的更新。

React 生态系统中有一个令人印象深刻的使用自定义渲染器的解决方案叫 React-three-fiber,它能让你使用一些可重用,独立的对状态做出反应的组件进行声明式的构建你的场景。

在 VueJS 生态系统中寻找类似的东西时,发现了这个名为 Lunchbox 的神奇库,它的工作原理与 React-three-fiber 相同,提供了一个自定义的 Vue3 渲染器。同时唯一的问题是,混合编译不同的渲染器是 Vue 社区仍在努力解决的问题

因此,受到这两个库的启发,Alvaro Saburido 为 ThreeJS 创建了一个 Vue 自定义渲染器,这就是 TresJS。

中文文档上线

近日,TresJS 作者宣布 TresJs 文档中文翻译已上线,可以帮助更多中文环境的开发者们更好的了解和学习 TresJS 以及 ThreeJS,在 Vue 生态系统中创建炫酷的 WebGL 3D 网站。

中文文档地址:https://docs.tresjs.org/zh

在这里插入图片描述

入门指南

TresJS 是用 Typescript 编写的,是完全类型化的。如果您使用的是 Typescript,您就能充分享受类型的好处,只需要保证你安装了 three 的类型定义。

在这里插入图片描述

你可以像其他的 Vue 插件一样安装 TresJS

在这里插入图片描述

或者你可以直接在你的组件中使用

在这里插入图片描述
出于性能和捆绑包大小的考虑,建议采用这种方法,Tree Shaking 的效果会更好,而且您只需导入您使用的组件。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

docker容器添加新端口映射的步骤及`wsl$`目录的作用

在Docker容器已经创建后,需要添加新的端口映射,即对已经存在的Docker容器添加新的端口映射,可以通过以下步骤来添加,即通过修改配置文件的方法。 如何新增端口映射? 查找容器的hash值 docker inspect [容器id或名称…

体验OceanBase 的binlog service

OceanBase对MySQL具备很好的兼容性。目前,已经发布了开源版的binlog service工具,该工具能够将OceanBase特有的clog模式转换成binlog模式,以便下游工具如canal、flink cdc等使用。今天,我们就来简单体验一下这个binlog service的功…

ARM IHI0069F GIC architecture specification (5)

Ch2 中断分配与路由 2.1 The Distributor and Redistributors Distributor 为 SPI 提供路由配置,并保存所有关联的路由和优先级信息。 Redistributor 提供 PPI 和 SGI 的配置设置。 Redistributor总是在有限的时间内向 CPU 接口呈现具有最高优先级的待处理中断。 …

【QT】setContextMenuPolicy()函数用法

在Qt中,setContextMenuPolicy() 是一个相当通用的方法,几乎所有的继承自 QWidget 或其派生类的图形用户界面控件都可以使用该方法来设置它们的上下文菜单策略。这意味着,包括但不限于以下常见的Qt GUI控件都能使用 setContextMenuPolicy() 来…

软考高级架构师:进程和线程概念和例题

作者:明明如月学长, CSDN 博客专家,大厂高级 Java 工程师,《性能优化方法论》作者、《解锁大厂思维:剖析《阿里巴巴Java开发手册》》、《再学经典:《Effective Java》独家解析》专栏作者。 热门文章推荐&am…

picGo图床搭建gitee和smms(建议使用)

picGoGitee 这个需要下载gitee插件, 因为官方频繁的检索文件类型, 有时候也会失效 如果没有特殊要求平时存个学习的要看图中文字的重要的图片建议就是smms, 免费也够用! 图片存本地不方便, 各种APP中来回传还会失帧损失画质, 所以你值得往下看 picGosmms 建议使用这个, sm…

idea2023+jdk1.8+Maven3.6.3+Testng6.10+junit4.13搭建测试

idea2023jdk1.8Maven3.6.3Testng6.10junit4.13搭建测试 首先创建maven工程 导入依赖 pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/…

HTTP和HTTPS谁传输数据更安全?

1.HTTP HTTP在传输数据时&#xff0c;通常都是明文传输&#xff0c;也就是传输的数据没有进行加密。在这种情况下&#xff0c;如果传输的是一些敏感数据&#xff0c;比如某银行卡密码&#xff0c;就很容易被别人截获到&#xff0c;这就对我们的个人利益产生了威胁。 HTTP传输数…

Linux中JMeter的使用

Linux中JMeter的使用 Linux版本JMeter安装 # 1、下载、安装JMeter 如果有安装包直接上传即可 wget -c https://archive.apache.org/dist/jmeter/binaries/apache-jmeter-5.4.1.tgz # 解压 tar -zxvf apache-jmeter-5.4.1.tgz -C /usr/local/sjdwz_test cd /usr/local/sjdwz_t…

【教学类-09-05】20240402细线迷宫图03+箭头图片(A4横版一页-4份横版)

作品展示 背景需求&#xff1a; 在word模板上添加“形状-箭头”&#xff0c;结果生成的图片上&#xff0c;箭头位置挪移。 思考&#xff0c;如何直接在迷宫图上添加箭头&#xff0c;以图片形式将迷宫图箭头插入docx word模板 重点说明 代码展示 批量制作细线条的迷宫图(A4横板…

上位机图像处理和嵌入式模块部署(qmacvisual获取边界点)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 在图像处理中&#xff0c;解决了分割的问题之后&#xff0c;下面就是属性信息的提取。在这其中&#xff0c;有一种属性是非常重要的 &#xff0c;那…

Redis(一) redis配置 | 如何连接redis服务器 | 基本数据类型 | 基本全局命令 | 数据结构和内部编码方式

文章目录 前言Redis 配置文件连接 redis 服务器Redis 常见数据类型Redis 基本全局命令set 和 get 命令KEYS 命令EXISTS 命令DEL 命令EXPIRE 和 TTL 命令Redis 过期策略定时器和时间轮的方式实现过期key的及时删除 TYPE 命令 数据结构和编码方式 前言 本篇文章将介绍我们在 Lin…

Flume进阶学习!

本文图片来自于8.flume实时监控文件hdfs sink使用演示_哔哩哔哩_bilibili Apache Flume 的启动过程及其配置文件和脚本 在官网下载的Flume的压缩包中&#xff0c;.lib文件有大量的jar包&#xff0c;按道理说只有.lib文件就可以运行Flume程序了。只不过需要java -jar命令还要加…

android APP monkey 测试

monkey 测试 一、电脑ADB安装及使用详解1、什么是 Monkey 测试2、什么是ADB3、ADB的作用4、安装前提条件5、ADB下载6、ADB安装与配置 二、连接安卓手机检查是否连接上安卓手机windows端安装ADB驱动 三、 monkey测试操作指令演示指令APP包名查看方式测试效果 一、电脑ADB安装及使…

Golang 内存管理和垃圾回收底层原理(二)

一、这篇文章我们来聊聊Golang内存管理和垃圾回收&#xff0c;主要注重基本底层原理讲解&#xff0c;进一步实战待后续文章 垃圾回收&#xff0c;无论是Java 还是 Golang&#xff0c;基本的逻辑都是基于 标记-清理 的&#xff0c; 标记是指标记可能需要回收的对象&#xff0c…

日记本(源码+文档)

日记本&#xff08;小程序、ios、安卓都可部署&#xff09; 文件包含内容程序简要说明功能项目截图客户端首页日记列表 书写日记个人中心设置密码锁拨打客服热线修改信息退出登录登录页输入密码锁注册页 后端管理登录页首页管理员列表管理用户管理日记列表管理日记数据 文件包含…

Spring Boot项目启动速度优化

1、配置自动配置排除列表&#xff0c;减少启动自动配置扫描&#xff0c;配置项spring.autoconfigure.exclude 2、启动类添加索引注解Indexed&#xff0c;去除启动过程中 Components 的扫描步骤&#xff0c;直接从索引文件读取。 import org.springframework.stereotype.lndexe…

基于springboot的房屋租赁系统平台

功能描述 流程&#xff1a;房主登陆系统录入房屋信息》发布租赁信息&#xff08;选择房屋&#xff09;》租客登陆系统浏览租赁信息》和房主联系、看房&#xff08;根据租赁信息单的电话线下沟通&#xff09;》房主发起签约&#xff08;生成邀请码&#xff09;》租客登陆系统根…

Qt加载.css/.qss文件设置控件的QSS样式(支持程序运行时修改且立即生效类似换肤效果)

初学Qt时要想通过QSS修改控件QWidget&#xff0c;QPushButton等原生基础控件的样式&#xff0c;一般都是直接在.ui文件中直接添加qss&#xff0c;或者在代码中通过setStyleSheet(QString qss)来设置。当程序很大时&#xff0c;很多地方需要复用样式时会非常麻烦&#xff0c;qss…

QA测试开发工程师面试题满分问答3: python的深拷贝和浅拷贝问题

在 Python 中&#xff0c;深拷贝&#xff08;deep copy&#xff09;和浅拷贝&#xff08;shallow copy&#xff09;是用于创建对象副本的两种不同方式。 浅拷贝是创建一个新的对象&#xff0c;该对象与原始对象的内容相同&#xff08;包括内部嵌套对象的引用&#xff09;&…
最新文章