Three.js基础探寻八——法向材质与材质的纹理贴图
4.法向材质
法向材质可以将材质的颜色设置为其法向量的方向，有时候对于调试很有帮助。
法向材质的设定很简单，甚至不用设置任何参数：
new THREE.MeshNormalMaterial()
材质的颜色与照相机与该物体的角度相关，下面我们只改变照相机位置，观察两个角度的颜色变化：
camera.position.set(5, 25, 25);的效果：
camera.position.set(25, 25, 25);的效果：
我们观察的是同样的三个面，但是由于观察的角度不同，物体的颜色就不同了。因此，在调试时，要知道物体的法向量，使用法向材质就很有效。
源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3.js测试8.1</title>
</head>
<body onload="init()">
<canvas id="mainCanvas" width="400px" height="300px" ></canvas>
</body>
<script type="text/javascript" src="js/three.min.js"></script>
<script type="text/javascript">
function init() {
var renderer = new THREE.WebGLRenderer({
canvas: document.getElementById('mainCanvas')
});
renderer.setClearColor(0x000000);
var scene = new THREE.Scene(); // camera
var camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);
camera.position.set(25, 25, 25);
camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(camera); // light
var light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(10, 15, 5);
scene.add(light); var material = new THREE.MeshNormalMaterial(); var cube = new THREE.Mesh(new THREE.CubeGeometry(5, 5, 5), material);
scene.add(cube); renderer.render(scene, camera);
}
</script>
</html>
5.材质的纹理贴图
在此之前，我们使用的材质都是单一颜色的，有时候，我们却希望使用图像作为材质。这时候，就需要导入图像作为纹理贴图，并添加到相应的材质中。下面，我们介绍具体的做法。
5.1 单张图像应用于长方体
首先，我们选择一张长宽均为128像素的图像：
将其导入纹理中：
var texture = THREE.ImageUtils.loadTexture('img/0.png');
然后，将材质的map属性设置为texture：
var material = new THREE.MeshLambertMaterial({
map: texture
});
这样就完成了将图片应用于材质的基本步骤。但是由于现在我们还没使用动画，画面只被渲染了一次，而在导入纹理之前，已经完成了这次渲染，因此看到的只是一片黑。所以，如果没有重绘函数（将在下一篇介绍），就需要在完成导入纹理的步骤后，重新绘制画面，这是在回调函数中实现的：
var texture = THREE.ImageUtils.loadTexture('img/0.png', {}, function() {
renderer.render(scene, camera);
});
var material = new THREE.MeshLambertMaterial({
map: texture
});
现在，就能看到这样的效果了：
类似地，如果将其应用于球体，将会把整个球体应用该图像：
源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3.js测试8.2</title>
</head>
<body onload="init()">
<canvas id="mainCanvas" width="400px" height="300px" ></canvas>
</body>
<script type="text/javascript" src="js/three.min.js"></script>
<script type="text/javascript">
function init() {
var renderer = new THREE.WebGLRenderer({
canvas: document.getElementById('mainCanvas')
});
renderer.setClearColor(0x000000);
var scene = new THREE.Scene(); // camera
var camera = new THREE.OrthographicCamera(-10, 10, 7.5, -7.5, 0.1, 100);
camera.position.set(25, 25, 25);
camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(camera); // light
var light = new THREE.PointLight(0xffffff, 1, 1000);
light.position.set(10, 15, 20);
scene.add(light); var texture = THREE.ImageUtils.loadTexture('img/0.png', {}, function() {
renderer.render(scene, camera);
});
var material = new THREE.MeshLambertMaterial({
map: texture
}); // var cube = new THREE.Mesh(new THREE.CubeGeometry(5, 5, 5), material);
// scene.add(cube);
var sphere = new THREE.Mesh(new THREE.SphereGeometry(5, 25, 15), material);
scene.add(sphere); renderer.render(scene, camera);
}
</script>
</html>
5.2 六张图像应用于长方体
有时候，我们希望长方体的六面各种的贴图都不同。因此，我们首先准备了六张颜色各异的图像，分别写了数字0到5。然后，分别导入图像到六个纹理，并设置到六个材质中：
var materials = [];
for (var i = 0; i < 6; ++i) {
materials.push(new THREE.MeshBasicMaterial({
map: THREE.ImageUtils.loadTexture('img/' + i + '.png',
{}, function() {
renderer.render(scene, camera);
}),
overdraw: true
}));
}
var cube = new THREE.Mesh(new THREE.CubeGeometry(5, 5, 5),
new THREE.MeshFaceMaterial(materials));
scene.add(cube);
效果为：
源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3.js测试8.3</title>
</head>
<body onload="init()">
<canvas id="mainCanvas" width="400px" height="300px" ></canvas>
</body>
<script type="text/javascript" src="js/three.min.js"></script>
<script type="text/javascript">
function init() {
var renderer = new THREE.WebGLRenderer({
canvas: document.getElementById('mainCanvas')
});
renderer.setClearColor(0x000000);
var scene = new THREE.Scene(); // camera
var camera = new THREE.OrthographicCamera(-10, 10, 7.5, -7.5, 0.1, 100);
camera.position.set(25, 25, 25);
camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(camera); // light
var light = new THREE.PointLight(0xffffff, 1, 1000);
light.position.set(10, 15, 20);
scene.add(light); var materials = [];
for (var i = 0; i < 6; ++i) {
materials.push(new THREE.MeshBasicMaterial({
map: THREE.ImageUtils.loadTexture('img/' + i + '.png', {}, function() {
renderer.render(scene, camera);
}),
overdraw: true
}));
} var cube = new THREE.Mesh(new THREE.CubeGeometry(5, 5, 5),
new THREE.MeshFaceMaterial(materials));
scene.add(cube); renderer.render(scene, camera);
}
</script>
</html>
5.3 棋盘格
现在，我们有一个黑白相间的图像：
我们希望用它填满一个屏幕。按照之前的做法依法炮制：
var texture = THREE.ImageUtils.loadTexture('img/chess.png', {}, function() {
renderer.render(scene, camera);
});
效果是：
可是，棋盘格是8横8纵64个小方格组成的，那应该怎么办呢？
首先，我们需要指定重复方式为两个方向（wrapS和wrapT）都重复：
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
然后，设置两个方向上都重复4次，由于我们的图像本来是有2行2列，所以重复4次即为8行8列：
texture.repeat.set(4, 4);
最终就得到了棋盘格：
源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3.js测试8.4</title>
</head>
<body onload="init()">
<canvas id="mainCanvas" width="400px" height="300px" ></canvas>
</body>
<script type="text/javascript" src="js/three.min.js"></script>
<script type="text/javascript">
function init() {
var renderer = new THREE.WebGLRenderer({
canvas: document.getElementById('mainCanvas')
});
//renderer.setClearColor(0x666666);
var scene = new THREE.Scene(); // camera
var camera = new THREE.OrthographicCamera(-10, 10, 7.5, -7.5, 0.1, 100);
camera.position.set(0, 0, 25);
camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(camera); // light
var light = new THREE.PointLight(0xffffff, 1, 1000);
light.position.set(10, 15, 20);
scene.add(light); var texture = THREE.ImageUtils.loadTexture('img/chess.png', {}, function() {
renderer.render(scene, camera);
});
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(4, 4);
var material = new THREE.MeshLambertMaterial({
map: texture
}); var plane = new THREE.Mesh(new THREE.PlaneGeometry(12, 12), material);
scene.add(plane); renderer.render(scene, camera);
}
</script>
</html>
整理自张雯莉《Three.js入门指南》
Three.js基础探寻八——法向材质与材质的纹理贴图的更多相关文章
- Three.js基础探寻一
1.webGL 一种网络标准,定义了一些较底层的图形接口. 2.Three.js 一个3Djs库,webGL开源框架中比较优秀的一个.除了webGL以外,Three.js还提供了基于Canvas.SV ...
- Three.js基础探寻二——正交投影照相机
本篇主要介绍照相机中的正交投影照相机. 第一篇传送门:Three.js基础探寻一 1.照相机 图形学中的照相机定义了三维空间到二维屏幕的投影方式. 针对投影方式照相机分为正交投影照相机和透视投影照相机 ...
- Three.js基础探寻七——Lamber材质与Phong材质
材质(Material)是独立于物体顶点信息之外的与渲染效果相关的属性.通过设置材质可以改变物体的颜色.纹理贴图.光照模式等. 本篇将介绍基本材质以及两种基于光照模型的材质(Lamber与Phong) ...
- Three.js基础探寻九——网格
在学习了几何形状和材质之后,我们就能使用他们来创建物体了.最常用的一种物体就是网格(Mesh),网格是由顶点.边.面等组成的物体:其他物体包括线段(Line).骨骼(Bone).粒子系统(Partic ...
- Three.js基础探寻四——立方体、平面与球体
前面简单介绍了webGL和Three.js的背景以及照相机的设定,接下来介绍一些Three.js中的几何形状. 1.立方体 虽然这一形状的名字叫立方体(CubeGeometry),但它其实是长方体,也 ...
- Three.js基础探寻五——正二十面体、圆环面等
除了立方体.平面.球体,Three.js还提供了很多其他几何形状. 1.圆形 CircleGeometry可以创建圆形或者扇形: THREE.CircleGeometry(radius, segmen ...
- Three.js基础探寻六——文字形状与自定义形状
1.文字形状 说起3d文字想起了早年word里的一些艺术字: 时间真快. 那么TextGeometry可以用来创建三维的文字形状. 使用文字形状需要下载和引用额外的字体库.这里,我们以 helveti ...
- Three.js基础探寻十——动画
本篇将介绍如果使用Three.js进行动态画面的渲染.此外,将会介绍一个Three.js作者写的另外一个库stat.js,用来观测每秒帧数(FPS). 1.实现动画效果 1.1 动画原理 对于Thre ...
- Three.js基础探寻三——透视投影照相机
本篇主要介绍Three.js照相机中的透视投影照相机. 上一篇:正交投影照相机 5.透视投影照相机构造函数 透视投影照相机(Perspective Camera)的构造函数是: THREE.Persp ...
随机推荐
- web系统中上下移动功能的实现
其实上移下移的思想分几步: 核心思想:交换两个记录的位置字段的值. 问题:如何根据当前记录,找到前一个或者后一个的记录的位置. 第一:在java类属性定义一个position位置字段,不同的位置pos ...
- json数据的格式
JSON的具体形式 1.对象是一个无序的“‘名称/值’对”集合.一个对象以“{”开始,以“}”结束.每个“名称”后跟一个“:”,“‘名称/值’对”之间使用“,”分隔. 举个例子: { name:&qu ...
- Linux常用网络工具：批量主机服务扫描之nmap
Linux下有很多强大网络扫描工具,网络扫描工具可以分为:主机扫描.主机服务扫描.路由扫描等. 之前已经写过常用的主机扫描和路由扫描工具,nmap支持批量主机扫描和主机服务扫描. nmap的安装直接使 ...
- XML签名Cannot resolve element with ID XXXX 解决方案
最近同银行做接口联调,需要对XML文件做加签和解签操作,本地的开发环境是Mac 10.10,JDK的版本是1.6.0.65.小小的一段加签代码,一直报错,却久久也找不到解决方法,网上的资料非常少,错误 ...
- CodeBlocks的常用快捷键
CodeBlocks常用操作快捷键 编辑部分: Ctrl + A:全选 Ctrl + C:复制 Ctrl + X: 剪切 Ctrl + V:粘贴 Ctrl + Z:撤销 Ctrl + S:保存 Ctr ...
- TCP和UDP相关概念
位于传输层的协议,都是基于IP协议的. TCP是面向连接的.可靠的传输,UDP是无连接的.不可靠的传输.要进行TCp传输时候,需要进行三次握手,建立连接,然后才能发送数据,而且在发送过程中,有数据的确 ...
- JAVA多线程提高九:Semaphere同步工具
java 中Semaphere可类比操作系统信号量,硬件资源如IO.内存.磁盘等都是有固定量的,多个程序需要竞争这些资源,没有资源就需要被挂起. 一.类和方法摘要 构造函数: public Semap ...
- Java实现JsApi方式的微信支付
要使用JsApi进行微信支付,首先要从微信获得一个prepay_id,然后通过调用微信的jsapi完成支付,JS API的返回结果get_brand_wcpay_request:ok仅在用户成功完成支 ...
- 【BZOJ】3572: [Hnoi2014]世界树 虚树+倍增
[题意]给定n个点的树,m次询问,每次给定ki个特殊点,一个点会被最近的特殊点控制,询问每个特殊点控制多少点.n,m,Σki<=300000. [算法]虚树+倍增 [题解]★参考:thy_asd ...
- 【NOIP】提高组2014
Day1 T1(暴力):大水题 #include<cstdio> ][]={ ,,,,, ,,,,, ,,,,, ,,,,, ,,,,, }; ],b[]; int main() { in ...