three.js学习计划（一）

来源：互联网发布：淘宝几点发布宝贝最好编辑：程序博客网时间：2024/04/30 00:33

最近因为课题的原因要学习一下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>

现在我们在浏览器中可以看到如下样子

这是一个静止的线条化的立方体，接下来要做的就是让它动起来！！
让一个物体动起来可以采用两种方式，一种是让物体自己运动，还有一种就是我们的眼睛运动，在这里也就是相机运动，或者可以相机跟物体都动-_-

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

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

0 0