【Vue3+Tres 三维开发】01-HelloWord

最新推荐文章于 2024-10-18 10:42:08 发布
最新推荐文章于 2024-10-18 10:42:08 发布
阅读量1.2k 收藏
点赞数 4
分类专栏： Threejs 文章标签： threejs vue3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/seelingzheng/article/details/138205962
版权
Threejs 专栏收录该内容
24 篇文章 1 订阅 ¥129.90 ¥299.90
订阅专栏
本文介绍了如何在Vue3中使用TRESJS，一个基于THREEJS的前端组件库。通过项目创建、安装依赖和环境配置，展示了如何简单创建场景和模型，以及如何配置全屏和设置初始场景。同时，还提到了TresMesh用于创建模型，并开启阴影模式。
摘要由CSDN通过智能技术生成

预览

在这里插入图片描述

什么是TRESJS

简单的说，就是基于THREEJS封装的能在vue3中使用的一个组件，可以像使用组件的方式去创建场景和模型。优势就是可以快速创建场景和要素的添加，并且能很明确知道创景中的要素构成和结构。

项目创建

npx create-vite@latest
# 选择 vue  typescript

安装依赖

pnpm i @tresjs/core @tresjs/cientos  three 
pnpm i @types/three -D

环境配置

  • 在vi

了解本专栏 订阅专栏 解锁全文
seelingzheng
关注
专栏目录
订阅专栏
【Vue3+Tres 三维开发】02-Debug
一路走一路学，总会不落后
04-26 254
Debug这里主要是讲在三维中的调试，同以前threejs中使用的lil-gui类似，TRESJS也提供了一套可视化参数调试的插件。使用方式和之前的组件相似。
12 使用Vue+Vue-router+el-menu实现菜单功能实战
xingyu_qie的专栏
04-10 8446
我们将继续维护添加Vue-router的路由数据,借助ElementUI的el-munu组件，来实现左侧菜单功能的实战，并自己实现一个el-menu组件
标题：用Vue构建3D场景的利器 —— TresJS Nuxt 模块
gitblog_00073的博客
06-02 447
标题：用Vue构建3D场景的利器 —— TresJS Nuxt 模块 nuxtTresJS integration for Nuxt.项目地址:https://gitcode.com/gh_mirrors/nuxt/nuxt 1、项目介绍 @tresjs/nuxt 是一个官方Nuxt模块，它将3D场景构建变得像操作Vue组件一样简单。通过这个模块，你可以无缝地在你的Nuxt应用程序中整合Tr...
Tree.js 开源项目快速指南
gitblog_00776的博客
09-11 294
Tree.js 开源项目快速指南 treejs A lightweight tree widget, compatible with VanillaJS / React / Vue. Tiny size after gzip. Zero dependence. ...
推荐开源项目：TresJS - 壮大的Vue + ThreeJS 搭建3D场景库
gitblog_00035的博客
05-16 1380
推荐开源项目：TresJS - 壮大的Vue + ThreeJS 搭建3D场景库 项目地址:https://gitcode.com/gh_mirrors/tr/tres 在Web开发的世界里，结合Vue的便捷性和ThreeJS的强大3D渲染能力，构建交互式的3D体验已成为一种趋势。今天，我们向您隆重推荐一个创新项目——TresJS。这是一款基于Vue组件的声明式ThreeJS框架，让创建3D场景...
Vue3中TresJS
m0_46159356的博客
07-31 508
vue中的threejs
tree.js初体验 | 大帅老猿threejs特训
qq_39094860的博客
01-13 6219
之前对Web3D并不了解，最近跟着大帅的训练营，通过三天的学习，了解了blender的操作和three.js。下面就用几十行js代码实现一个带动态效果的甜甜圈。
tree.js实现3D效果，官网demo
test_00的博客
05-28 9997
官网地址:https://threejs.org/docs/index.html#manual/zh/introduction/Creating-a-scene 官网demo：一个自动旋转的正方形 这个tree.js主要用的是3D模型图，图可是gitf,3D max制作3D模型 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index
Vue3+ts（使用了vue-class-component修饰器）遇到的坑
li336699li的博客
05-21 5320
本人也是刚对Vue3进行了解，我只讲我在了解Vue3+ts语法（使用了vue-class-component修饰器）中遇到的坑，闲话不多说开干. 本次了解中我遇到的 第一个问题就是vue.config.ts配置文件代理不生效，更改项目运行端口无效，具体不知什么原因，需要更改为vue.config.js文件才对代理，及运行端口生效；如果是ts的配置文件就会出现代理端口404 图： 这个图就是我的配置文件为vue.config.ts出现为404，最后我更改为vue.config.js文件该接口才返回200的状
node+vue3+mysql前后分离开发范式——实现对数据库表的增删改查
热门推荐
编程知识分享，主打前端
02-15 2万+
大家好，我是yma16，本文分享关于 node+vue3+mysql前后分离开发范式——实现对数据库表的增删改查。技术选型前端：vite+vue3+antd后端：node koa数据库：mysqlkoa是一个现代的Node.js框架，可以用来构建Web应用程序。Vue.js 是一款用于构建用户界面的开源JavaScript框架。Vue.js 3 是 Vue.js的最新版本，于2020年9月正式发布。Vue.js3相对于之前的版本带来了许多重要的改进和新功能。
vite+vue3+ts中的vue-router基本配置
m0_51431448的博客
08-19 5010
加上ts其实就是多了类型的约束，vue-router中已经给我们提供了RouteRecordRaw类型，可能我们需要在路由对象中自定义配置属性的时候就得去扩展一下RouteRecordRaw类型了
Threejs简单介绍(含案例演示)
土豆块嘎嘣脆的博客
10-14 1万+
编写canvas的方法
探索TresJS：用Vue组件构建声明式3D场景
gitblog_00633的博客
09-03 565
探索TresJS：用Vue组件构建声明式3D场景 tresDeclarative ThreeJS using Vue Components项目地址:https://gitcode.com/gh_mirrors/tr/tres 在现代Web开发领域，3D图形的需求日益增长，而ThreeJS作为最受欢迎的3D库之一，为开发者提供了强大的功能。然而，将ThreeJS与现代前端框架如Vue结合使用，往往...
Tresjs 开源项目教程
gitblog_01140的博客
09-03 471
Tresjs 开源项目教程 tresDeclarative ThreeJS using Vue Components项目地址:https://gitcode.com/gh_mirrors/tr/tres 项目介绍 Tresjs 是一个基于 JavaScript 的开源项目，旨在提供一个轻量级、高性能的 3D 渲染框架。它利用现代 WebGL 技术，使得开发者能够在浏览器中创建复杂的 3D 场景和...
three.js 源码注释（九十三）extras/core/Path.js
omni360的专栏
02-01 2398
Path类创建2d的路径,包括点,线,和立方体,类似于HTML5 2D画布的API,curvePath类的扩展. <summary>Curve</summary> <param name ="points" type="Vector2Array">2维向量数组</param>
Tresjs/cientos 开源项目入门指南
gitblog_00277的博客
08-20 439
Tresjs/cientos 开源项目入门指南 cientosCollection of useful helpers and fully functional, ready-made abstractions for TresJS项目地址:https://gitcode.com/gh_mirrors/ci/cientos 项目概述 Tresjs/cientos 是一个基于 GitHub 的开源...
tree.js
mumu13141516的博客
11-27 3807
/*! jsTree - v3.3.7 - 2018-11-06 - (MIT) */ !function(a){"use strict";"function"==typeof define&amp;&amp;define.amd?define(["jquery"],a):"undefined"!=typeof module&amp;&amp;module.exports?module.expor
Tres.js 开源项目常见问题解决方案
最新发布
gitblog_01294的博客
10-18 510
Tres.js 开源项目常见问题解决方案 tres Declarative ThreeJS using Vue Components 项目地址: https://gitcode.com/gh_mirrors/tr/tres ...
汇总：五个开源的Three.js项目
VR观察 ——专注AR/XR//MR/VR技术研究与应用探索！
03-30 3699
汇总：五个开源的Three.js项目。Three.js 使开发者无需深入了解 WebGL 的详细技术就能够轻松构建和渲染3D场景、模型、动画、粒子系统等。其应用场景广泛，包括网页游戏、数据可视化、虚拟现实（VR）、增强现实（AR）、艺术展示和教育工具等，几乎覆盖了所有需要在网页中展示3D内容的领域。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

seelingzheng

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

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

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

打赏作者

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

抵扣说明：

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

余额充值