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基础探寻八——法向材质与材质的纹理贴图的更多相关文章

  1. Three.js基础探寻一

    1.webGL 一种网络标准,定义了一些较底层的图形接口. 2.Three.js 一个3Djs库,webGL开源框架中比较优秀的一个.除了webGL以外,Three.js还提供了基于Canvas.SV ...

  2. Three.js基础探寻二——正交投影照相机

    本篇主要介绍照相机中的正交投影照相机. 第一篇传送门:Three.js基础探寻一 1.照相机 图形学中的照相机定义了三维空间到二维屏幕的投影方式. 针对投影方式照相机分为正交投影照相机和透视投影照相机 ...

  3. Three.js基础探寻七——Lamber材质与Phong材质

    材质(Material)是独立于物体顶点信息之外的与渲染效果相关的属性.通过设置材质可以改变物体的颜色.纹理贴图.光照模式等. 本篇将介绍基本材质以及两种基于光照模型的材质(Lamber与Phong) ...

  4. Three.js基础探寻九——网格

    在学习了几何形状和材质之后,我们就能使用他们来创建物体了.最常用的一种物体就是网格(Mesh),网格是由顶点.边.面等组成的物体:其他物体包括线段(Line).骨骼(Bone).粒子系统(Partic ...

  5. Three.js基础探寻四——立方体、平面与球体

    前面简单介绍了webGL和Three.js的背景以及照相机的设定,接下来介绍一些Three.js中的几何形状. 1.立方体 虽然这一形状的名字叫立方体(CubeGeometry),但它其实是长方体,也 ...

  6. Three.js基础探寻五——正二十面体、圆环面等

    除了立方体.平面.球体,Three.js还提供了很多其他几何形状. 1.圆形 CircleGeometry可以创建圆形或者扇形: THREE.CircleGeometry(radius, segmen ...

  7. Three.js基础探寻六——文字形状与自定义形状

    1.文字形状 说起3d文字想起了早年word里的一些艺术字: 时间真快. 那么TextGeometry可以用来创建三维的文字形状. 使用文字形状需要下载和引用额外的字体库.这里,我们以 helveti ...

  8. Three.js基础探寻十——动画

    本篇将介绍如果使用Three.js进行动态画面的渲染.此外,将会介绍一个Three.js作者写的另外一个库stat.js,用来观测每秒帧数(FPS). 1.实现动画效果 1.1 动画原理 对于Thre ...

  9. Three.js基础探寻三——透视投影照相机

    本篇主要介绍Three.js照相机中的透视投影照相机. 上一篇:正交投影照相机 5.透视投影照相机构造函数 透视投影照相机(Perspective Camera)的构造函数是: THREE.Persp ...

随机推荐

  1. css美化Div边框的样式实例

    很多时候如果不是用了很多样式,很难把边框修饰得好看,看了一篇博文,觉得真的挺漂亮,也挺好看. 转载的博文地址 将这段美化的css代码 border:1px solid #96c2f1;backgrou ...

  2. ubuntu 16 server 安装lnmp所需依赖

    安装 1.nginx build-essential libc6 libpcre3 libpcre3-dev libssl-dev zliblg zliblg-dev lab-base 依赖库: ap ...

  3. crontab 自动执行脚本

    crontab -e ================>自动执行某脚本!!!!!!! 1001 ls 1002 cd /home/wwwroot/default/ 1003 ls 1004 cr ...

  4. 分享 koa + mysql 的开发流程，构建 node server端，一次搭建个人博客

    前言 由于一直在用 vue 写业务,为了熟悉下 react 开发模式,所以选择了 react.数据库一开始用的是 mongodb,后来换成 mysql 了,一套下来感觉 mysql 也挺好上手的.re ...

  5. oracle分析函数 (转)

    一.总体介绍 12.1 分析函数如何工作 语法 FUNCTION_NAME(<参数>,…) OVER (<PARTITION BY 表达式,…> <ORDER BY 表达 ...

  6. 拓扑排序 最大字典序+优先队列 BZOJ 4010

    http://www.lydsy.com/JudgeOnline/problem.php?id=4010 4010: [HNOI2015]菜肴制作 Time Limit: 5 Sec  Memory ...

  7. 说说ASP.NET的IsPostBack

    学习asp.net,就不能不谈IsPostBack属性,顾名思义,这是是否回发的意思,多用于判断是不是第一次打开 一.IsPostBack介绍 Page.IsPostBack是一个标志:当前请求是否第 ...

  8. Django之原生Ajax操作

    Ajax主要就是使用 [XmlHttpRequest]对象来完成请求的操作,该对象在主流浏览器中均存在(除早起的IE),Ajax首次出现IE5.5中存在(ActiveX控件). 先通过代码来看看Aja ...

  9. VS 2010 应用程序无法启动

    其实一般遇到这种问题, 不管是debug还是release, 也不用看提示的内存地址, 首先应该想到库是否包含正确. 一个可能的错误就是32位或64位不匹配的错误. 比如环境变量设的是64位的Open ...

  10. c语言学习笔记.预处理.#ifndef

    #ifndef -> if not define 配合 #endif使用 在h头文件中使用,防止重复包含和编译. 也可以用条件编译来实现. 例如: 编写头文件 test.h 在头文件开头写上两行 ...