three.js学习笔记--基础知识
基础知识
从去年开始就在计划中的three.js终于开始了
历史介绍
（摘自ijunfan1994的转载，感谢作者）
OpenGL大概许多人都有所耳闻，它是最常用的跨平台图形库。
WebGL是基于OpenGL设计的面向web的图形标准，提供了一系列JavaScript API，通过这些API进行图形渲染将得以利用图形硬件从而获得较高性能。
而Three.js是通过对WebGL接口的封装与简化而形成的一个易用的图形库。
简单点的说法：WebGL可以看成是浏览器给我们提供的接口，在javascript中可以直接用这些API进行3D图形的绘制；而Three.js就是在这些接口上又帮我们封装得更好用一些。
(WebGL)与(Three.js)对比
（摘自ijunfan1994的转载，感谢作者）
既然有了WebGL，我们为什么还需要Three.js？
这是因为WebGL门槛相对较高，需要相对较多的数学知识。虽然WebGL提供的是面向前端的API，但本质上WebGL跟前端开发完全是两个不同的方向，知识的重叠很少。相关性只是他们都在web平台上，都是用javascript而已。一个前端程序员或许还熟悉解析几何，但是还熟悉线性代数的应该寥寥无几了（比如求个逆转置矩阵试试？），更何况使用中强调矩阵运算中的物理意义，这在教学中也是比较缺失的。
因此，前端工程师想要短时间上手WebGL还是挺有难度的。
于是，Three.js对WebGL提供的接口进行了非常好的封装，简化了很多细节，大大降低了学习成本。并且，几乎没有损失WebGL的灵活性。
因此，从Three.js入手是值得推荐的，这可以让你在较短的学习后就能面对大部分需求场景。（Three.js的更新是相当频繁）
思路讲解
我们要在屏幕上展示一个3D图形，大体的思路是这样的：
- 构建一个场景，也就是一个三维空间
- 创建一个相机，也就是一个观察点，并且定义观察的位置和角度
- 定义物体和材质，把他们合起来之后放到场景中
- 使用指定的渲染器将整体渲染到屏幕上
概念具体讲解
- Scene
场景是所有物体的容器，也对应着我们创建的三维世界 - Camera
Camera是三维世界中的观察者，用来描述空间的位置，three中相机有两种，分别是正交投影相机和透视投影相机，正交投影相机通俗的说就是看到的物体都是一样大，而透视投影相机看到的物体是近大远小，更符合我们视觉的习惯 - 物体
three中供显示的物体有很多，他们全部都继承自Object3D类 - Mesh
我们都知道，计算机的世界里，一条弧线是由有限个点构成的有限条线段连接得到的。线段很多时，看起来就是一条平滑的弧线了。计算机中的三维模型也是类似的，普遍的做法是用三角形组成的网格来描述，我们把这种模型称之为Mesh模型。在Three中，Mesh的构造函数是这样的：Mesh( geometry, material )，geometry是它的形状，material是它的材质 - Geometry
意思为形状，通过存储模型用到的点集和点间关系来达到描述物体形状的目的，three提供了立方体、平面、球体、圆形、圆柱、圆台等许多基本形状，你也可以通过自己定义每个点的位置来构造形状，对于比较复杂的形状，我们还可以通过外部的模型文件导入 - Material
*意思为材质，材质就是物体表面除了形状意外的所有可视属性的合集，例如色彩、纹理、光滑度、反射率、折射率、发光度。这里讲一下材质(Material)、贴图(Map)和纹理(Texture)的关系。 *- 材质上面已经提到了，它包括了贴图以及其它。
- 贴图其实是‘贴'和‘图'，它包括了图片和图片应当贴到什么位置。
- 纹理其实就是‘图'了。
Three提供了多种材质可供选择，能够自由地选择漫反射/镜面反射等材质。
- Points
points其实就是一堆点的集合，他在之前很长时间都被成为粒子系统，更名主要是因为粒子系统应该是包括粒子和相关的物理特性的处理的一套完整体系，而three中的Points则要简单的多，因此被命名为Points，Points的相关效果可以查看官网demo1demo2demo3 - Light
光影效果是让画面丰富的重要元素，Three提供了包括环境光AmbientLight、点光源PointLight、 聚光灯SpotLight、方向光DirectionalLight、半球光HemisphereLight等多种光源。
只要在场景中添加需要的光源就好了。 - Renderer
Renderer的作用就是将刚才所有的东西都渲染到屏幕上，Renderer绑定一个canvas对象，并且可以设置大小和默认北京颜色等，调用Renderer的render函数，传入scene和camera，就可以把图像渲染到canvas中了
最后以一个简单的demo结束
<html>
<head>
<title>My first Three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="//wow.techbrood.com/libs/three.r73.js"></script>
<script>
//创建场景
var scene = new THREE.Scene();
// 创建透视投影相机，PerspectiveCamera( fov, aspect, near, far )
// fov：相机视锥体垂直视角，aspect：相机视锥体宽高比
// near：相机视锥体近裁剪面距离，far：相机视锥体远裁剪面距离。
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
// 创建一个webGL渲染器
var renderer = new THREE.WebGLRenderer();
// 设置渲染器大小
renderer.setSize( window.innerWidth, window.innerHeight );
// 将渲染出来的canvas加入到body中
document.body.appendChild( renderer.domElement );
// 创建形状
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
// 创建材质
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
// 合成图形
var cube = new THREE.Mesh( geometry, material );
// 添加到场景中
scene.add( cube );
// 设置相机位置
camera.position.z = 5;
// 渲染函数
var render = function () {
requestAnimationFrame( render );
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
};
render();
</script>
</body>
</html>
three.js学习笔记--基础知识的更多相关文章
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
- SQLServer学习笔记<>.基础知识,一些基本命令,单表查询(null top用法,with ties附加属性,over开窗函数),排名函数
Sqlserver基础知识 (1)创建数据库 创建数据库有两种方式,手动创建和编写sql脚本创建,在这里我采用脚本的方式创建一个名称为TSQLFundamentals2008的数据库.脚本如下: ...
- js学习笔记--基础部分
自增 自增 ++ 通过自增可以使变量在自身的基础上增加1 对于一个变量自增以后,原变量的值会立即自增1 无论使a++, 还是++a,都会立即使原变量的值自增1. 不同的是a++ 和++a的值不同. a ...
- Java Script 学习笔记 -- 基础知识
Java script 概述 java Script 的简介 JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为 ...
- Redux学习笔记-基础知识
Redux概述 是什么:Redux是管理状态的容器,提供可预测的状态管理. 怎么做:Redux主要是用来管理组件或者应用的状态,本质上跟一个事件处理器差不多.通过分发action触发reduce来 ...
- Validform 学习笔记---基础知识整理
面对表单的验证,自己写大量的js毕竟不是一个明智的做法.不仅仅是代码很长而且不便于梳理.Validform就是一款开源的第三方验证js的控件,通过添加相应的js以及css能够有效的验证表单,维护起来也 ...
- java虚拟机JVM学习笔记-基础知识
最近使用开发的过程中出现了一个小问题,顺便记录一下原因和方法--java虚拟机 媒介:JVM是每一位从事Java开发工程师必须翻越的一座大山! JVM(Java Virtual Machine)JRE ...
- hadoop学习笔记——基础知识及安装
1.核心 HDFS 分布式文件系统 主从结构,一个namenoe和多个datanode, 分别对应独立的物理机器 1) NameNode是主服务器,管理文件系统的命名空间和客户端对文件的访问操 ...
- php学习笔记——基础知识（2）
9.PHP语句 if 语句 - 如果指定条件为真,则执行代码 if...else 语句 - 如果条件为 true,则执行代码:如果条件为 false,则执行另一端代码 if...else if.... ...
随机推荐
- P1505 [国家集训队]旅游
\(\color{#0066ff}{题 目 描 述}\) Ray 乐忠于旅游,这次他来到了T 城.T 城是一个水上城市,一共有 N 个景点,有些景点之间会用一座桥连接.为了方便游客到达每个景点但又为了 ...
- City Game UVALive - 3029（悬线法求最大子矩阵）
题意:多组数据(国外题好像都这样),每次n*m矩形,F表示空地,R表示障碍 求最大子矩阵(悬线法模板) 把每个格子向上延伸的空格看做一条悬线 以le[i][j],re[i][j],up[i][j]分别 ...
- 树状数组【bzoj1782】: [Usaco2010 Feb]slowdown 慢慢游
[bzoj1782]: [Usaco2010 Feb]slowdown 慢慢游 Description 每天Farmer John的N头奶牛(1 <= N <= 100000,编号1-N) ...
- 数据结构6: 静态链表及C语言实现
本节继续介绍线性表的另外一种链式表示——静态链表.(前面介绍的链表称为 动态链表 ). 逻辑结构上相邻的数据元素,存储在指定的一块内存空间中,数据元素只允许在这块内存空间中随机存放,这样的存储结构生成 ...
- WAF攻防实战
摘要 本文主要分为四个部分,一.首先对WAF做了简单的介绍,让读者对WAF这类产品有一个大概的了解:二.这部分通过一个实例演示了如何利用WAF为其后端的Web应用提供安全防护功能:三.安全是相对的,世 ...
- 两个数据库通过DataTable实现差异传输
两个主要方法 /// <summary>/// 用途:/// 用源表和目标表比较,返回差异的数据(目标表为参照物)/// /// 逻辑:/// 1.合并两个表/// 2.循环合并后得到的表 ...
- java动态数组笔记
动态数组: 在java.lang.reflect包下提供了Array类,包括一系列static方法,通过这些方法可动态的创建数组.给元素赋值.取出元素值等等 //理解数组引用——下面定义的objs数组 ...
- php 二维数组自定义排序
eg1:只根据一个规则进行排序,比如我下面的数组是一组满减折扣的信息,我要按照满减的金额从小到大排序 代码: <?php $arr =[ ["amount"=> 60, ...
- MapReduce 调优-Combiner
下图是演示了Combiner的好处 因为我们知道Hadoop的好处在于集群中有很多小的机器,组成了一个庞大的集群,把一个大的计算任务后者说复杂的计算过程分发到了一个个小的机器上面.但是这个集群一个致命 ...
- 20篇关于商品管理系统和uml技术的相关文献
1.基于UML技术的商品管理系统设计与实现 2.UML技术在行业资源平台系统建模中的应用 3.基于JSP的商品信息管理系统设计与开发 4.基于UML技术的客户关系管理系统实现 5.商品管理系统 6.基 ...