Heavi的博客

摘要： 我们要实现的功能比较简单：首先通过坐标定位、我的位置、地址搜索等方式，调用google map api获取地址信息。然后根据地址信息中的全景信息获取当前缩放级别的全景信息。最终把这些全景信息通过WebGL方法显示在屏幕上。 了解了Google街景图的呈现原理，像国内的街景呈现，景区全景呈现不外乎都是 阅读全文

摘要： threex.domevents是一个three.js的扩展库，支持3D场景的交互。和我们操作DOM树的事件相似，名称都是一样的。所以使用起来非常方便。另外他也提供了连接操作。单击网格可实现跳转功能。 如果仅仅使用Dom事件，需要引入： 如果需要使用链接跳转，还需要引入： 不管是使用事件还是跳转，都得创建DomEvents对象： var domEvents =... 阅读全文

摘要： 1.Styled Layer Descriptor 标准描述了稳当的结构合使用规则。一个文档包含了符号定义和绘制规则，那么这个文档就叫做Styled Layer Desciptor(SLD)样式，它是一个text/Xml文件，扩展名为.sld。SLD基于XML标记语言，附加的标准是一个XSD sch 阅读全文

摘要： 在本篇随笔中，我们学习下什么是对象选择，投影和反投影是如何工作的，怎样使用Three.js构建可使用鼠标和对象交互的应用。例如当鼠标移到对象，对象变成红色，鼠标移走，对象又恢复原来的颜色。 本篇随笔的源代码来自于：https://github.com/sole/three.js-tutorials/tree/master/object_picking 这里还有更多的例子可供... 阅读全文

摘要： 1.设置后期处理 设置Three.js库为后期处理做准备，我们需要通过以下步骤对当前的配置进行修改： 1）创建一个EffectComposer（效果组合器）对象，然后在该对象上添加后期处理通道。 2）配置该对象，使它可以渲染我们的场景，并应用额外的后期处理步骤。 3）在render循环中，使用Eff 阅读全文

摘要： 1.创建可用Physijs的基本Three.js场景 创建一个可用Physijs的Three.js场景非常简单，只要几个步骤即可。首先我们要包含正确的文件， 需要引入physi.js文件。实际模拟物理场景时非常耗费CPU的，如果我么能在render线程中做的话，场景的帧频会受到严重的影响。为了弥补这 阅读全文

摘要： UV映射是一个用来2D图片纹理转换3D网格的标准技术。U和V表示平面坐标的两个轴，对应了3D空间中X、Y和Z。Blender手册是这样解释UV映射的：想象一个3D模型对象，例如一个球体，平铺到桌面上。每个3D的坐标都会在平面上有一个2D坐标对应。Blender提供了另外一种界面“UV/Image E 阅读全文

摘要： 1.如何通过鼠标获取网格对象 首先需要把鼠标的起始位置在左上角的屏幕坐标转换为笛卡尔坐标。然后将坐标转为为以Camera为中心点的三维空间坐标。接下来根据摄像头位置和鼠标位置的法向量创建射线对象。最终根据射线对象的intersectObjects函数确认哪个网格被选中。 下面是比较经典的使用方法： 阅读全文

摘要： 加载和使用纹理需要了解以下几个方面：在Three.js里加载纹理并应用到网格上；使用凹凸贴图和法线贴图为网格添加深度和细节；使用光照贴图创建假阴影；使用环境贴图在材质上添加反光细节；使用光亮贴图，让网格的某些部分变得“闪亮”；通过修改网格的UV贴图，对贴图进行微调；将HTML5画布和视频元素作为纹理 阅读全文

摘要： 1.对象合并 使用THREE.Group对象作为组合对象，调用它的add函数附加其他几何体。如下面的代码，创建了两个几何体sphere、cube，然后调用group的add函数，把两个几何体组合在一起。代码中的redraw函数在最后调用了position.BoundingBox()函数，用来定位组合 阅读全文