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

你是否正在寻找关于three.js的内容？让我把最简洁的东西奉献给你：

开场白

webGL可以让我们在canvas上实现3D效果。而three.js是一款webGL框架，由于其易用性被广泛应用。如果你要学习webGL，抛弃那些复杂的原生接口从这款框架入手是一个不错的选择。

博主目前也在学习three.js，发现相关资料非常稀少，甚至官方的api文档也非常粗糙，很多效果需要自己慢慢敲代码摸索。所以我写这个教程的目的一是自己总结，二是与大家分享，。

本篇是系列教程的第一篇：入门篇。在这篇文章中，我将以一个简单的demo为例，阐述three.js的基本配置方法。学完这篇文章，你将学会如何在浏览器中绘制一个立体图形！

准备工作

在写代码之前，你首先要去下最新的three.js框架包，在你的页面里引入three.js，当然文件包里面也有不少的demo便于大家学习；

chrome是目前支持webGL最好的浏览器，Firefow居其次，国内的遨游、猎豹经测试也可以运行。

从实例开始入门!

首先我们搭建html，如下：

lesson1-by-shawn.xie div#canvas-frame{ border cursor width height background-color

准备和画布框大小一致的领域用于WebGL绘制。 具体来说：

(1) body 标签中添加 id 为「canvas3d」的 div 元素。

(2) style 标签中指定 「canvas3d」的CSS样式。

需要注意的是，我们并不需要写一个

以上就是关于three.js的全部内容，相信你一定会非常满意。

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/shenmilingyu/article-10220-1.html