当前位置： &
【正版全新】Three.js开发指南(首部全面讲解Three.js开发的实用指南，循序渐进讲解Three.js的各种功能；通过大量交互式示例，深入探索使用开源的Three.js库创建绚丽三维图形的实用
滚动鼠标滚轴，图片即可轻松放大、缩小
【正版全新】Three.js开发指南(首部全面讲解Three.js开发的实用指南，循序渐进讲解Three.js的各种功能；通过大量交互式示例，深入探索使用开源的Three.js库创建绚丽三维图形的实用(图1)
电&&&&&&话：
开&&&&&&本：16开
页&&&&&&数：259页
字&&&&&&数：
I&&S&&B&&N：3
售&&&&&&价：53.90元
Copyright(C)
孔夫子旧书网
京ICP证041501号
海淀分局备案编号热销排行榜
1.2.3.4.5.6.7.8.9.10.
最近浏览的其他商品
浏览更多同类商品
【 】??????????
全面讲解Three.js开发的实用指南，循序渐进讲解Three.js的各种功能。
Three.js开发指南
978-7-111-48832-3
机械工业出版社
出版日期：
读者对象：
￥43.10&&&
立刻节省：￥15.90
所属分类：
C Primer Plus-(第6版..
　　《Three.js开发指南》首部全面讲解Three.js开发的实用指南，循序渐进讲解Three.js的各种功能
　　通过大量交互式示例，深入探索使用开源的Three.js库创建绚丽三维图形的实用方法和技巧
　　随着HTML 5标准的颁布，以及流行浏览器的日益强大，直接在浏览器中展示三维图形和动画已经变得越来越容易，也越来越受关注。但是三维图形和动画本身比较复杂，不仅需要有丰富的数学、图形学等方面的知识，还需要了解材质、贴图等各种创建三维场景所必备的要素。另外，直接使用WebGL在浏览器中创建三维图形和动画也非常繁琐，它所提供的各种接口尽管非常丰富且强大，但对于用户来说未免过于复杂了。
　　Three.js的出现则完美地帮助人们解决了这个矛盾。Three.js将WebGL的强大功能融汇其中，同时又非常易于使用，即便用户对其中的原理不甚了解，也能借助Three.js创建出绚丽多姿的三维场景和动画。
　　《Three.js开发指南》先从基本概念和Three.js的基本模块讲起，然后伴随着大量的示例和代码，逐步扩展到更多的主题，循序渐进地讲解Three.js的各种功能，帮助读者充分利用WebGL和现代浏览器的潜能，直接在浏览器中创建动态的华丽场景
　　《Three.js开发指南》通过大量的示例和代码，以互动的方式向读者展示Three.js的各种功能。
　　《Three.js开发指南》共12章：第1章讲述使用Three.js库的基本步骤；第2章讲解Three.js库使用过程中所要了解的各种基础组件，包括光源、网格、几何体、材质和相机等；第3章通过具体示例讲解场景中使用的各种光源；第4章讨论Three.js库中可以应用于网格的各种材质，并通过互动示例让读者试用这些材质；第5章讲解Three.js中几何体的创建和设置；第6章展示如何设置、使用Three.js库中的高级几何体，例如凸面体和扫描体；第7章讲解如何使用Three.js库中的粒子系统；第8章展示如何从外部导入网格和几何体；第9章探索各种动画效果，使场景活动起来；第10章深入讲解材质的细节，包括如何控制材质，以及如何将HTML 5视频的输出和HTML 5画布中的元素作为纹理；第11章探索如何使用Three.js库来对已经渲染过的场景进行后期处理；第12章讲解如何在Three.js的场景中添加物理效果。
　　Jos Dirksen,资深软件工程师和架构师，现任职于Malmberg公司，在后台技术（如Java和Scala）和前端开发（如HTML5、CSS和JavaScript）等技术领域有丰富的从业经验。除了对前端的JavaScript和HTML5等技术充满兴趣，Jos也喜欢研究使用REST和传统的网络服务技术开发后台服务。
　　李鹏程，SAP中国研究院高级软件工程师。早年他曾在AutoDesk公司从事三维设计软件的开发工作，后来因缘际会来到SAP,转行做ERP.随着云热潮的来临，传统的ERP也逐渐转向云端，因此也伴随着这股潮流学习了很多网络前端、后端方面的开发。
　　第1章用Three.js创建你的第一个三维场景
　　1.1 使用Three.js的前提条件
　　1.2 获取源代码
　　1.2.1 用Git克隆代码仓库
　　1.2.2 下载并解压压缩包
　　1.2.3 测试示例
　　1.3 创建HTML页面框架
　　1.4 渲染并展示三维对象
　　1.5 添加材质、灯光和阴影
　　1.6 用动画扩展你的首个场景
　　1.6.1 引入requestAnimation-Frame（）方法
　　1.6.2 转动方块
　　1.6.3 弹跳球
　　1.7 使用dat.GUI库简化试验
　　1.8 使用ASCII效果
　　1.9 总结
　　第2章使用构建Three.js场景的基本组件
　　2.1 创建场景
　　2.1.1 场景的基本功能
　　2.1.2 在场景中添加雾化效果
　　2.1.3 使用材质覆盖属性
　　2.2 使用几何和网格对象
　　2.2.1 几何对象的属性和函数
　　2.2.2 网格对象的函数和属性
　　2.3 选择合适的相机
　　2.3.1 正投影相机和透视相机
　　2.3.2 让相机在指定点上聚焦
　　2.4 总结
　　第3章使用Three.js里的各种光源
　　3.1 探索Three.js库提供的光源
　　3.2 学习基础光源
　　3.2.1 AmbientLight-影响整个场景的光源
　　3.2.2 PointLight-照射所有方向的光源
　　3.2.3 SpotLight-具有锥形效果的光源
　　3.2.4 DirectinalLight-模拟远处类似太阳的光源
　　3.2.5 使用特殊光源生成高级光照效果
　　3.3 总结
　　第4章使用Three.js的材质
　　4.1 理解共有属性
　　4.1.1 基础属性
　　4.1.2 融合属性
　　4.1.3 高级属性
　　4.2 从简单的网格材质（基础、深度和面）开始
　　4.2.1 简单表面的MeshBasic-Material
　　4.2.2 基于深度着色的MeshDepthMaterial
　　4.2.3 联合材质
　　4.2.4 计算法向颜色的MeshNormalMaterial
　　4.2.5 为每个面指定材质的MeshFaceMaterial
　　4.3 学习高级材质
　　4.3.1 用于暗淡、不光亮表面的MeshLambertMaterial
　　4.3.2 用于光亮表面的MeshPhongMaterial
　　4.3.3 用ShaderMaterial创建自己的着色器
　　4.4 线段几何体的材质
　　4.4.1 LineBasicMaterial
　　4.4.2 LineDashedMaterial
　　4.5 总结
　　第5章学习使用几何体
　　5.1 Three.js提供的基础几何体
　　5.1.1 二维几何体
　　5.1.2 三维几何体
　　5.2 总结
　　第6章使用高级几何体和二元操作
　　6.1 ConvexGeometry
　　6.2 LatheGeometry
　　6.3 通过拉伸创建几何体
　　6.3.1 ExtrudeGeometry
　　6.3.2 TubeGeometry
　　6.3.3 从SVG拉伸
　　6.3.4 ParametricGeometry
　　6.4 创建三维文本
　　6.4.1 渲染文本
　　6.4.2 添加自定义字体
　　6.5 使用二元操作组合网格
　　6.5.1 subtract函数
　　6.5.2 intersect函数
　　6.5.3 union函数
　　6.6 总结
　　第7章粒子和粒子系统
　　7.1 理解粒子
　　7.2 粒子、粒子系统和BasicParticleMaterial
　　7.3 使用HTML5画布格式化粒子
　　7.3.1 在CanvasRenderer类里使用HTML5画布
　　7.3.2 在WebGLRenderer中使用HTML5画布
　　7.4 使用纹理格式化粒子
　　7.5 从高级几何体中创建粒子系统
　　7.6 总结
　　第8章创建、加载高级网格和几何体
　　8.1 几何体组合和合并
　　8.1.1 对象组合
　　8.1.2 将多个网格合并成一个网格
　　8.2 从外部资源中加载几何体
　　8.3 以Three.js的JSON格式保存和加载
　　8.3.1 保存和加载几何体
　　8.3.2 保存和加载场景
　　8.4 使用Blender
　　8.4.1 在Blender中安装Three.js导出器
　　8.4.2 在Blender里加载和导出模型
　　8.5 导入三维格式文件
　　8.5.1 OBJ和MTL格式
　　8.5.2 加载Collada模型
　　8.5.3 加载STL、CTM和VTK模型
　　8.5.4 展示蛋白质数据银行中的蛋白质
　　8.5.5 从PLY模型中创建粒子系统
　　8.6 总结
　　第9章创建动画和移动相机
　　9.1 基础动画
　　9.1.1简单动画
　　9.1.2 选择对象
　　9.1.3 用Tween.js做动画
　　9.2 使用相机
　　9.2.1 轨迹球控件
　　9.2.2 飞行控件
　　9.2.3 翻滚控件
　　9.2.4 第一人称控件
客服专线：010- 客服邮箱：
Copyright & 北发图书网 2007,
All Rights Reserved
北京北发电子商务股份有限公司 版权所有【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，如下：&!DOCTYPE html&
&meta charset="UTF-8"&
&title&lesson1-by-shawn.xie&/title&
&!--引入Three.js--&
&script src="Three.js"&&/script&
&style type="text/css"&
div#canvas-frame{
border: none;
cursor: move;
width: 1400px;
height: 600px;
background-color: #EEEEEE;
&!--盛放canvas的容器--&
&div id="container"&&/div&
&/html&准备和画布框大小一致的领域用于WebGL绘制。 具体来说：(1) body 标签中添加 id 为「canvas3d」的 div 元素。(2) style 标签中指定 「canvas3d」的CSS样式。需要注意的是，我们并不需要写一个&canvas&标签，我们只需要定义好盛放canvas的div就可以，canvas是three.js动态生成的！下面我们开始写脚本，我们将通过以下五步构建一个简单的立体模型，这也是three.js的基本步骤：1.设置three.js渲染器三维空间里的物体映射到二维平面的过程被称为三维渲染。 一般来说我们都把进行渲染操作的软件叫做渲染器。 具体来说要进行下面这些处理。(0) 声明全局变量（对象）；(1) 获取画布「canvas-frame」的高宽；(2) 生成渲染器对象（属性：抗锯齿效果为设置有效）；(3) 指定渲染器的高宽（和画布框大小一致）；(4) 追加 【canvas】 元素到 【canvas3d】 元素中；(5) 设置渲染器的清除色(clearColor)。&//开启Three.js渲染器
var//声明全局变量（对象）
function initThree() {
width = document.getElementById('canvas3d').clientW//获取画布「canvas3d」的宽
height = document.getElementById('canvas3d').clientH//获取画布「canvas3d」的高
renderer=new THREE.WebGLRenderer({antialias:true});//生成渲染器对象（属性：抗锯齿效果为设置有效）
renderer.setSize(width, height );//指定渲染器的高宽（和画布框大小一致）
document.getElementById('canvas3d').appendChild(renderer.domElement);//追加 【canvas】 元素到 【canvas3d】 元素中。
renderer.setClearColorHex(0xFFFFFF, 1.0);//设置canvas背景色(clearColor)
}&2.设置摄像机cameraOpenGL（WebGL）中、三维空间中的物体投影到二维空间的方式中，存在透视投影和正投影两种相机。 透视投影就是、从视点开始越近的物体越大、远处的物体绘制的较小的一种方式、和日常生活中我们看物体的方式是一致的。 正投影就是不管物体和视点距离，都按照统一的大小进行绘制、在建筑和设计等领域需要从各个角度来绘制物体，因此这种投影被广泛应用。在 Three.js 也能够指定透视投影和正投影两种方式的相机。 本文按照以下的步骤设置透视投影方式。(0) 声明全局的变量（对象）；(1) 设置透视投影的相机；(2) 设置相机的位置坐标；(3) 设置相机的上为「z」轴方向；(4) 设置视野的中心坐标。 　　　　　　　 //设置相机
function initCamera() {
camera = new THREE.PerspectiveCamera( 45, width / height , 1 , 5000 );//设置透视投影的相机,默认情况下相机的上方向为Y轴，右方向为X轴，沿着Z轴朝里（视野角：fov 纵横比：aspect 相机离视体积最近的距离：near 相机离视体积最远的距离：far）
camera.position.x = 0;//设置相机的位置坐标
camera.position.y = 50;//设置相机的位置坐标
camera.position.z = 100;//设置相机的位置坐标
camera.up.x = 0;//设置相机的上为「x」轴方向
camera.up.y = 1;//设置相机的上为「y」轴方向
camera.up.z = 0;//设置相机的上为「z」轴方向
camera.lookAt( {x:0, y:0, z:0 } );//设置视野的中心坐标
}&3.设置场景scene场景就是一个三维空间。 用 [Scene] 类声明一个叫 [scene] 的对象。　　　　　　　　//设置场景
function initScene() {
scene = new THREE.Scene();
}&4.设置光源lightOpenGL（WebGL）的三维空间中，存在点光源和聚光灯两种类型。 而且，作为点光源的一种特例还存在平行光源(无线远光源)。另外，作为光源的参数还可以进行 [环境光] 等设置。 作为对应， Three.js中可以设置 [点光源(Point Light)] [聚光灯(Spot Light)] [平行光源(Direction Light)]，和 [环境光(Ambient Light)]。 和OpenGL一样、在一个场景中可以设置多个光源。 基本上，都是环境光和其他几种光源进行组合。 如果不设置环境光，那么光线照射不到的面会变得过于黑暗。 本文中首先按照下面的步骤设置平行光源，在这之后还会追加环境光。(0) 声明全局变量(对象)(1) 设置平行光源(2) 设置光源向量(3) 追加光源到场景这里我们用「DirectionalLight」类声明一个叫 [light] 的对象来代表平行光源 　　　　　　　　//设置光源
function initLight() {
light = new THREE.DirectionalLight(0xff, 0);//设置平行光源
light.position.set( 200, 200, 200 );//设置光源向量
scene.add(light);// 追加光源到场景
}&5.设置物体object&& 这里，我们声明一个球模型 　　　　　　　　//设置物体
function initObject(){
sphere = new THREE.Mesh(
new THREE.SphereGeometry(20,20),
//width,height,depth
new THREE.MeshLambertMaterial({color: 0xff0000}) //材质设定
scene.add(sphere);
sphere.position.set(0,0,0);
}最后，我们写一个主函数执行以上五步：　　　　　　　　//执行
function threeStart() {
initThree();
initCamera();
initScene();
initLight();
initObject();
renderer.clear();
renderer.render(scene, camera);
}这时，测试以上程序，你会发现浏览器窗口中出现了你绘制的球形模型：总结以上就是three.js的入门内容，我们核心的五步就是：1.设置three.js渲染器2.设置摄像机camera3.设置场景scene4.设置光源light5.设置物体object可能其中有些设置你还不太清楚，没关系，后面几篇文章会对以上五个主要步骤进行详细的讲解，敬请期待~~本例完整代码：&!DOCTYPE html&
&meta charset="UTF-8"&
&title&lesson1-by-shawn.xie&/title&
&!--引入Three.js--&
&script src="Three.js"&&/script&
&script type="text/javascript"&
//开启Three.js渲染器
var//声明全局变量（对象）
function initThree() {
width = document.getElementById('canvas3d').clientW//获取画布「canvas3d」的宽
height = document.getElementById('canvas3d').clientH//获取画布「canvas3d」的高
renderer=new THREE.WebGLRenderer({antialias:true});//生成渲染器对象（属性：抗锯齿效果为设置有效）
renderer.setSize(width, height );//指定渲染器的高宽（和画布框大小一致）
document.getElementById('canvas3d').appendChild(renderer.domElement);//追加 【canvas】 元素到 【canvas3d】 元素中。
renderer.setClearColorHex(0xFFFFFF, 1.0);//设置canvas背景色(clearColor)
//设置相机
function initCamera() {
camera = new THREE.PerspectiveCamera( 45, width / height , 1 , 5000 );//设置透视投影的相机,默认情况下相机的上方向为Y轴，右方向为X轴，沿着Z轴朝里（视野角：fov 纵横比：aspect 相机离视体积最近的距离：near 相机离视体积最远的距离：far）
camera.position.x = 0;//设置相机的位置坐标
camera.position.y = 50;//设置相机的位置坐标
camera.position.z = 100;//设置相机的位置坐标
camera.up.x = 0;//设置相机的上为「x」轴方向
camera.up.y = 1;//设置相机的上为「y」轴方向
camera.up.z = 0;//设置相机的上为「z」轴方向
camera.lookAt( {x:0, y:0, z:0 } );//设置视野的中心坐标
//设置场景
function initScene() {
scene = new THREE.Scene();
//设置光源
function initLight() {
light = new THREE.DirectionalLight(0xff0000, 1.0, 0);//设置平行光源
light.position.set( 200, 200, 200 );//设置光源向量
scene.add(light);// 追加光源到场景
//设置物体
function initObject(){
sphere = new THREE.Mesh(
new THREE.SphereGeometry(20,20),
//width,height,depth
new THREE.MeshLambertMaterial({color: 0xff0000}) //材质设定
scene.add(sphere);
sphere.position.set(0,0,0);
function threeStart() {
initThree();
initCamera();
initScene();
initLight();
initObject();
renderer.clear();
renderer.render(scene, camera);
&style type="text/css"&
div#canvas3d{
border: none;
cursor: move;
width: 1400px;
height: 600px;
background-color: #EEEEEE;
&body onload='threeStart();'&
&!--盛放canvas的容器--&
&div id="canvas3d"&&/div&
&/html&绿色通道：&&&&50(请您对文章做出评价)上一篇：下一篇：posted @&&&阅读(6962) 评论()&&&&&&&&&&&&&&&&&&&&[楼主]&&&&&&&&&&&&&&&&&&&&&&&&&[楼主]&&&&&&&&&&&&&&&&&&&&&[楼主]&&&
发表评论：
馆藏&19590
TA的推荐TA的最新馆藏[转]&[转]&[转]&[转]&[转]&[转]&[转]&[转]&