dawn888 - 博客园

Threejs【坐标转换】如何让annotation跟随物体一起旋转

摘要：现在根据鼠标点击的屏幕位置能够得到屏幕的坐标event.clientX和event.clientY，然后我的annotation就初始化在这个屏幕坐标的位置，那么如何绑定annotation和三维物体，使得物体旋转的时候可以让annotation跟随物体一起旋转呢？问题一：我知道的一种方法如下： / 阅读全文

posted @ 2020-03-08 22:03 dawn888 阅读(1226) 评论(0) 推荐(0)

Three.js如何选中外部模型

摘要： 1.问题 three.js中模型选中使用的是射线法，根据摄像机角度，鼠标点击位置和模型选中的distance参数判断来选中模型。对于原生的矢量模型完全没有问题，但是当遇到导入的外部模型，如obj、stl等的时候，就发现完全选中不了，本文就如果解决选中外部模型和原生模型问题进行解决。先说说射线法，参阅读全文

posted @ 2020-03-08 21:55 dawn888 阅读(2416) 评论(0) 推荐(0)

ThreeJS中的点击与交互——Raycaster的用法

摘要：基础概念坐标系我们的手机屏幕是二维的，但是我们展示物体的世界是三维的，当我们在构建一个物体的时候我们是以一个三维世界既是世界坐标来构建，而转化为屏幕坐标展示在我们眼前，则需要经历多道矩阵变化，中间webGL替我们操作了许多事情。世界坐标系：在webGL中，世界坐标系是以屏幕中心为原点(0, 0 阅读全文

posted @ 2020-03-08 21:49 dawn888 阅读(1989) 评论(0) 推荐(0)

threejs地球之后：动画的控制

摘要：上一篇知道如何制作threejs地球之后，就正式coding了，当然还是使用最心爱的Vue。本篇会有一些代码，但是都是十几行的独立片段，相信你不用担心。布局在进入本篇主题前，要简单看一下xplan中的自适应解决方案，即如何在不同尺寸设备中，都保证地球最合适的大小和位置，并且与其配套的一些图片（虚阅读全文

posted @ 2020-03-08 21:42 dawn888 阅读(2498) 评论(0) 推荐(0)

threejs创建地球

摘要：上个月底，在朋友圈看到一个号称“这可能是地球上最美的h5”的分享，点进入后发现这个h5还很别致，思考了一会，决定要不高仿一个? 到今天为止，高仿基本完成，线上地址 github地址除了手机端的media控制没有去兼容，其他的基本都给仿了。那为了让你觉得是高仿，最好使用chrome的手机调试模式阅读全文

posted @ 2020-03-08 21:33 dawn888 阅读(4898) 评论(3) 推荐(0)

3d模型一般怎么导入到到Threejs中使用

摘要：这是我之前做的一个demo，导入的3d模型文件是obj格式的，需要使用OBJLoader和MTLLoader， mtl文件用于描述多边形可视面貌的材质如果你可以导出obj、mtl文件的话，那么就可以使用下面的代码把3d模型添加到three.js构建的场景里了 function loadBuild() 阅读全文

posted @ 2020-03-08 21:20 dawn888 阅读(12790) 评论(0) 推荐(0)

用three.js开发三维地图实例

摘要：公司要做智慧消防楼层可视化，需要用到web3d，开源的引擎中先研究了cesium三维地球，但cesium做楼层感觉是大材小用，而且体验也不好，最终选用的是功能强大、更适合小型场景的three。 three是图形引擎，而web二维三维地图都是基于图形引擎的，所以拿three来开发需求简单的三维地图应用阅读全文

posted @ 2020-03-08 09:07 dawn888 阅读(8254) 评论(1) 推荐(1)

threejs使用各种坑实验过程

摘要：第一次使用threejs到实际项目中，开始的时候心情有点小激动，毕竟是第一次嘛，然而做着做着就感受到这玩意水好深，满满的都是坑，填都填不过来。经过老板20天惨无人道的摧残，终于小有成就。因为第一次搞这玩意，相对的遇到的问题也是大把的，让我来一一诉说一路上遇到的各种问题。开发使用： C4D、Blend 阅读全文

posted @ 2020-03-07 20:09 dawn888 阅读(17257) 评论(4) 推荐(4)

用threejs实现三维全景图

摘要：网络上看到了3D全景图，发现threejs里面有一个库竟然可以实现，一下我贴出代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, use 阅读全文

posted @ 2020-03-07 13:19 dawn888 阅读(11136) 评论(2) 推荐(0)

用threejs 实现3D物体在浏览器展示

摘要：用threejs 实现3D物体在浏览器展示，通过鼠标平移，缩放，键盘箭头按钮左右移动等功能展示。 <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>My first three.js app</title> <style> * { m 阅读全文

posted @ 2020-03-07 13:09 dawn888 阅读(3201) 评论(0) 推荐(0)