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 ...
随机推荐
- day6 字典
字典的创建方式 注意 字典是无序的 1. dic{"name":"yang","age":35} 常用还是用这个 2. dic3 = dic ...
- MT【53】对数平均做数列放缩
[从最简单的做起]--波利亚 请看下面三道循序渐进不断加细的题. 评:随着右边的不断加细,解决问题的方法也越来越"高端".当然最佳值$ln2$我们可以用相对 容易的方法来证明: $ ...
- 自学Aruba5.3.1-Aruba安全认证-有PEFNG 许可证环境的认证配置OPEN、PSK
点击返回:自学Aruba之路 自学Aruba5.3.1-Aruba安全认证-有PEFNG 许可证环境的认证配置OPEN.PSK OPEN.PSK都需要设置Initial Role角色, 但是角色派生完 ...
- windows安装redis的正确姿势
安装: 1,redis官方下载地址:https://redis.io/download,redis 64位下载地址:https://github.com/ServiceStack/redis-wind ...
- Java NIO -- DatagramChannel
Java NIO中的DatagramChannel是一个能收发UDP包的通道.操作步骤:打开 DatagramChannel接收/发送数据 代码举例: package com.soyoungboy.n ...
- 编译RocketMQ
目前最新版本为 官方没有提供可执行的安装包,只提供了maven项目,去GitHub下载 点击Download ZIP 就可以了,如果你安装了版本控制工具 SVN 或者 GIT 就可以使用它上边的 UR ...
- banner无缝滚动动画,支持左右按钮和小点
HTML: <div class="box"> <ul> <li class="img_cur" > <a href= ...
- selenium_采集药品数据
Python爬虫视频教程零基础小白到scrapy爬虫高手-轻松入门 https://item.taobao.com/item.htm?spm=a1z38n.10677092.0.0.482434a6E ...
- GTF文件
一.GTF文件格式 Fields must be tab-separated. Also, all but the final field in each feature line must cont ...
- 配置DHCP服务
配置DHCP服务 一.DHCP的简介 1.DHCP是Dynamic Host Configuration Protocol(动态主机配置协议)的缩写: 2.DHCP是从BOOTP(Bootstrap ...