数据可视化133d技术.pptx

3D数据可视化李春芳2019.6.2WebGL简介（/p/jellyfish//p/jellyfish/）WebGL是在浏览器中实现三维效果的一套规范。?Three.js写3D程序，最好是用c++，保证效率javascript的计算能力因为google的V8引 擎得到了迅猛的增强?/mrdoob/three.jsHello3D.htm3D图形1-需要3个组建场景（scene）相机（camera）：人的眼睛渲染器（renderer）场景，相机，渲染器之间的关系3D世界的组成3D世界是由点组成，两个点能够组成一条直线，三个不在一条直线上的点就能够组成一个三角形面，无数三角形面就能够组成各种形状的物体网格模型叫做Mesh模型给物体贴上皮肤，或者专业点就叫做纹理中间使用了一个“||”（或）运算符，就是当x=null或者undefine时，this.x的值应该取0。在Threejs中定义一个点定义一个点x轴正方向向右，y轴正方向向上，z轴由屏幕从里向外。坐标系在Threejs中，一条线由点，材质和颜色组成。点由THREE.Vector3表示，Threejs中没有提供单独画点的函数，它必须被放到一个THREE.Geometry形状中，这个结构中包含一个数组vertices，这个vertices就是存放无数的点（THREE.Vector3）的数组。可以使用专为线准备的材质，THREE.LineBasicMaterial。画线修改为网格线动态的场景第一种方法是让物体在坐标系里面移动，摄像机不动。第二种方法是让摄像机在坐标系里面移动，物体不动。渲染循环物体运动还有一个关键点，就是要渲染物体运动的每一个过程，让它显示给观众。渲染的时候，我们调用的是渲染器的render() 函数。代码如下：renderer.render( scene, camera );如果我们改变了物体的位置或者颜色之类的属性，就必须重新调用render()函数，才能够将新的场景绘制到浏览器中去。不然浏览器是不会自动刷新场景的。需要javascript的一个特殊函数，这个函数是requestAnimationFrame。OrthographicCamera( left, right, top, bottom, near, far )var camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000 );scene.add( camera );相机与投影透视投影相机的构造函数如下所示：PerspectiveCamera( fov, aspect, near, far )视角fov近平面near远平面far纵横比aspectvar camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );scene.add( camera );投影相机人类的正常视角是120度左右集中注意力看清楚，在30-40度世界有了光，就不在黑暗THREE.Light只是其他所有光源的基类环境光环境光就是在场景中无处不在的光，它对物体的影响是均匀的，也就是无论你从物体的那个角度观察，物体的颜色都是一样的，这就是伟大的环境光。var light = new THREE.AmbientLight( 0xff0000 );scene.add( light );点光源点光源用PointLight来表示，它的构造函数如下所示：PointLight( color, intensity, distance )这个类的参数稍微复杂一些，我们花点时间来解释一下：Color：光的颜色Intensity：光的强度，默认是1.0,就是说是100%强度的灯光，distance：光的距离，从光源所在的位置，经过distance这段距离之后，光的强度将从Intensity衰减为0。?THREE.SpotLight( hex, intensity, distance, angle, exponent )Hex：聚光灯发出的颜色，如0xFFFFFFIntensity：光源的强度，默认是1.0，如果为0.5，则强度是一半Distance：光线的强度，从最大值衰减到0，需要的距离。 默认为0，表示光不衰减，如果非0，则表示从光源的位置到Distance的距离，光都在线性衰减。到离光源距离Distance时，光源强度为0.Angle：聚光灯着色的角度，用弧度作为单位，这个角度是和光源的方向形成的角度。exponent：光源模型中，衰减的一个参数，越大衰减约快。聚光灯不带任何光源的物体不带任何的光源，定义物体的颜色为黑色，其值为0x000000