three.js3D学习(2)
来源:互联网 发布:二手船用雷达淘宝网 编辑:程序博客网 时间:2024/06/10 05:49
转载:http://www.cnblogs.com/shawn-xie/archive/2012/08/20/2647184.html
渲染器梳理
这是three.js提供的渲染方式,WebGL在渲染效果上更胜一筹,WebGL的渲染能够最大程度表现你制作精美的场景,如果你的设备支持它,这个渲染器具有比CanvasRenderer更好的性能,相反地,CanvasRenderer则具有更好的兼容性。
//开启Three.js渲染器:WebGLRenderer //声明全局变量 var renderer; function initThree() { //获取容器的宽高 width = document.getElementById('canvas3d').clientWidth;//获取画布「canvas3d」的宽 height = document.getElementById('canvas3d').clientHeight;//获取画布「canvas3d」的高 //声明渲染器对象:WebGLRenderer renderer=new THREE.WebGLRenderer({ antialias:true,//antialias:true/false是否开启反锯齿 precision:"highp",//precision:highp/mediump/lowp着色精度选择 alpha:true,//alpha:true/false是否可以设置背景色透明 premultipliedAlpha:false,//? stencil:false,//? preserveDrawingBuffer:true,//preserveDrawingBuffer:true/false是否保存绘图缓冲 maxLights:1//maxLights:最大灯光数 }); //指定渲染器的高宽(和画布框大小一致) renderer.setSize(width, height ); //追加 【canvas】 元素到 【canvas3d】 元素中。 document.getElementById('canvas3d').appendChild(renderer.domElement); //设置canvas背景色(clearColor)和背景色透明度(clearAlpha) renderer.setClearColor(0x000000,0.5); }
流程如下:
1.声明渲染器对象,我们用new THREE.WebGLRenderer()来新建一个WebGL渲染器。
其中WebGLRenderer()中有一些参数我们可以设置,以下这些参数来自于官方文档:
antialias:
值:true/false
含义:是否开启反锯齿,设置为true开启反锯齿。
precision:
值:highp/mediump/lowp
含义:着色精度选择。
alpha:
值:true/false
含义:是否可以设置背景色透明。
premultipliedAlpha:
值:true/false
含义:?
stencil:
值:true/false
含义:?
preserveDrawingBuffer:
值:true/false
含义:是否保存绘图缓冲,若设为true,则可以提取canvas绘图的缓冲。
maxLights:
值:数值int
含义:最大灯光数,我们的场景中最多能够添加多少个灯光。
2.制定渲染器的宽高,我们用renderer.setSize(width,height)来设置;
3.追加生成的canvas元素到容器元素中。canvas对象的获取方法为renderer.domElement;
4.设置canvas背景色(clearColor)和背景色透明度(clearAlpha),renderer.setClearColor(clearColor,clearAlpha);
如何让物体动起来呢?
HTML5为我们提供了requestAnimFrame,它会自动在每次页面重绘前调用传入的函数。
如果我们一开始这样渲染:
function render(){ renderer.render(scene, camera);}只需要改成这样:function render(){ requestAnimationFrame(render); object.position.x += 1; renderer.render(scene, camera);}
- three.js3D学习(2)
- three.js3D学习(1)
- three.js学习 函数使用方法散记2
- three.js学习
- three.js学习
- autolayout - sizeClass 学习 ~ three
- JavaScript学习three
- Three.js学习
- Three学习笔记-1
- Struts2框架学习---Three
- three.js学习点滴(2)— 模型导入
- Three.JS学习 2:Threejs定义点和面
- three.js学习点滴0
- three.js学习笔记 射线
- swift2.0 学习笔记Three
- JAVA学习笔记three:异常
- Three.JS学习 6:光源
- Three.JS学习 8:纹理
- easyUI使用技巧收集
- Qt库制作及测试
- 20170511_请说清楚什么是菱形继承
- 保存图片到本地并可以在相册中显示出来
- QT 启动新线程执行QTimer
- three.js3D学习(2)
- NumPy doc (三)
- Could not find method compile() for arguments
- Recurrent Neural Networks
- Android获得手机唯一设备ID号
- is marked as crashed and should be repaired when using LOCK TABLES
- Linux 4.1最新内核usb与hid驱动分析记录
- 本地生成七牛token
- CRC差错检校