04 2017 档案
摘要：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.如何进入编辑模式 可直接通过“Tab”快捷键进入编辑模式，或者选择界面底部的下拉列表： 如果想退出编辑模式，可再按下“Tab”键退出。 2.编辑选择 进入编辑状态后，我们可以通过鼠标右键来选择某个顶点（Vertex）。并且可以任意移动这些顶点。如果几个顶点构成了一个面，那么可通过“Shift”键
阅读全文
摘要：1.一个场景至少需要的三种类型组件 相机/决定哪些东西将在屏幕上渲染 光源/他们会对材质如何显示，以及生成阴影时材质如何使用产生影响 物体/他们是在相机透视图里主要的渲染队形：方块、球体等 2.浏览器兼容 Moziller Firefox：4.0版本以后开始支持； Google Chrome：第9版以后开始支持 Safari：5.1版本开始支持； Op...
阅读全文
摘要：1.旋转场景 使用鼠标中间键旋转整个场景。按住Shift键，再操作鼠标中间键则可平移整个场景。 2.数字键盘功能 数字键盘1、3、7，分别控制场景向前、向后、向上显示。 数字键盘5，可以在正射投影（Ortho）/透视投影（Persp）之间切换。 数字键盘0，从摄像头位置处查看物体，这个位置查看的物体
阅读全文
摘要：1.手动调整物体的属性 当我们添加了一个物体后，例如一个Torus物体。 在左侧下角部分能看到“Add Torus”面板，面板包含了Locatin、Rotation、Major Segments、Minor Segments以及其他属性，可直接手动修改。 如果想调整Torus的环半径，可直接设置“M
阅读全文
摘要：1.多图层切换 Blender也有图层的概念，我们在一个图层上建立了一个模型，可以在另外一个图层新建一个独立的模型。界面底部包含了Layer切换按钮。如下图所示： 当前我们正在操作第一个图层，如果想在其他图层上新建模型，只需单击空面板即可。当然可也可以直接使用快捷键M自动弹出图层面板，选择切换。 2
阅读全文
摘要：1.如何实现雾化 实现雾化的方式由多种，这里使用最简单的一种：线性雾化（linear fog）。在线性雾化中，某一点的雾化程度取决于它与视点之间的距离，距离越远雾化程度越高。线性雾化有起点和终点，起点表示开始雾化之处，终点表示完全雾化之处两点之间某一点的雾化程度与该点与视点的距离呈线性关系。比终点更远的点完全雾化了，即完全看不见了。 某一点雾化的程度可以被定义为雾化因子（fog f...
阅读全文
摘要：1.纹理坐标 纹理坐标是纹理图像上的坐标，通过纹理坐标可以在纹理图像上获取纹理颜色。WebGL系统中的纹理坐标系统是二维的，如图所示。为了将纹理坐标和广泛使用的x、y坐标区分开来，WebGL使用s和t命名纹理坐标（st坐标系统）。 纹理图像的四个角坐标为左下角（0.0，0.0），右下角（1.0,0.0），右上角（1.0， 1.0）和左上角（0.0， 1.0）。纹理坐标很通用，因为...
阅读全文
摘要：1.requestAnimationFrame(func) 请求浏览器在将来某时刻回调函数func以完成重绘。requestAnimationFrame()成功的一个关键是确定你在执行其他用户diamante之前就请求了下一帧，这对异常处理非常重要。如果你在动画回调函数中驱动你的整个3D应用，而代码在请求下一帧之前产生了一个异常，你的整个应用就会挂掉。如果你在做其他事情之前请求下一帧，那么...
阅读全文
摘要：1.编译GLSL ES代码，创建和初始化着色器供WebGL使用。这些过程一般分为7个步骤： 创建着色器对象（gl.createShader()）; 向着色器对象中填充着色器程序的源代码（gl.shaderSource()）； 编译着色器（gl.compileShander()）; 创建程序对象（gl.createProgram()）; 为程序对象分配着色器（...
阅读全文
摘要：1.着色（shading） 在三维图形学术语“着色”的真正含义就是，根据光照条件重建“物体各表面明暗不一的效果”的过程。明白着色过程，需要考虑两件事： 1.发出光线的光源类型。 2.物体表面如何反射光线。 2.光源类型 真实世界中的光主要有两种，平行光（directional light），类似于自
阅读全文
摘要：1.观察目标点和上方向 为了确定观察者的状态，你需要获取两项信息：视点，即观察者的位置；观察目标点（look-at point），即被观察目标所在的点，它可以用来确定视线。此外，因为我们需要把观察到的景象绘制到屏幕上，还需要知道上方向（up direction）。有了这三项信息，就可以确定观察者的状态了。 视点：观察者所在的三维空间中位置，视线的起点。视点坐标一般用(eyeX, ...
阅读全文
摘要：1.类型转换内置函数 转换/函数/描述 转换为整形数/int(float)/将浮点数的小数部分删去，转换为整形数（比如，将3.14转换为3） 转换为整形数/intl(bool)/true被转换为1，false被转换为0 转换为浮点数/float(int)/将整形数转换为浮点数（比如，将8转换为8.0） 转换为浮点数/float(bool)/true被转换为1...
阅读全文
摘要：Matrix4是由>作者写的提供WebGL的4*4矩阵操作的方法库，简化我们编写的代码。源代码共享地址，点击链接：Matrix4源代码。 下面罗列了Matrix4库的所有方法： 1.setIdentity() 将Matrix4实例初始化为单位阵 2.setTranslate(x, y, z) 将Matrix4实例设置为平移变换矩阵，...
阅读全文
摘要：1.三角函数 坐标轴采用右手法则，沿Z轴的逆时针方向为正角度，假设原始点为p(x,y,z),a是X轴旋转到点p的角度，r是从原始点到p点的距离。用这两个变量计算出点p的坐标，等式如下： x = rcos a; y = rsin a; 类似的可以使用r,a,b(p旋转的角度)来表示p'的坐标: x' = r cos(a + b); y' = r sin(a + b); 利用三...
阅读全文
摘要：1.使用缓冲区对象向顶点着色器传入多个顶点的数据，需要遵循以下五个步骤： 1.1 创建缓冲区对象（gl.createBuffer()）。 1.2 绑定缓冲区对象（gl.bindBuffer()）。 1.3 将数据写入缓冲区对象（gl.bufferData()）。 1.4 将缓冲区对象分配给一个att
阅读全文
