three.js学习计划（一）

最近因为课题的原因要学习一下three.js，说实话，以前并没有接触过3D图形的编程，直接去看three.js的时候还是有点头皮发麻的，想着3D图形编程一定是难的要死要死的，可是没想到各位大神把底层图形封装的这么好，连我这种js新手加图形学白痴也能很好的阅读编写three.js的实例代码。
既然要学习一样新的东西，最好稍微了解一下它的历史渊源，这样不仅在学习的时候更加稳健，也能让你在跟大牛交流的时候不至于一头雾水。
three.js是什么，即使在three.js的github项目页上页只有短短的几句介绍，three.js是一个JavaScript编写的3D图形库，提供了<canvas>,<svg>,CSS3D和WebGL的渲染器。
three.js是托管在github上的一个开源项目，时至今日（2015-12-15）已经有519名代码贡献者。虽然在three.js的网站上提供了很多的基于three.js开发的实例，然而three.js的文档实在是不友好，只是简单的一个入门例子然后就是API，所以要学习three.js还是要去读官方实例的源代码，并且自己逐字逐句的来敲代码，做注释。
要使用three,js，首先要在你的html页面中引入它，通常我们只是使用不做调试的话直接引用three.min.js即可，引用three.js只需要一个简单的<script> 标签。

<script src="/you/path/to/three.min.js"><script>

在网页中引入three.js后你可以在网页控制台输入THREE.REVISION来查看版本信息，这里推荐chrome浏览器。

THREE.REVISION
"73"

我使用的是73版本的three.js
现在我们可以访问到THREE下的所有方法和变量了。
下面我们先来建立一个HTML标签页

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>My first three.js app</title>
<script type="text/javascript" src="you/path/to/three.min.js"></script>
</head>
<body id="canvas-frame">
<script type="text/javascript">
// 在这里写js代码
</script>
</body>
</html>

一个典型的three.js应用至少要包含渲染器（renderer）、场景（scene）、和相机（camera）三个组件。接下来就让我们来初始化这些组件。

<script type="text/javascript">
var scene, renderer, camera;
 init();

function init(){
// 初始化一个场景
 scene = new THREE.Scene();

// 初始化一个渲染器，这里选择了WebGL渲染器,并且开启可抗锯齿效果
 renderer = new THREE.WebGLRenderer({antialias: true});
// 设置渲染器的款和高，这里由于要canvas占据整个屏幕，所以使用了窗口尺寸
 renderer.setSize(window.innerWidth, window.innerHeight);
// 下面一行代码将生成一个canvas标签插入到body中
 document.body.appendChild(renderer.domElement);

/× 
 初始化一个相机,选取的是透视相机
 相机的四个参数分别是：
 视角or视场： 类似于人眼可以看到90-110度的视场，相机也有一个类似的参数设置，关于这个数值的设定也是有很多的博客文章可以去查看
 宽高比：定义了你看到的屏幕的比例
 近端和远端：定义了相机可以看到物体的距离，超过这个距离渲染器就不会对物体进行渲染了
 ×/
 camera = new THREE.PresectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
// 设置相机位置为z轴偏移量为5
 camera.position.set(0,0,5);
// 不要忘记把相机添加到场景中去
 scene.add(camera);
// 代码占位...
 }; 
</script>

现在场景有了，相机有了，渲染器也有了，现在要做的就是在场景中添加自己的景色，说白了，就是在场景中放个物体，然后我们就开始盯着它看呀看呀看
那么，是时候将物品放进去了。
我们创建物体的代码依旧是在我们的init函数中进行的，创建一个物体分为三个步骤，首先创建一个几何体，然后选择构建表面的材质，最后将几何体参数和材质参数传递给三维网格系统，three.js会自动帮你生成你想要的形状。一下是代码实例：

<script>
function init(){
// 接上段代码
var geometry, material, mseh;
// 创建一个盒子几何体
 geometry = new THREE.BoxGeometry(1,1,1);
// 基本材质渲染，设置颜色，启用线框
 material = new THREE.MeshBasicMarterial({color: 0xff0000, wireframe: true});
// 生成物体
 mesh = new THREE.Mesh(geometry, material);
// 记得把物体添加到场景中
 scene.add(mesh);
 };
// 代码占位
</script>

现在所有的准备工作都已经经行完毕，接下来要做的就是用渲染器把刚刚做好的东西交给浏览器去渲染。接下来定义一个新的函数

function animate(){
  requestAnimationFrame(animate);
// 代码占位
  renderer.render(scene, camera);
};

写完这个函数之后，在body标签中加入onload时间，即可在网页中看到结果。

<body id="canvas-frame" onload="animate()">
<script>
//我们的代码
</script>
</body>

现在我们在浏览器中可以看到如下样子
three.js学习计划（一）
这是一个静止的线条化的立方体，接下来要做的就是让它动起来！！
让一个物体动起来可以采用两种方式，一种是让物体自己运动，还有一种就是我们的眼睛运动，在这里也就是相机运动，或者可以相机跟物体都动-_-

//修改一下animate函数，让立方体动起来
function animate(){
    requestAnimationFrame(animate);
    // 物体旋转
    mesh.rotation.x += 0.1;
    mesh.rotation.y += 0.1;
    // 相机移动
    camera.position.y += 0.01;

    renderer.render(scene, camera);
};

最后在浏览器中我们可以看到立方体一边旋转一边下落的动画效果。

秒客网

three.js学习计划（一）

相关文章