随笔分类 -  Three.js

three.js 汽车行驶动画效果
摘要：实现原理是使用TWEEN.Tween实现动画效果 实现 汽车模型加载 使用Promise编写模型的异步加载方法 参数position是汽车初始位置，参数rotation是汽车初始朝向 Car.prototype.loadCar = function (position, rotation) { le 阅读全文
posted @ 2023-12-06 17:05 0611163 阅读(2457) 评论(4) 推荐(13)
Three.js 入门
摘要：Demo代码地址： https://gitee.com/s0611163/three.js-demo Three.js Three.js下载 从GitHub上下载一个Release版本，https://github.com/mrdoob/three.js，本Demo使用的是r112版本，下载地址：t 阅读全文
posted @ 2022-03-04 11:31 0611163 阅读(747) 评论(0) 推荐(0)
three.js 视频融合
摘要：MixVideo.js代码： //视频融合 import * as THREE from '../build/three.module.js'; import { API } from '../js.my/API.js'; import { Msg } from '../js.my/Msg.js'; 阅读全文
posted @ 2021-12-26 15:20 0611163 阅读(965) 评论(0) 推荐(0)
three.js 消防模拟火焰烟雾效果
摘要：ParticleEngine.js实现烟雾效果 参考网址：http://stemkoski.github.io/Three.js/Particle-Engine.html ParticleEngine.js源码依赖的three.js版本是60，而我使用的three.js的版本是112，新版本不支持为 阅读全文
posted @ 2021-12-25 23:04 0611163 阅读(3547) 评论(16) 推荐(1)
three.js项目引入vue，因代码编写不当导致的严重影响性能的问题，卡顿掉帧严重
摘要：three.js项目引入vue，因代码编写不当导致的严重影响性能的问题，卡顿掉帧严重 问题排查 使用谷歌浏览器的Performance分析页面性能 可以看到vue.js的reactiveGetter方法耗时最长，刚开始看到这个觉得很奇怪，三维卡顿跟vue怎么会有关系呢？ vue.js的reactiv 阅读全文
posted @ 2021-11-20 13:01 0611163 阅读(1662) 评论(0) 推荐(0)
用 three.js 绘制三维带箭头线 (线内箭头)
摘要：在LineMaterial.js基础上修改的ArrowLineMaterial.js代码： /** * @author WestLangley / http://github.com/WestLangley * * parameters = { * color: <hex>, * linewidth 阅读全文
posted @ 2021-11-14 13:08 0611163 阅读(2553) 评论(0) 推荐(0)
three.js 火焰效果
摘要：代码是网上找的代码，通过调参、修改、封装实现的。 代码： /** * 火焰 */ import * as THREE from '../build/three.module.js'; let MyFire3 = function () { let fireVertexShader = ` attri 阅读全文
posted @ 2021-11-03 21:22 0611163 阅读(1004) 评论(3) 推荐(1)
用 three.js 绘制三维带箭头线
摘要：需求：这个需求是个刚需啊！在一个地铁场景里展示逃生路线，这个路线肯定是要有指示箭头的，为了画这个箭头，我花了不少于十几个小时，总算做出来了，但始终有点问题。我对这个箭头的要求是，无论场景拉近还是拉远，这个箭头不能太大，也不能太小看不清，形状不能变化，否则就不像箭头了。 使用到了 three.js 的 阅读全文
posted @ 2021-10-31 09:19 0611163 阅读(1780) 评论(0) 推荐(0)