码迷,mamicode.com
首页 > Web开发 > 详细

【3.js探寻八】——法向材质与材质的纹理贴图

时间:2016-08-05 11:25:52      阅读:248      评论:0      收藏:0      [点我收藏+]

标签:

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入门指南》

 

【3.js探寻八】——法向材质与材质的纹理贴图

标签:

原文地址:http://www.cnblogs.com/xulei1992/p/5740442.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!