three.js
文章平均质量分 76
evomap
如果查看案例出现问题,可以联系我
展开
-
three.js/webgl实现室内模型行走
使用three.js实现的模型室内行走案例,鼠标点击确定目标点后,模型转向并行走至目标点,并支持碰撞检测。原创 2022-08-05 01:59:45 · 3045 阅读 · 5 评论 -
使用three.js/webgl实现简易地形
在three.js中使用mapbox地形瓦片的方法原创 2022-07-22 01:54:43 · 2421 阅读 · 0 评论 -
使用three.js/webgl开发智慧城市场景的一些总结
一、城市建筑二、浮动标注三、图标告警闪烁二、城市流光三、区域轮廓热力图五、后期泛光六、全局扫描效果原创 2021-05-08 22:16:37 · 7476 阅读 · 12 评论 -
使用three.js实现跟随模型的第一人称、第三人称相机控制
最近在我原有的“室内场景demo”的基础上做了一个跟随模型的第三人称相机控制,以键盘wasd控制模型的行走,以鼠标控制模型的朝向。在线地址一、加载带动画的FBX模型这里使用了three.js中的FBXLoader来加载模型,模型加载完成之后创建动画不播放,等键盘按下之后再播放动画。二、监听键盘事件键盘的按下和抬起都可以通过事件捕捉,当鼠标按下时,我们播放FBX模型的动画,鼠标抬起时,结束动画。window.addEventListener('keydown', fun...原创 2020-06-08 01:15:19 · 12849 阅读 · 8 评论 -
three.js 三维室内地图导航实例
总用three.js做一些零散好玩的效果,却也没怎么把他们整合到一起,最近因一位网友需要,把室内地图导航走通了一下。这里主要在前端使用了有名的Dijkstra算法,关于此算法这里不再赘述,这里描述一下从路径数据准备到最佳路径输出的整个过程。在线体验地址1.节点数据准备节点是路径生成的基础,我们需要在建筑的基础上,拾取出场景中所有路径节点的坐标,作为基础数据并保存。节点数据示...原创 2019-09-03 01:08:32 · 16820 阅读 · 25 评论 -
three.js中绘制宽线的两种方式
webgl中线是没有宽度的,现实的应用中一般做法都是将线拓宽成面来绘制,有两种做法:1.纯CPU计算在线地址2.GPU着色器计算原创 2019-08-09 20:20:17 · 8900 阅读 · 12 评论 -
使用three.js模拟地球效果
地球效果参考于earth20501.创建地球这里使用的是创建一个几何为SphereGeometry的网格mesh,再贴上地球经投影后的图片作为纹理。其中地心坐标为默认THREE.Vector3(0,0,0)。const geometry = new THREE.SphereGeometry(radius, 66,44);const material = new THREE.MeshBasi...原创 2019-05-23 00:26:28 · 10123 阅读 · 4 评论 -
使用three.js模拟城市灯光秀
在线地址第一次和朋友去看城市灯光秀,就在想灯光秀的实现原理。想过投影,但是细看即没有投影源,也没有投影路径,再就只能是灯光秀墙体安装灯光体设备,统一组织所有灯光体的发光,当然这种灯光体的灯光可以是各种颜色的。电脑屏幕、手机屏幕中都有像素的概念,像素其实就是图像中的最小单元。在灯光秀整个场景中,最小的单元就是灯光体,而灯光秀的整个场景,则组成了一个大的“屏幕”。以下是我使用three.j...原创 2019-05-23 00:23:37 · 4344 阅读 · 4 评论 -
使用three.js创建粒子火焰效果
在线地址原创 2019-05-23 00:19:52 · 8481 阅读 · 9 评论 -
使用three.js创建楼层布局图
最近大半年一直在做三维部分的工作,之前做三维楼层都是外部加载使用建模工具创建的模型,但是渲染不够灵活、无法绑定房间信息,所以决定来使用three.js来创建楼层布局。在线地址1.调整光源 灯光有SpotLight、AmbientLight、DirectionalLight等、实际项目一般都是多个灯光组合的方式来创建光源。这里我使用的是Directiona...原创 2018-09-25 12:17:22 · 29873 阅读 · 46 评论 -
使用three.js搭建室内场景
公司做商城、消防、用电等项目,需要实现楼层和设备的可视化,以前都是使用其他建模工具创建的整体模型,再使用three.js的加载器加载到场景中,但是这样的加载存在缺陷,比如不能给模型的元素赋属性、不能单个点击元素、渲染单调等。所以本次参考了一些资料,不使用模型倒入,完全使用three.js搭建场景,代码有些粗燥勿怪。在线地址1.创建地板 地板是一个类似盒子,有顶部有底部有...原创 2018-09-23 12:02:17 · 26405 阅读 · 50 评论 -
使用three.js开发3d地图初探
公司要做智慧消防楼层可视化,需要用到web3d,开源的引擎中先研究了cesium三维地球,但cesium做楼层感觉是大材小用,而且体验也不好,最终选用的是功能强大、更适合小型场景的three。three是图形引擎,而web二维三维地图都是基于图形引擎的,所以拿three来开发需求简单的三维地图应用是没什么问题的。在线展示1.坐标转换 实际地理坐标为经度、纬度、高度,而th...原创 2018-05-15 16:28:10 · 43036 阅读 · 51 评论