![](https://img-blog.csdnimg.cn/63d77bcf780d44b2bee1f543568fa17e.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Three.js
文章平均质量分 84
Three.js学习笔记以及问题记录,three版本“version“: “0.140.0“,
Mr_Bobcp
该用户资料受国家保护,不予公布。
展开
-
Three.js不同模型在不同轨道上的动画和移动
Three.js不同模型在不同轨道上的动画和移动原创 2023-03-26 13:43:26 · 3350 阅读 · 1 评论 -
window.requestAnimationFrame Web3D渲染帧率控制
告诉浏览器——你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。原创 2022-08-06 21:33:44 · 12029 阅读 · 0 评论 -
【毕业季】Three.js动态相册
相册展示和点选切换,利用相机旋转和移动来实现一个点击切图平滑过渡的效果。原创 2022-06-30 13:06:34 · 17678 阅读 · 0 评论 -
Three.js学习七——播放模型动画时模型沿着轨迹移动
在播放导入的模型动画同时,让模型沿着预定路径轨迹移动。例如导入一个会跑步动作的模型,让它沿着一条类似跑道的路径跑步移动。模型使用的是官方示例中的Soldier模型。原创 2022-06-10 14:05:06 · 20367 阅读 · 5 评论 -
Three.js学习六——模型动画
让模型实现动画效果,需要使用Three动画系统。模型使用的是官方示例中的Soldier模型,文件位置:three.js-master\examples\models\gltf\Soldier.glb原创 2022-06-09 16:08:00 · 22858 阅读 · 15 评论 -
Three.js学习五——让模型沿着轨迹移动
让模型在场景中沿着轨迹动起来原创 2022-06-08 18:31:02 · 25195 阅读 · 18 评论 -
Three.js学习四——模型导入
通过Three.js的材质和几何体,我们可以很方便的创建基础3D模型,但涉及到复杂模型时,一般是由专业建模工具生成模型文件再导入的方式将模型引入到我们的3D场景中进行使用。以GLTF加载器(GLTFLoader)为例,加载gltf模型......原创 2022-06-06 18:13:56 · 25822 阅读 · 4 评论 -
Three.js学习三——借助控制器操作相机
目录Three.js的控制器如何使用控制器完整代码在 Three.js学习二——Three.js极简入门 中已经介绍如何搭建Three.js开发环境并实现一个包含旋转立方体的场景示例,本文将引进一个控制器的念并使用”轨道控制器”(OrbitControls)来达到从不同方向展示场景内容的效果。Three.js的控制器three.js的核心专注于3D引擎最重要的组件。其它很多有用的组件 —— 如控制器(control)、加载器(loader)以及后期处理效果(post-processing effe原创 2022-05-07 16:56:08 · 18098 阅读 · 11 评论 -
Three.js学习二——Three.js极简入门
准备硬件和环境1、一台可用浏览器的带文件系统的电脑;2、下载官网提供的代码包,官方提供的示例和相关库文件都在里面,官网地址:https://threejs.org/;3、下载安装vscode编辑器,地址:https://code.visualstudio.com/Download安装好后,在vscode的插件市场搜索 Live Server,点击安装,方便开小型服务,解决因直接打开的文件中存在import,导致跨源请求被拦截的问题。掌握一些概念性知识1、前端基本功 – HTML+CSS+J原创 2022-05-03 23:38:54 · 27274 阅读 · 1 评论 -
Vue项目中使用Three.js写Web3D页面问题记录
在Vue项目中使用Three.js出现明显卡顿现象:单页写的物体自动移动移植到Vue项目中明显卡顿原因:用浏览器开发者工具中的Performance分析网页性能,发现有一项reactiveGetter耗时占比高,展开其中包含调用Three.js相关函数,结合Vue响应式原理,Vue会对data里面的变量进行变化追踪,占用了资源。解决方法:将data中的数据写到mounted中或者定义当页局部变量在Vue项目中退出动画页面还会调用requestAnimationFrame现象:在Vue项目中某页面W原创 2022-01-19 16:32:13 · 17535 阅读 · 0 评论 -
Three.js学习一——Three.js学习路线(供参考)
前期准备前端基本功 – HTML+CSS+JS ,至少会写需要导入外部JS的单页HTMLThree.js 概念 – Three.js是基于原生WebGL封装运行的三维引擎,在所有WebGL引擎中,Three.js是国内文资料最多、使用最广泛的三维引擎。入门Three.js直接跟着官方文档走就好,官方文档????尝试跟着写页面,我们发现基于Three.js写页面的三要素是:场景(Scene)、相机(Camera)、渲染器(Renderer)熟练掌握官网提供了很多examples,里面找到自己原创 2021-12-31 17:38:41 · 23327 阅读 · 7 评论