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 ...
随机推荐
- 【刷题】BZOJ 1098 [POI2007]办公楼biu
Description FGD开办了一家电话公司.他雇用了N个职员,给了每个职员一部手机.每个职员的手机里都存储有一些同事的 电话号码.由于FGD的公司规模不断扩大,旧的办公楼已经显得十分狭窄,FGD ...
- [HNOI2005]狡猾的商人 ,神奇做法——贪心
洛谷P2294 [HNOI2005]狡猾的商人 ,神奇做法--贪心 看到大牛都是写的差分约束或带权并查集,本蒟蒻都不太会(还是用差分约束过了的QAQ),但是想出一种贪心的策略,运用神奇的优先队列实现. ...
- 自学Zabbix之路15.5 Zabbix数据库表结构简单解析-其他 表
点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 自学Zabbix之路15.5 Zabbix数据库表结构简单解析-其他 表 1. Actions表 ...
- SharePoint 2013 APP 开发示例 (三)使用远程的web资源
在这个示例里我们将详细介绍 TokenHelper 类, 我们将看到它是怎么简单地从远程web站点访问SharePoint的.我们还将取到它的一些值.这将帮助我们理解连接是怎么被构造的,同时也方便我们 ...
- Java NIO -- 直接缓冲区与非直接缓冲区
直接缓冲区与非直接缓冲区: 非直接缓冲区:通过 allocate() 方法分配缓冲区,将缓冲区建立在 JVM 的内存中直接缓冲区:通过 allocateDirect() 方法分配直接缓冲区,将缓冲区建 ...
- onTouchEvent方法的使用
手机屏幕事件的处理方法onTouchEvent.该方法在View类中的定义,并且所有的View子类全部重写了该方法,应用程序可以通过该方法处理手机屏幕的触摸事件.该方法的签名如下所示. public ...
- javascript:window.location.replace 与 window.location.reload() 刷新页面的不同效果
今天早上我发现一个问题,当一个网页的地址最后面是一个#时(比如:http://www.baidu.com/go.asp#), 执行:window.location.replace(window.loc ...
- laravel/lumen 的构造函数需要注意的地方
比如 lumen,ConsoleServiceProvider 里面的 register 做了下面的处理: \Laravel\Lumen\Console\ConsoleServiceProvider: ...
- Nginx 入门指南
Nginx 入门指南 简介: Nginx 是一款轻量级的 Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,其特点是占有内存少,并发能力强.本教程根据淘宝核心系统服务器平台组的 ...
- JavaSE考试前练习
汽车租赁管理系统(CarRents) 120分钟 要求:请使用JavaEE实现一个汽车租赁管理系统,汽车租赁的属性主要包含:车牌(License).公里数(kilo).品牌(brand),租金(mo ...