【three.js详解之一】入门篇

shawn.xie · 发表于 2013-1-4 03:03:54

开场白

webGL可以让我们在canvas上实现3D效果。而three.js是一款webGL框架，由于其易用性被广泛应用。如果你要学习webGL，抛弃那些复杂的原生接口从这款框架入手是一个不错的选择。
博主目前也在学习three.js，发现相关资料非常稀少，甚至官方的api文档也非常粗糙，很多效果需要自己慢慢敲代码摸索。所以我写这个教程的目的一是自己总结，二是与大家分享。
本篇是系列教程的第一篇：入门篇。在这篇文章中，我将以一个简单的demo为例，阐述three.js的基本配置方法。学完这篇文章，你将学会如何在浏览器中绘制一个立体图形！
准备工作

在写代码之前，你首先要去下最新的three.js框架包，在你的页面里引入three.js，当然文件包里面也有不少的demo便于大家学习；
chrome是目前支持webGL最好的浏览器，Firefow居其次，国内的遨游、猎豹经测试也可以运行。
从实例开始入门!

首先我们搭建html，如下：
<div class="cnblogs_code"><!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>lesson1-by-shawn.xie</title>  <script src="Three.js"></script> <style type="text/css"> div#canvas-frame{ border: none; cursor: move; width: 1400px; height: 600px; background-color: #EEEEEE; } </style> </head> <body>  <div id="container"></div> </body></html>

		自动登录	找回密码
密码			立即注册