将 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.hqwc.cn/news/585603.html

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

相关文章

Kubernetes kafka系列 | Strimzi 部署kafka-bridge

Strimzi kafka集群部署直通车 一、kafka bridge 介绍 Kafka Bridge 是 Apache Kafka 生态系统中的一个工具或组件,用于实现 Kafka 与其他系统或协议之间的通信或集成。Kafka 本身是一个分布式事件流平台,广泛用于构建实时数据流水线和流式应用程序。然而…

物联网实战--入门篇之(八)嵌入式-空气净化器

目录 一、风扇调速 二、通讯协议 三、净化器运行逻辑 一、风扇调速 单片机是不能直接驱动电机的,因为主芯片的驱动电流比较小(50mA左右),他们之间正常还要有个电机驱动器,常用的有TB6612、L298和L9110等,目前项目用的这个电机它…

redis基础数据结构

文章目录 前言字符串常见命令内部编码使用场景1、缓存(Cache)功能2、计数3、共享Session4、限速 哈希命令内部编码使用场景存储结构化数据 列表命令内部编码使用场景1.阻塞消息队列模型2.文章列表3.微博 Timeline 集合命令内部编码使用场景1.给用户增加标…

Pytorch数据结构:Tensor

文章目录 Tensor基础1.1、Tensor的维度(Dimensions)1.1.1、举例说明1.1.2、高维Tensor 1.2、.dim()和.size()方法1.2.1、.dim()方法1.2.2、.size()方法1.2.3、.shape属性1.2.3、示例代码1.2.3.1、一维Tensor1.2.3.2、二维Tensor1.2.3.3、三维Tensor 1.3、…

PTA_语法入门赛

文章目录 7-1 格式化数字的显示-简单版7-2 三角形判定7-3 表面积和体积7-4 特殊数列求和7-5 矩阵中的鞍点7-6 反素数7-7 ISBN转换 题源:https://pintia.cn/problem-sets/1768428576024760320/overview 7-1 格式化数字的显示-简单版 在金融领域对金额之类的数字&am…

主流公链 - Fantom

Fantom:高性能的区块链协议 Fantom是一种开创性的区块链协议,旨在革新去中心化应用和数字金融领域 技术特点 共识机制 Lachesis协议:Fantom使用了Lachesis协议作为其共识算法。Lachesis是一种 异步拜占庭容错(ABFT)共…

java数据结构与算法刷题-----LeetCode200. 岛屿数量

java数据结构与算法刷题目录(剑指Offer、LeetCode、ACM)-----主目录-----持续更新(进不去说明我没写完):https://blog.csdn.net/grd_java/article/details/123063846 文章目录 深度优先遍历 深度优先遍历 解题思路:时间复杂度O( …

Reversing Linked List

Given a constant K and a singly linked list L, you are supposed to reverse the links of every K elements on L. For example, given L being 1→2→3→4→5→6, if K3, then you must output 3→2→1→6→5→4; if K4, you must output 4→3→2→1→5→6. Input Specifi…

软考 系统架构设计师系列知识点之云原生架构设计理论与实践(13)

接前一篇文章:软考 系统架构设计师系列知识点之云原生架构设计理论与实践(12) 所属章节: 第14章. 云原生架构设计理论与实践 第3节 云原生架构相关技术 14.3.2 云原生微服务 1. 微服务发展背景 过去开发一个后端应用最为直接的方…

2023年第十四届蓝桥杯 - 省赛 - Python研究生组 - A.工作时长

题目 数据文件:https://labfile.oss.aliyuncs.com/courses/21074/records.txt Idea 直接通过 datetime 模块加载时间字符串进行格式化,然后对时间列表进行排序,最后两两计算时间差。 Code Python from datetime import datetimetime_lis…

在js中本地存储的数组如何转成对象

一、此方法仅适用一维数组; 二、效果图 使用后 三、js代码。 function gong(s){console.log(s);let data;let kk1;// 检查ask_id是否不为空 if (s.ask_id null ) { kk1}else{kk2let dd;dds.data;sessionStorage.setItem(wenda,JSON.stringify(dd[0]))window.l…

【Frida】【Android】08_爬虫之网络通信库okhttp3

🛫 系列文章导航 【Frida】【Android】01_手把手教你环境搭建 https://blog.csdn.net/kinghzking/article/details/136986950【Frida】【Android】02_JAVA层HOOK https://blog.csdn.net/kinghzking/article/details/137008446【Frida】【Android】03_RPC https://bl…