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. 潭州课堂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. angualrjs 总结 随记(一)

    $apply方法的作用 $apply方法是用来触发脏检查,它在控制器里监听一个变量,每当这个变量的值改变的时候,它会去与最初的值做一次比较,然后HTML页面就会及时更新该变量的值(将最新的值赋值到ht ...

  2. 数据库-第三章 关系数据库标准语言SQL-3.3 数据查询

    数据查询 例: 一.单表查询 1.定义 是指仅涉及一个表的查询 2.选择表中的若干列 查询指定列 例: 查询全部列 例: 查询经过计算的值 例: 3.选择表中的若干元组 消除取值重复的行 例: 查询满 ...

  3. 如何从零基础开始学习LoadRunner12(一)

    如何从零基础开始学习LoadRunner12(一) 上一篇文章讲到了如何安装LR12的教程,这一篇文章来讲一下怎么利用LoadRunner自带的Sample来学习LoadRunner的基本使用. 首先 ...

  4. Linux基础篇学习——Linux文件系统之文件存储与读取:inode,block,superblock

    Linux文件类型 代表符号 含义 - 常规文件,即file d directory,目录文件 b block device,块设备文件,支持以"block"为单位进行随机访问 c ...

  5. git 分支的创建与合并

    首先我们需要先创建一个新的dev分支,然后切换到dev分支: $ git checkout -b dev //命令语句 Switched to a new branch 'dev' //成功执行输出语 ...

  6. 原 c++中map与unordered_map的区别

    c++中map与unordered_map的区别 头文件 map: #include < map > unordered_map: #include < unordered_map ...

  7. 如何删除Python中文本文件的文件内容?

    在python中: open('file.txt', 'w').close() 或者,如果你已经打开了一个文件: f = open('file.txt', 'r+') f.truncate(0) # ...

  8. Java基础语法(11)-面向对象之关键字

    title: Java基础语法(11)-面向对象之关键字 blog: CSDN data: Java学习路线及视频 1.this this是什么 它在方法内部使用,即这个方法所属对象的引用: clas ...

  9. FME中按照ID值过滤块参照中的多个要素

  10. Web安全认证

    一.HTTP Basic Auth 每次请求 API 时都提供用户的 username 和 password. Basic Auth 是配合 RESTful API 使用的最简单的认证方式,只需提供用 ...