TroisJS 是一个基于 Three.js 的 vue3 三维可视化库，TroisJS 对桌面和移动端都有良好的支持。使用 TroisJS 可以在网站上添加一个 3D 渲染器，并在 vue 文件 的部分中使用预先建立的组件指定场景细节，如材料、照明、网格、阴影等。
安装
使用 npm 安装
npm install three@0.134 troisjs
或者使用 yarn
yarn add three@0.134 troisjs
添加到项目中
import { TroisJSVuePlugin } from 'troisjs';
app.use(TroisJSVuePlugin);
示例
<template>
<Renderer ref="renderer">
<Camera :position="{ z: 10 }" />
<Scene>
<PointLight :position="{ y: 50, z: 50 }" />
<Box ref="box" :rotation="{ y: Math.PI / 4, z: Math.PI / 4 }">
<LambertMaterial />
</Box>
</Scene>
</Renderer>
</template>
<script>
export default {
mounted() {
const renderer = this.$refs.renderer;
const box = this.$refs.box.mesh;
renderer.onBeforeRender(() => {
box.rotation.x += 0.01;
});
},
};
</script>
演示
传送门
开源协议：MIT
开源地址：https://github.com/troisjs/trois
项目合集：https://github.com/OpenTechCol/OpenTechCol
「回复【加群】加入开源技术交流群，干货很多！」
-END-
原文始发于微信公众号（开源技术专栏）：基于 Three.js 的 vue3 三维可视化库
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/145714.html
