1.先去下载6张不同的图片素材放到项目中。

2.在【three.js第三课】的代码基础上添加自定义的材料

//自定义材料 cubeMaterial 数组

        //map:用于加载图片，THREE.TextureLoader().load('图片的地址')方法引入要放的图片，也可以用16进制的颜色替换：color:0xFFFFFF

        //side:用于设置显示面。属性可设置为双面DoubleSide，前面FontSide，后面BackSide

        var cubeMaterial = [

            //右

            new THREE.MeshBasicMaterial({color:0xFFFFFF,side:THREE.DoubleSide}),

            //左

            new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/2.png') ,side:THREE.FontSide}),

            //上

            new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/3.png') ,side:THREE.BackSide}),

            //下

            new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/4.png') ,side:THREE.DoubleSide}),

            //前

            new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/5.png') ,side:THREE.DoubleSide}),

            //后

            new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/6.png') ,side:THREE.DoubleSide})

        ];

3.将原来的创建材料代码

var material = new THREE.MeshBasicMaterial({color:0xFFFFFF,wireframe:true});

改成

var material = new THREE.MeshFaceMaterial(cubeMaterial);//cubeMaterial:为自定义的材料数组的名称

4.运行观察不同方位的显示情况，并修改cubeMaterial 数组中side属性的值，进行观察

5.全部代码：

<!DOCTYPE html>

<html>

<head>

    <title>demo1</title>

</head>

<style type="text/css">

   body{

        margin:;

   }

   canvas{

        width:%;

        height:%;

   }

</style>

<body>

    <script src="jquery.min.js"></script>

    <script src="../build/three.js"></script>

    <script src="../examples/js/controls/OrbitControls.js"></script>

    <script type="text/javascript">

        var scene = new THREE.Scene();//创建场景

        //创建一个摄像机对象

        var camera = new THREE.PerspectiveCamera(,window.innerWidth / window.innerHeight, 0.1, );

         //创建渲染器

        var renderer = new THREE.WebGLRenderer();

        renderer.setSize(window.innerWidth, window.innerHeight);

        document.body.appendChild(renderer.domElement);//渲染到浏览器

        //加入事件监听器,窗口自适应

        window.addEventListener('resize', function(){

            var width = window.innerWidth;

            var height = window.innerHeight;

            renderer.setSize(width,height);

            camera.aspect = width/height;

            camera.updateProjectionMatrix();

        })

        //轨道控制 镜头的移动

        var controls = new THREE.OrbitControls(camera,renderer.document);

        //创建形状 BoxGeometry

        var geometry = new THREE.BoxGeometry(,,);

        //自定义材料

        //map:用于加载图片，也可以用16进制的颜色替换：color:0xFFFFFF

        //side:用于设置显示面。属性可设置为双面DoubleSide，前面FontSide，后面BackSide

        var cubeMaterial = [

            //右

            new THREE.MeshBasicMaterial({color:0xFFFFFF,side:THREE.DoubleSide}),

            //左

            new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/2.png') ,side:THREE.FontSide}),

            //上

            new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/3.png') ,side:THREE.BackSide}),

            //下

            new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/4.png') ,side:THREE.DoubleSide}),

            //前

            new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/5.png') ,side:THREE.DoubleSide}),

            //后

            new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/6.png') ,side:THREE.DoubleSide})

        ];

        //创建材料   wireframe是否使用线条

        //var material = new THREE.MeshBasicMaterial({color:0xFFFFFF,wireframe:true});

        var material = new THREE.MeshFaceMaterial(cubeMaterial);

        //将材料和形状结合

        var cube = new THREE.Mesh(geometry,material);

        //加入场景中

        scene.add(cube);

        camera.position.z=;//设置相机的位置

        //逻辑

        var update=function(){

            //物体随着XY轴旋转

            //cube.rotation.x +=0.01;

            //cube.rotation.y += 0.005;

        }

        //绘画渲染

        var render=function() {

            renderer.render(scene,camera);

        }

        //循环运行update，render

        var loop=function() {

             requestAnimationFrame(loop);

             update();

             render();

        }

        loop();//循环开始

    </script>

</body>

</html>


												


											
【three.js第四课】自定义材料、贴图。的更多相关文章
	

    
								
  1. vue.js 第四课
		
    (1).插值:在view层上显示model的资料. (2).绑定表达式:在view层上 执行js命令. (3).指令:在view层上 执行写好的功能. (4).缩写:v-bind 绑定 特性 v-on ...
    
		
    2. 
						
  2. 潭州课堂25班：Ph201805201 WEB 之 JS 第四课 (课堂笔记)
		
    JS 引入方式 在 HTML 中写入 写在 的标签里 <script> </script>推荐 放在 </body> 结束之前 <!DOCTYPE html& ...
    
		
    3. 
						
  3. 【three.js第五课】光线的添加和感光材料
		
    材料分类: MeshBasicMaterial:基础网孔材料,一个以简单着色(平面或线框)方式来绘制几何形状的材料.MeshLambertMaterial:兰伯特网孔材料,一种非发光材料(兰伯特)的表 ...
    
		
    4. 
						
  4. webgl(three.js)实现室内三维定位,3D定位,3D楼宇bim、实时定位三维可视化解决方案——第十四课（定位升级版）
		
    序: 还是要抽出时间看书的,迷上了豆豆的作品,最近在看<天幕红尘>,书中主人公的人生价值观以及修为都是让我惊为叹止.很想成为那样的人,但是再看看自己每天干的事,与时间的支配情况,真是十分的 ...
    
		
    5. 
						
  5. 【three.js第六课】物体3D化
		
    1.在[three.js第五课]的基础上引入AnaglyphEffect.js文件. 文件路径: three源码包中进入[examples]文件夹: 进入[js]文件夹: 进入[effects]文件夹 ...
    
		
    6. 
						
  6. NeHe OpenGL教程  第十四课：图形字体
		
    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...
    
		
    7. 
						
  7. 【Web探索之旅】第二部分第四课：数据库
		
    内容简介 1.第二部分第四课:数据库 2.第二部分第五课预告:响应式网站 第二部分第四课:数据库 说到“数据库”,顾名思义,是“数据的仓库”的意思. 所以数据库的一大作用就是储存数据咯. 为什么Web ...
    
		
    8. 
						
  8. 【Linux探索之旅】第一部分第四课：磁盘分区，并完成Ubuntu安装
		
    内容简介 1.第一部分第四课:磁盘分区,并完成Ubuntu安装 2.第一部分第五课预告:Unity桌面,人生若只如初见 磁盘分区 上一课我们正式开始安装Ubuntu了,但是到了分区的那一步,小编却戛然 ...
    
		
    9. 
						
  9. vue.js之过滤器，自定义指令，自定义键盘信息以及监听数据变化
		
    一.监听数据变化 1.监听数据变化有两种,深度和浅度,形式如下: vm.$watch(name,fnCb); //浅度 vm.$watch(name,fnCb,{deep:true}); //深度监视 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Django 模型笔记
			
    关于模型: 1:一个模型类对应一个表,模型类中的属性对应表中的一个字段 2:字段类型(数据库支持的类型) 模型属性 字符串 1:CharField(Maxlength=长度) models.CharF ...
    
			
    2. 
						
  2. nodejs 模块加载顺序
			
    nodejs 模块加载顺序 一.当引入模块的形式是 require('lt') 时(1).先找当前文件夹下的node_modules文件夹下的lt文件夹下的package.json 文件指定的main ...
    
			
    3. 
						
  3. SubLime Text3  常用插件总结
			
    近来开始恶补前端知识,在一定的技能基础上,逐渐开始进阶的学习和使用.因此在这里罗列下,SubLime Text3 常用插件: 1.Emmet 提高HTML & CSS3编写速度. 2.Them ...
    
			
    4. 
						
  4. [noip模拟20170921]模版题
			
      今天考的是一套很基础的模版题,但是我这种蒟蒻竟然还是没有AK,不得不说,蒟蒻和大佬的差别不是一点点啊 1.暴走的猴子(walk.pas/c/cpp) [题目描述] 从前有一个森林,森林里生活着一群 ...
    
			
    5. 
						
  5. 【开源项目系列】如何基于 Spring Cache 实现多级缓存（同时整合本地缓存 Ehcache 和分布式缓存 Redis）
			
    一.缓存 当系统的并发量上来了,如果我们频繁地去访问数据库,那么会使数据库的压力不断增大,在高峰时甚至可以出现数据库崩溃的现象.所以一般我们会使用缓存来解决这个数据库并发访问问题,用户访问进来,会先从 ...
    
			
    6. 
						
  6. vuex知识要点梳理
			
    该内容为个人总结,请勿喷. 欢迎各位大神前来指点.
    
			
    7. 
						
  7. 使用Putty + Xming 远程登录Linux显示图形化界面
			
    一般我们远程登录linux 服务器,都是使用非加密的 telnet 或者加密的 ssh.这些登录方式有一个特点:只能登录字符界面,不能运行那些带有GUI界面的程序. 有时候为了学习或者工作的需要,我们 ...
    
			
    8. 
						
  8. 深入解读ES6系列（四）
			
    来自老曾es6的前言: 哈喽小伙伴们,爱说'废'话的Z又回来了,欢迎来到Super IT曾的博客时间,上一节说了字符串,面向对象以及json的知识,这一节我们继续我们知识的海洋,一起奋斗不秃头!不足的 ...
    
			
    9. 
						
  9. C++中的字符串切片操作
			
    string str = "hello"; str.substr(0,2); //输出"he", 表示[0,2)
    
			
    10. 
						
  10. 计算机人推荐书目&网站（不断更新）
			
    计算机人推荐书目&网站(不断更新) 鉴于最近有很多同学问我学什么读什么书好,我把我自己的经历和愚见写下来,仅供参考.我只会写我亲自读过有感悟的书,而不会搬运一些我碰都没有碰过只闻大名的书.本人 ...
    
			
    11.