three.js初涉略（一）

时间：2022-09-01 15:54:21

<!--

最近要研究一下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()再执行一次，就形成了我们通常所说的游戏循环了。

相关文章