Three.js基础探寻一
1.webGL
一种网络标准，定义了一些较底层的图形接口。
2.Three.js
一个3Djs库，webGL开源框架中比较优秀的一个。除了webGL以外，Three.js还提供了基于Canvas、SVG标签的渲染器。
这是一个开源项目。
3.环境
找一个喜欢的jsIDE。调试建议使用Chrome或者Firefox。
4.下载
5.使用
<head>
<script type="text/javascript" src="js/three.js"></script>
</head>
webGL的渲染需要canvas，Three.js可以生成，也可以自定义canvas：
<body onload="init()">
<canvas id="mainCanvas" width="400px" height="300px" ></canvas>
</body>
在js中定义一个init函数，在HTML加载后执行：
function init(){
// ...
}
Three.js程序要包括三大组建：
场景（Scene）、相机（Camera）、渲染器（Renderer），以及你创建的物体。
6.渲染器（Renderer）
渲染器将和Canvas元素进行绑定，接着上面的：
var renderer = new THREE.WebGLRenderer({
canvas: document.getElementById(‘mainCanvas’)
});
如果想要Three.js生成Canvas元素，在HTML中就不需要定义canvas，在js中可以这样写：
var renderer = new THREE.WebGLRenderer(); renderer.setSize(400,300); document.getElementsByTagName(‘body’)[0].appendChild(renderer.domElement);
第二行设置了Canvas的宽高。第三行将渲染器对应的Canvas元素添加到<body>中。
下面这句可以设置背景为黑色：
renderer.setClearColor(0x000000);
7.场景（Scene）
在Three.js中添加的物体都是添加到场景中的。在程序最开始的时候进行实例化，然后将物体添加到场景中即可。
var scene = new THREE.Scene();
8.照相机（Camera）
webGL和Three.js使用的坐标系是右手坐标系：
相机分正投影相机和透视投影相机。这里先定义一直透视投影的照相机，：
var camera = new THREE.PerspectiveCamera(45,4/3,1,1000); //四个参数分别对应：视角、近处的裁面的距离、远处的裁面的距离、实际窗口的纵横比（后面会详细讨论） camera.position.set(0,0,5);//设置相机位置 scene.add(camera);//添加到场景中。
9.长方体
创建一个x,y,z方向长度分别为1、2、3的红色长方体：
var cube = new THREE.Mesh(new THREE.CubeGeometry(1,2,3),
new THREE.MeshBasicMaterial({
color: 0xff0000
})
);
scene.add(cube);
其中，THREE.Mesh表示网格模型；THREE.CubeGeometry表示立方体盒子；MeshBasicMaterial是一种材质：对光照无感，给几何体一种简单的颜色或显示线框。最后添加到场景中。
10.渲染
在定义了场景中的物体，设置好的照相机之后，渲染器就知道如何渲染出二维的结果了。调用渲染器的渲染函数，就能使其渲染一次了。
renderer.render(scene, camera);
11.示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3.js测试一</title>
</head>
<body onload="init()">
<canvas id="mainCanvas" width="400px" height="300px" ></canvas>
<script type="text/javascript" src="js/three.min.js"></script><!--路径改成你的-->
<script type="text/javascript">
function init() {
// renderer 渲染器
var renderer = new THREE.WebGLRenderer({
canvas: document.getElementById('mainCanvas') //绑定canvas
});
renderer.setClearColor(0x000000); // black
// scene 场景
var scene = new THREE.Scene(); //实例化场景
// camera 照相机
var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000); //透视投影相机参数设置
camera.position.set(0, 0, 5); //相机位置设置
scene.add(camera); //添加到场景
// a cube in the scene 创建的物体
var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3), //创建网格，参数一：几何体（立方体）
new THREE.MeshBasicMaterial({ //参数二：材质（网格基础材质）
color: 0xff0000 //设置颜色
})
);
scene.add(cube); //添加到场景
// render 渲染
renderer.render(scene, camera);
}
</script>
</body>
</html>
渲染的效果是：
下一篇： Three.js基础探寻二
整理自张雯莉《Three.js入门指南》
其他参考：WebGL中文网
Three.js基础探寻一的更多相关文章
- Three.js基础探寻二——正交投影照相机
本篇主要介绍照相机中的正交投影照相机. 第一篇传送门:Three.js基础探寻一 1.照相机 图形学中的照相机定义了三维空间到二维屏幕的投影方式. 针对投影方式照相机分为正交投影照相机和透视投影照相机 ...
- Three.js基础探寻九——网格
在学习了几何形状和材质之后,我们就能使用他们来创建物体了.最常用的一种物体就是网格(Mesh),网格是由顶点.边.面等组成的物体:其他物体包括线段(Line).骨骼(Bone).粒子系统(Partic ...
- Three.js基础探寻十——动画
本篇将介绍如果使用Three.js进行动态画面的渲染.此外,将会介绍一个Three.js作者写的另外一个库stat.js,用来观测每秒帧数(FPS). 1.实现动画效果 1.1 动画原理 对于Thre ...
- Three.js基础探寻四——立方体、平面与球体
前面简单介绍了webGL和Three.js的背景以及照相机的设定,接下来介绍一些Three.js中的几何形状. 1.立方体 虽然这一形状的名字叫立方体(CubeGeometry),但它其实是长方体,也 ...
- Three.js基础探寻三——透视投影照相机
本篇主要介绍Three.js照相机中的透视投影照相机. 上一篇:正交投影照相机 5.透视投影照相机构造函数 透视投影照相机(Perspective Camera)的构造函数是: THREE.Persp ...
- Three.js基础探寻五——正二十面体、圆环面等
除了立方体.平面.球体,Three.js还提供了很多其他几何形状. 1.圆形 CircleGeometry可以创建圆形或者扇形: THREE.CircleGeometry(radius, segmen ...
- Three.js基础探寻八——法向材质与材质的纹理贴图
4.法向材质 法向材质可以将材质的颜色设置为其法向量的方向,有时候对于调试很有帮助. 法向材质的设定很简单,甚至不用设置任何参数: new THREE.MeshNormalMaterial() 材质的 ...
- Three.js基础探寻七——Lamber材质与Phong材质
材质(Material)是独立于物体顶点信息之外的与渲染效果相关的属性.通过设置材质可以改变物体的颜色.纹理贴图.光照模式等. 本篇将介绍基本材质以及两种基于光照模型的材质(Lamber与Phong) ...
- Three.js基础探寻六——文字形状与自定义形状
1.文字形状 说起3d文字想起了早年word里的一些艺术字: 时间真快. 那么TextGeometry可以用来创建三维的文字形状. 使用文字形状需要下载和引用额外的字体库.这里,我们以 helveti ...
随机推荐
- MT【221】几个常用的多元恒等式
1.$\sum\limits_{i=1}^{n}\sum\limits_{i=1}^{n}{a_ib_j}=\sum\limits_{i=1}^{n}\sum\limits_{i=1}^{n}{a_j ...
- 【题解】 bzoj3450 JoyOI1952 Easy （期望dp）
题面戳我 Solution 期望的题目真心不太会 定义状态\(f[i]\)表示到第\(i\)期望长度,\(dp[i]\)表示期望分数 如果上一步的持续\(o\)长度为\(L\),那么贡献是\(L^2\ ...
- [poj2528]Mayor's posters
题目描述 The citizens of Bytetown, AB, could not stand that the candidates in the mayoral election campa ...
- [hgoi#2019/2/17t1]million
题目描述 面对格鲁的入侵,小黄人们要组建一支队伍,来抵御进攻,现在有编号为1 至n 的小黄人,任命编号为n 的队长,由其挑选队员,当然编号不是随便编的,每一个编号里都包含一个小黄人的个人信息,现在队长 ...
- 洛谷 P2057 [SHOI2007]善意的投票 解题报告
P2057 [SHOI2007]善意的投票 题目描述 幼儿园里有n个小朋友打算通过投票来决定睡不睡午觉.对他们来说,这个问题并不是很重要,于是他们决定发扬谦让精神.虽然每个人都有自己的主见,但是为了照 ...
- Spring中的ApplicationContextAware使用
加载Spring配置文件时,如果Spring配置文件中所定义的Bean类实现了ApplicationContextAware 接口,那么在加载Spring配置文件时,会自动调用Applic ...
- 目标检测网络之 Mask R-CNN
Mask R-CNN 论文Mask R-CNN(ICCV 2017, Kaiming He,Georgia Gkioxari,Piotr Dollár,Ross Girshick, arXiv:170 ...
- Nginx一台机器上负载均衡多个Tomcat
默认你的机器上安装了Java环境,解压了Tomcat,安装了Nginx.默认这几个tomcat都部署在一台机器上. 对于Tomcat需要改三个地方[你部署的所有tomcat这三个地方都不能一样,如果你 ...
- tp3 save操作小bug误区
$china_area->save(['is_del' => 1,'updatetime' => time()]); SHOW COLUMNS FROM `tf_china_area ...
- LVM基本概念及工作原理
LVM基本概念及工作原理 背景知识: 一直困惑于LVM,特地找资料查了查,终于对LVM的概念和工作原理有了深入的理解.接下来记录下.新的技术出来必定是为了改变现有的不足,所以LVM的出现是由于对现有磁 ...