three.js初涉略(一)

<!–

最近要研究一下webgl,发现了webgl中文网(http://www.hewebgl.com/article/articledir/1)。边研究教程边做下记录

–>

three.js是WebGL开源框架,它能写出在浏览器上流畅运行的3D程序。

代码地址:https://github.com/mrdoob/three.js。

支持Webgl的浏览器很多,例如Chrome、FireFox、360安 全浏览器6.0等,而IE浏览器对Webgl标准的支持就不太好。

第一个框架

三大组建

在Three.js中,要渲染物体到网页中,我们需要3个组建:场景(scene)、相机(camera)和渲染器(renderer)。有了这三样东西,才能将物体渲染到网页中去。

var scene = new THREE.Scene();  // 场景var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);// 透视相机var renderer = new THREE.WebGLRenderer();   // 渲染器renderer.setSize(window.innerWidth, window.innerHeight);    // 设置渲染器的大小为窗口的内宽度,也就是内容区的宽度document.body.appendChild(renderer.domElement);

  渲染器renderer的domElement元素,表示渲染器中的画布,所有的渲染都是画在domElement上的

添加物体到场景中

var geometry = new THREE.CubeGeometry(1,1,1);var material = new THREE.MeshBasicMaterial({color: 0x00ff00});var cube = new THREE.Mesh(geometry, material);scene.add(cube);

  THREE.CubeGeometry是一个立方体,cubeGeometry的原型如下代码所示:

CubeGeometry(width, height, depth, segmentsWidth, segmentsHeight, segmentsDepth, materials, sides)

  

渲染

渲染应该使用渲染器,结合相机和场景来得到结果画面。

function render() {    requestAnimationFrame(render);    cube.rotation.x += 0.1;    cube.rotation.y += 0.1;    renderer.render(scene, camera);}render();

  

渲染函数的原型如下:

render( scene, camera, renderTarget, forceClear )

renderTarget:渲染的目标,默认是渲染到前面定义的render变量中

forceClear:每次绘制之前都将画布的内容给清除,即使自动清除标志autoClear为false,也会清除。

渲染有两种方式:实时渲染和离线渲染 。

事先渲染好一帧一帧的图片,然后再把图片拼接成电影的。这就是离线渲染。

实时渲染:就是需要不停的对画面进行渲染,即使画面中什么也没有改变,也需要重新渲染。

其中一个重要的函数是requestAnimationFrame,这个函数就是让浏览器去执行一次参数中的函数,这样通过上面render中调用requestAnimationFrame()函数,requestAnimationFrame()函数又让render()再执行一次,就形成了我们通常所说的游戏循环了。