随笔分类 - three-js
three-js
摘要：1.使用requestAnimationFrame()来驱动动画 从前，Web应用使用定时器（timer）来控制页面内容动画，通过setTimeout()或setInterval()这两个函数。随着Web 应用开始包含更复杂的动画和交互，这种方式明显遭遇到一些关键问题。 1）.定时器也设置好的恒定间隔来调用函数，无论是否是绘制图形的最佳时机。 2).在定时器回调中执行的Ja...
阅读全文
摘要：WebGL可以用来做3D效果的全景图呈现，例如故宫的全景图。但有时候我们不仅仅只是呈现全景图，还需要增加互动。故宫里边可以又分了很多区域，例如外朝中路、外朝西路、外朝东路等等。我们需要在3D图上做一些标记表示某个小的区域。当点击这个标记时，界面切换到对应标记区域的全景图。下图是实现此功能的一个小DE
阅读全文
摘要：我们要实现的功能比较简单：首先通过坐标定位、我的位置、地址搜索等方式，调用google map api获取地址信息。然后根据地址信息中的全景信息获取当前缩放级别的全景信息。最终把这些全景信息通过WebGL方法显示在屏幕上。 了解了Google街景图的呈现原理，像国内的街景呈现，景区全景呈现不外乎都是
阅读全文
摘要：threex.domevents是一个three.js的扩展库，支持3D场景的交互。和我们操作DOM树的事件相似，名称都是一样的。所以使用起来非常方便。另外他也提供了连接操作。单击网格可实现跳转功能。 如果仅仅使用Dom事件，需要引入： 如果需要使用链接跳转，还需要引入： 不管是使用事件还是跳转，都得创建DomEvents对象： var domEvents =...
阅读全文
摘要：在本篇随笔中，我们学习下什么是对象选择，投影和反投影是如何工作的，怎样使用Three.js构建可使用鼠标和对象交互的应用。例如当鼠标移到对象，对象变成红色，鼠标移走，对象又恢复原来的颜色。 本篇随笔的源代码来自于：https://github.com/sole/three.js-tutorials/tree/master/object_picking 这里还有更多的例子可供...
阅读全文
摘要：1.创建可用Physijs的基本Three.js场景 创建一个可用Physijs的Three.js场景非常简单，只要几个步骤即可。首先我们要包含正确的文件， 需要引入physi.js文件。实际模拟物理场景时非常耗费CPU的，如果我么能在render线程中做的话，场景的帧频会受到严重的影响。为了弥补这
阅读全文
摘要：1.设置后期处理 设置Three.js库为后期处理做准备，我们需要通过以下步骤对当前的配置进行修改： 1）创建一个EffectComposer（效果组合器）对象，然后在该对象上添加后期处理通道。 2）配置该对象，使它可以渲染我们的场景，并应用额外的后期处理步骤。 3）在render循环中，使用Eff
阅读全文
摘要：1.如何通过鼠标获取网格对象 首先需要把鼠标的起始位置在左上角的屏幕坐标转换为笛卡尔坐标。然后将坐标转为为以Camera为中心点的三维空间坐标。接下来根据摄像头位置和鼠标位置的法向量创建射线对象。最终根据射线对象的intersectObjects函数确认哪个网格被选中。 下面是比较经典的使用方法：
阅读全文
摘要：加载和使用纹理需要了解以下几个方面：在Three.js里加载纹理并应用到网格上；使用凹凸贴图和法线贴图为网格添加深度和细节；使用光照贴图创建假阴影；使用环境贴图在材质上添加反光细节；使用光亮贴图，让网格的某些部分变得“闪亮”；通过修改网格的UV贴图，对贴图进行微调；将HTML5画布和视频元素作为纹理
阅读全文
摘要：1.对象合并 使用THREE.Group对象作为组合对象，调用它的add函数附加其他几何体。如下面的代码，创建了两个几何体sphere、cube，然后调用group的add函数，把两个几何体组合在一起。代码中的redraw函数在最后调用了position.BoundingBox()函数，用来定位组合
阅读全文
摘要：1.粒子材质和粒子几何体 创建粒子系统的点，可以存放在Geometry几何体中。使用Geometry的vertices保存点、colors保存点的颜色。但我们必须使用粒子的专用材质对象PointCloudMaterial（原名叫做ParticleBasicMaterial）设置材质。包含的属性如下列
阅读全文
摘要：1.简单几何体 three.js提供的稍微简单点的几何体包括有：PlaneGeometry(平面)、CircleGeometry（圆形）、ShapeGeometry（塑性）、CubeGeometry（立方体）、CylinderGeometry（圆柱）、TorusGeometry（圆环）、TorusK
阅读全文
摘要：1.three.js库提供的光源 three.js库提供了一些列光源，而且没种光源都有特定的行为和用途。这些光源包括： 光源名称/描述 AmbientLight(环境光）/这是一种基础光源，它的颜色会添加到整个场景和所有对象的当前颜色上 PointLight(点光源)/空间中的一点，朝所有的方向发射
阅读全文
摘要：1.three.js提供哪些材质？ MeshBasicMaterial(网格基础材质)/基础材质，，可以用它富裕几何体一种简单的亚瑟，或者显示几何体的线框 MeshDepthMaterial（网格深度材质）/根据网格到相机的举例，这种材质决定如何给网格染色 MeshNormalMaterial(网格
阅读全文
摘要：1.一个场景至少需要的三种类型组件 相机/决定哪些东西将在屏幕上渲染 光源/他们会对材质如何显示，以及生成阴影时材质如何使用产生影响 物体/他们是在相机透视图里主要的渲染队形：方块、球体等 2.浏览器兼容 Moziller Firefox：4.0版本以后开始支持； Google Chrome：第9版以后开始支持 Safari：5.1版本开始支持； Op...
阅读全文
