webGL

webGL 新手的总结

参考webGL

http://www.hewebgl.com/article/articledir/1

参考three.js 基本控件

https://www.cnblogs.com/catherinezyr/p/7047465.html

three.js 材质 MeshBasicMaterial

https://blog.csdn.net/zhulx_sz/article/details/78624801

渲染器（renderer）

有两种渲染器 ：

var  renderer=new THREE.CanvasRenderer();     几何级别的渲染，兼容性更好

var renderer=new THREE.WebGLRenderer();       像素级的渲染，渲染效果更好

下面是WEBGLRenderer的

new THREE.WebGLRenderer（）；声明渲染器renderer 

renderer.setSize(width, height);设置渲染器的大小为窗口的内宽度，也就是内容区的宽度renderer.setClearColor(0xFFFFFF,1.0);          更改背景颜色， 光源强度

renderer.shadowMapEnabled = true;允许阴影射  

renderer.render( scene, camera, renderTarget, forceClear )，renderTarget：渲染的目标，默认是渲染到前面定义的render变量中forceClear：每次绘制之前都将画布的内容给清除，即使自动清除标志autoClear为false，也会清除。                                                             

requestAnimationFrame(render);循环渲染

 

相机（camera）

new THREE.PerspectiveCamera( fov, aspect, near, far )，camera.fov=45，类似于物体和camera的距离，值越小物体越近就越大，aspect实际窗口的纵横比，near不要设置为负值        声明透视相机        http://www.hewebgl.com/article/getarticle/59                                                                

new THREE.OrthographicCamera( left, right, top, bottom, near, far )，声明正交相机，定义一个视景体 

camera.position= new THREE.Vector3(0,0,0);        camera.position.x=0；        camera的xyz坐标位置 

camera.up = new THREE.Vector3(0,1,0);        camera.up.x = 0;，camera的坐标系，y轴向上，即右手坐标系

camera.lookAt({x : 0, y : 0, z : 0 });或者camera.lookAt(scene.position);，camera面向的位置

camera.updateProjectionMatrix(); 

 

场景（scene）

scene = new THREE.Scene();

就这么一句，声明场景

 

light 灯光

new THREE.Light ( hex )        hex是一个16进制的颜色值 http://www.hewebgl.com/article/getarticle/60                                                                

new THREE.THREE.SpotLight( hex, intensity, distance, angle, exponent,visible )  聚光灯      distance光源可以照多远，,Angle：聚光灯着色的角度，用弧度作为单位，这个角度是和光源的方向形成的角度。exponent：光源模型中，衰减的一个参数，越大衰减约快。  

https://blog.csdn.net/weixin_41111068/article/details/82668290

http://www.hangge.com/blog/cache/detail_1812.html

上面两个网站都是聚光灯的

 

new THREE.AreaLight()，区域光

new THREE.DirectionaLight(hex, intensity )，方向光，一组没有衰减的平行的光线，类似太阳光的效果。

new THREE.AmbientLight( hex )，hex是一个16进制的颜色值，环境光。环境光并不在乎物体材质的 color 属性，而是 ambient 属性

new THREE.PointLight( color, intensity, distance )，点光源 ，Color：光的颜色Intensity：光的强度，默认是1.0,就是说是100%强度的灯光，distance：光的距离，从光源所在的位置，经过distance这段距离之后，光的强度将从Intensity衰减为0。 默认情况下，这个值为0.0，表示光源强度不衰减。        

New HemisphereLight（groudColor,color,intensity）半球光

New LensFlare（texture,size,distance,blending,color）镜头炫光                                        

light.position.set(0, 0,300);光源的xyz坐标

light.castShadow = true;投射阴影

light.visible = !e;        移除该光源

Light.color=；可以改变光源的颜色

 

 

不想总结了。。。看那两个网站吧。