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

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

  1. //自定义材料 cubeMaterial 数组
  2.         //map:用于加载图片，THREE.TextureLoader().load('图片的地址')方法引入要放的图片，也可以用16进制的颜色替换：color:0xFFFFFF
  3.         //side:用于设置显示面。属性可设置为双面DoubleSide，前面FontSide，后面BackSide
  4.         var cubeMaterial = [
  5.             //右
  6.             new THREE.MeshBasicMaterial({color:0xFFFFFF,side:THREE.DoubleSide}),
  7.             //左
  8.             new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/2.png') ,side:THREE.FontSide}),
  9.             //上
  10.             new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/3.png') ,side:THREE.BackSide}),
  11.             //下
  12.             new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/4.png') ,side:THREE.DoubleSide}),
  13.             //前
  14.             new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/5.png') ,side:THREE.DoubleSide}),
  15.             //后
  16.             new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/6.png') ,side:THREE.DoubleSide})
  17.  
  18.         ];

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

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

改成

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

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

5.全部代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>demo1</title>
  5. </head>
  6. <style type="text/css">
  7.    body{
  8.         margin:;
  9.    }
  10.    canvas{
  11.         width:%;
  12.         height:%;
  13.    }
  14. </style>
  15. <body>
  16.     <script src="jquery.min.js"></script>
  17.     <script src="../build/three.js"></script>
  18.     <script src="../examples/js/controls/OrbitControls.js"></script>
  19.     <script type="text/javascript">
  20.         var scene = new THREE.Scene();//创建场景
  21.         //创建一个摄像机对象
  22.         var camera = new THREE.PerspectiveCamera(,window.innerWidth / window.innerHeight, 0.1, );
  23.  
  24.          //创建渲染器
  25.         var renderer = new THREE.WebGLRenderer();
  26.         renderer.setSize(window.innerWidth, window.innerHeight);
  27.  
  28.         document.body.appendChild(renderer.domElement);//渲染到浏览器
  29.  
  30.         //加入事件监听器,窗口自适应
  31.         window.addEventListener('resize', function(){
  32.             var width = window.innerWidth;
  33.             var height = window.innerHeight;
  34.             renderer.setSize(width,height);
  35.             camera.aspect = width/height;
  36.             camera.updateProjectionMatrix();
  37.         })
  38.  
  39.         //轨道控制 镜头的移动
  40.         var controls = new THREE.OrbitControls(camera,renderer.document);
  41.  
  42.         //创建形状 BoxGeometry
  43.         var geometry = new THREE.BoxGeometry(,,);
  44.  
  45.         //自定义材料
  46.         //map:用于加载图片，也可以用16进制的颜色替换：color:0xFFFFFF
  47.         //side:用于设置显示面。属性可设置为双面DoubleSide，前面FontSide，后面BackSide
  48.         var cubeMaterial = [
  49.             //右
  50.             new THREE.MeshBasicMaterial({color:0xFFFFFF,side:THREE.DoubleSide}),
  51.             //左
  52.             new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/2.png') ,side:THREE.FontSide}),
  53.             //上
  54.             new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/3.png') ,side:THREE.BackSide}),
  55.             //下
  56.             new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/4.png') ,side:THREE.DoubleSide}),
  57.             //前
  58.             new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/5.png') ,side:THREE.DoubleSide}),
  59.             //后
  60.             new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/6.png') ,side:THREE.DoubleSide})
  61.  
  62.         ];
  63.  
  64.         //创建材料   wireframe是否使用线条
  65.         //var material = new THREE.MeshBasicMaterial({color:0xFFFFFF,wireframe:true});
  66.         var material = new THREE.MeshFaceMaterial(cubeMaterial);
  67.  
  68.         //将材料和形状结合
  69.         var cube = new THREE.Mesh(geometry,material);
  70.  
  71.         //加入场景中
  72.         scene.add(cube);
  73.  
  74.         camera.position.z=;//设置相机的位置
  75.  
  76.         //逻辑
  77.         var update=function(){
  78.             //物体随着XY轴旋转
  79.             //cube.rotation.x +=0.01;
  80.             //cube.rotation.y += 0.005;
  81.         }
  82.  
  83.         //绘画渲染
  84.         var render=function() {
  85.             renderer.render(scene,camera);
  86.         }
  87.  
  88.         //循环运行update，render
  89.         var loop=function() {
  90.              requestAnimationFrame(loop);
  91.              update();
  92.              render();
  93.         }
  94.  
  95.         loop();//循环开始
  96.     </script>
  97. </body>
  98. </html>
  1.  
  1.  

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

  1. vue.js 第四课

    (1).插值:在view层上显示model的资料. (2).绑定表达式:在view层上 执行js命令. (3).指令:在view层上 执行写好的功能. (4).缩写:v-bind 绑定 特性 v-on ...

  2. 潭州课堂25班：Ph201805201 WEB 之 JS 第四课 (课堂笔记)

    JS 引入方式 在 HTML 中写入 写在 的标签里 <script> </script>推荐 放在 </body> 结束之前 <!DOCTYPE html& ...

  3. 【three.js第五课】光线的添加和感光材料

    材料分类: MeshBasicMaterial:基础网孔材料,一个以简单着色(平面或线框)方式来绘制几何形状的材料.MeshLambertMaterial:兰伯特网孔材料,一种非发光材料(兰伯特)的表 ...

  4. webgl(three.js)实现室内三维定位,3D定位,3D楼宇bim、实时定位三维可视化解决方案——第十四课（定位升级版）

    序: 还是要抽出时间看书的,迷上了豆豆的作品,最近在看<天幕红尘>,书中主人公的人生价值观以及修为都是让我惊为叹止.很想成为那样的人,但是再看看自己每天干的事,与时间的支配情况,真是十分的 ...

  5. 【three.js第六课】物体3D化

    1.在[three.js第五课]的基础上引入AnaglyphEffect.js文件. 文件路径: three源码包中进入[examples]文件夹: 进入[js]文件夹: 进入[effects]文件夹 ...

  6. NeHe OpenGL教程 第十四课：图形字体

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

  7. 【Web探索之旅】第二部分第四课：数据库

    内容简介 1.第二部分第四课:数据库 2.第二部分第五课预告:响应式网站 第二部分第四课:数据库 说到“数据库”,顾名思义,是“数据的仓库”的意思. 所以数据库的一大作用就是储存数据咯. 为什么Web ...

  8. 【Linux探索之旅】第一部分第四课：磁盘分区，并完成Ubuntu安装

    内容简介 1.第一部分第四课:磁盘分区,并完成Ubuntu安装 2.第一部分第五课预告:Unity桌面,人生若只如初见 磁盘分区 上一课我们正式开始安装Ubuntu了,但是到了分区的那一步,小编却戛然 ...

  9. vue.js之过滤器，自定义指令，自定义键盘信息以及监听数据变化

    一.监听数据变化 1.监听数据变化有两种,深度和浅度,形式如下: vm.$watch(name,fnCb); //浅度 vm.$watch(name,fnCb,{deep:true}); //深度监视 ...

随机推荐

  1. [SQL]3.26--175+176+177+178+180+181+182

    175.组合两个表 题目 Code SELECT FirstName, LastName, City, State FROM Person LEFT JOIN Address --由于需要Person ...

  2. python 顺序读取文件夹下面的文件（自定义排序方式）

    我们在读取文件夹下面的文件时,有时是希望能够按照相应的顺序来读取,但是 file_lists=os.listdir()返回的文件名不一定是顺序的,也就是说结果是不固定的.就比如读取下面这些文件,希望能 ...

  3. Celery框架的基本使用方法

    一. Celery简介 Celery是一个简单.灵活且可靠的,处理大量消息的分布式系统,专注于实时处理的异步任务队列,同时也支持任务调度. Celery的架构由三部分组成,消息中间件(message ...

  4. 洛谷3834 hdu2665主席树模板，动态查询区间第k小

    题目链接:https://www.luogu.com.cn/problem/P3834 对于区间查询第k小的问题,在区间数量达到5e5的时候是难以用朴素数据结构实现的,这时候主席树就应运而生了,主席树 ...

  5. [BFS]Codeforces Igor In the Museum

     Igor In the Museum time limit per test 1 second memory limit per test 256 megabytes input standard ...

  6. leetcode 876. 链表的中间结点 签到

    题目: 给定一个带有头结点 head 的非空单链表,返回链表的中间结点. 如果有两个中间结点,则返回第二个中间结点. 示例 1: 输入:[1,2,3,4,5] 输出:此列表中的结点 3 (序列化形式: ...

  7. Docker镜像拉取慢的解决方法

    镜像加速器配置: 下文配置引用于阿里云说明文档:https://cr.console.aliyun.com/cn-hangzhou/instances/mirrors 1. 安装/升级Docker客户 ...

  8. Spring Cloud 系列之 Netflix Zuul 服务网关

    什么是 Zuul Zuul 是从设备和网站到应用程序后端的所有请求的前门.作为边缘服务应用程序,Zuul 旨在实现动态路由,监视,弹性和安全性.Zuul 包含了对请求的路由和过滤两个最主要的功能. Z ...

  9. Lack of free swap space on Zabbix server

    在模板(Template)里找到Linux OS模板,修改触发器 配置>模板>Template OS Linux>触发器 找到swap关键字 修改 {Template OS Linu ...

  10. [noip模拟]水灾<BFS>

    水灾(sliker.cpp/c/pas) 1000MS  64MB 大雨应经下了几天雨,却还是没有停的样子.土豪CCY刚从外地赚完1e元回来,知道不久除了自己别墅,其他的地方都将会被洪水淹没. CCY ...