引子?
最近,忽然想起曾在 WebGL 基础系列 文章中立下 flag:“后续还打算出 《ThreeJS 源码剖析》 系列”(特意翻出原话?),项目忙了一阵后,便决定开始写此系列,更新周期不固定,毕竟项目排期“天晓得”。此系列与其说是分享,倒不如说是共同学习罢了。作为最出名的 WebGL 的开源库,ThreeJS 已受到了广泛认可和好评,同时其自身也在不断更新,让开发者用的舒心放心。
说回自己,本初入图形学世界,仅凭个人兴趣撞的鼻青脸肿,但也乐在其中。自认为技术本不该有距离感,以有趣且通俗易懂的方式传播技术也是一件趣事。任凭其吹的天花乱坠,何等高大上,但其本质是服务于我们的,归根结底还是要我们接受才可。故之前的文章也尽量保持着基础、有趣、易懂的风格(偶尔会开开车?),未来亦会尝试更多元的文章风格。但其宗旨都是为了让各位更容易接受。
以上仅个人观点,如与各位观念有相悖之处,可相互交流,以彼之长补己之短。
下面正式开始 ThreeJS 源码剖析 系列?
前言?
当学习一种新技术时,大部分情况都会首选其官方文档,而文档中能最快让我们上手的章节便是 Getting Started。ThreeJS 也不例外,我们进入到其对应的 Getting Started 页面后,便能看到 Creating the scene 的代码仅有下面寥寥几行:
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 );
再滚动至最下方,各位会看到完整的 Demo:
// ...
var animate = function () {
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
};
animate();
阅读完简单的十几行代码之后,各位可能会发现这个 Demo 中在一直调用 animate()
方法,而此方法中我们修改了立方体的旋转角度,并执行了这一行代码:renderer.render( scene, camera )
。假如你没有接触过图形学或 WebGL,仅凭语义会翻译成:“渲染器渲染场景和摄像机”。没错,这一