Three.js 入门教程

Three.js是运行在浏览器中的3D引擎,是JavaScript编写的WebGL第三方库,提供简化、高效的三维图形程序开发。

基本概念:Scene, Camera, Renderer

  • Scene(场景)-这是你添加对象、摄像机和灯光的地方。就像电影中的舞台和场地一样。
  • Camera(摄像机)-拍摄场景,就像现实的摄像机一样。
  • Renderer(渲染器)-允许你使用WebGL或Canvas 2D渲染场景。

创建第一个three.js项目

首先引入three.js库:

创建场景、透视摄像机和渲染器:

绘制:

完整代码:

Screen Shot 2016-07-25 at 10.34.48 AM

添加mesh和灯光

3D中的mesh表示一个物体的几何结构和材质。Three.js自带了一些原始的几何图形-立方体、圆锥体等等。

创建一个旋转的立方体:

Untitled

添加纹理

怎么使用Blender创建的模型

要想在There.js中使用Blender创建的3D模型,我们需要安装一个插件,这个插件可以把模型导出为there.js可用的json格式。

导入代码示例:


关于There.js的更多信息及文档:http://threejs.org/

发表评论

电子邮件地址不会被公开。 必填项已用*标注