材料分类：

MeshBasicMaterial：基础网孔材料，一个以简单着色（平面或线框）方式来绘制几何形状的材料。
MeshLambertMaterial：兰伯特网孔材料，一种非发光材料（兰伯特）的表面
MeshPhongMaterial：网孔材料，用于表面有光泽的材料，计算每个像素。

光线分类
        注意：材料收到光线影响，即不同的材料对不同的光线表现出不同的特点，试着该表材料和光线，观测结果
        1.    AmbientLight  环境光：这种光的颜色被应用到全局范围内的所有对象。

2.    PointLight 点光源 使用 MeshLambertMaterial 或 Phong网孔材料(MeshPhongMaterial) 来影响对象

3.    平行光源（DirectionalLight）.影响使用 兰伯特网孔材料(MeshLambertMaterial) 或 Phong网孔材料(MeshPhongMaterial) 的对象。

4.    聚光光源（SpotLight）一种能投射锥形阴影区域的点光源。 使用 MeshLambertMaterial 或 Phong网孔材料(MeshPhongMaterial) 来影响对象。

5.    光（Light）光源的基类。

1.在【three.js第四课】的原本基础上进行修改，将自定义的材料修改为如下：

  1.         //自定义材料
  2.         //map:用于设置纹理贴图，也可以用16进制的颜色替换：color:0xFFFFFF
  3.         //side:用于设置显示面。属性可设置为双面DoubleSide，前面FontSide，后面BackSide
  4.         //MeshBasicMaterial：基础网孔材料，一个以简单着色（平面或线框）方式来绘制几何形状的材料。
  5.         //MeshLambertMaterial：兰伯特网孔材料，一种非发光材料（兰伯特）的表面
  6.         //MeshPhongMaterial：网孔材料，用于表面有光泽的材料，计算每个像素。
  7.         var cubeMaterial = [
  8.             //右
  9.             new THREE.MeshLambertMaterial({color:0xFFFFFF,side:THREE.DoubleSide}),
  10.             //左
  11.             new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/2.png') ,side:THREE.DoubleSide}),
  12.             //上
  13.             new THREE.MeshPhongMaterial({map: new THREE.TextureLoader().load('images/3.png') ,side:THREE.DoubleSide}),
  14.             //下
  15.             new THREE.MeshLambertMaterial({map: new THREE.TextureLoader().load('images/4.png') ,side:THREE.DoubleSide}),
  16.             //前
  17.             new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/5.png') ,side:THREE.DoubleSide}),
  18.             //后
  19.             new THREE.MeshPhongMaterial({map: new THREE.TextureLoader().load('images/6.png') ,side:THREE.DoubleSide})
  20.  
  21.         ];

2.在此处举例上面所有的光线，更换时将保留一个，其他光线注释即可，光线使用如下：

  1.         //添加光线
  2.         //注意：材料收到光线影响，即不同的材料对不同的光线表现出不同的特点，试着该表材料和光线，观测结果
  3.         //1.    AmbientLight  环境光：这种光的颜色被应用到全局范围内的所有对象。
  4.         //AmbientLight(光线的颜色，光线的强度)
  5.         //var ambientLight = new THREE.AmbientLight(0xFFFFFF,3.0);
  6.         //scene.add(ambientLight);//光线加入场景中
  7.  
  8.         //2.    PointLight 点光源 使用 MeshLambertMaterial 或 Phong网孔材料(MeshPhongMaterial) 来影响对象
  9.         //var pointLight = new THREE.PointLight(0xFFFFFF,3.0);
  10.         //scene.add(pointLight);//光线加入场景中
  11.  
  12.         //3.    平行光源（DirectionalLight）.影响使用 兰伯特网孔材料(MeshLambertMaterial) 或 Phong网孔材料(MeshPhongMaterial) 的对象。
  13.         //var directionalLight = new THREE.DirectionalLight(0xFFFFFF,3.0);
  14.         //scene.add(directionalLight);//光线加入场景中
  15.  
  16.         //4.    聚光光源（SpotLight）一种能投射锥形阴影区域的点光源。 使用 MeshLambertMaterial 或 Phong网孔材料(MeshPhongMaterial) 来影响对象。
  17.         //var spotLight = new THREE.SpotLight(0xFFFFFF,3.0);
  18.         //scene.add(spotLight);//光线加入场景中
  19.  
  20.         //5.    光（Light）光源的基类。
  21.         var light = new THREE.Light(0xFFFFFF,3.0);
  22.         scene.add(light);//光线加入场景中

4.修改不同的光线以及材料，观察不同光线对材料的影响。

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.         //MeshBasicMaterial：基础网孔材料，一个以简单着色（平面或线框）方式来绘制几何形状的材料。
  49.         //MeshLambertMaterial：兰伯特网孔材料，一种非发光材料（兰伯特）的表面
  50.         //MeshPhongMaterial：网孔材料，用于表面有光泽的材料，计算每个像素。
  51.         var cubeMaterial = [
  52.             //右
  53.             new THREE.MeshLambertMaterial({color:0xFFFFFF,side:THREE.DoubleSide}),
  54.             //左
  55.             new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/2.png') ,side:THREE.DoubleSide}),
  56.             //上
  57.             new THREE.MeshPhongMaterial({map: new THREE.TextureLoader().load('images/3.png') ,side:THREE.DoubleSide}),
  58.             //下
  59.             new THREE.MeshLambertMaterial({map: new THREE.TextureLoader().load('images/4.png') ,side:THREE.DoubleSide}),
  60.             //前
  61.             new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/5.png') ,side:THREE.DoubleSide}),
  62.             //后
  63.             new THREE.MeshPhongMaterial({map: new THREE.TextureLoader().load('images/6.png') ,side:THREE.DoubleSide})
  64.  
  65.         ];
  66.  
  67.         //创建材料   wireframe是否使用线条
  68.         //var material = new THREE.MeshBasicMaterial({color:0xFFFFFF,wireframe:true});
  69.         var material = new THREE.MeshFaceMaterial(cubeMaterial);
  70.  
  71.         //将材料和形状结合
  72.         var cube = new THREE.Mesh(geometry,material);
  73.  
  74.         //物体加入场景中
  75.         scene.add(cube);       
  76.  
  77.         //添加光线
  78.         //注意：材料收到光线影响，即不同的材料对不同的光线表现出不同的特点，试着该表材料和光线，观测结果
  79.         //1.    AmbientLight  环境光：这种光的颜色被应用到全局范围内的所有对象。
  80.         //AmbientLight(光线的颜色，光线的强度)
  81.         //var ambientLight = new THREE.AmbientLight(0xFFFFFF,3.0);
  82.         //scene.add(ambientLight);//光线加入场景中
  83.  
  84.         //2.    PointLight 点光源 使用 MeshLambertMaterial 或 Phong网孔材料(MeshPhongMaterial) 来影响对象
  85.         //var pointLight = new THREE.PointLight(0xFFFFFF,3.0);
  86.         //scene.add(pointLight);//光线加入场景中
  87.  
  88.         //3.    平行光源（DirectionalLight）.影响使用 兰伯特网孔材料(MeshLambertMaterial) 或 Phong网孔材料(MeshPhongMaterial) 的对象。
  89.         //var directionalLight = new THREE.DirectionalLight(0xFFFFFF,3.0);
  90.         //scene.add(directionalLight);//光线加入场景中
  91.  
  92.         //4.    聚光光源（SpotLight）一种能投射锥形阴影区域的点光源。 使用 MeshLambertMaterial 或 Phong网孔材料(MeshPhongMaterial) 来影响对象。
  93.         //var spotLight = new THREE.SpotLight(0xFFFFFF,3.0);
  94.         //scene.add(spotLight);//光线加入场景中
  95.  
  96.         //5.    光（Light）光源的基类。
  97.         var light = new THREE.Light(0xFFFFFF,3.0);
  98.         scene.add(light);//光线加入场景中
  99.  
  100.         camera.position.z=;//设置相机的位置
  101.  
  102.         //逻辑
  103.         var update=function(){
  104.             //物体随着XY轴旋转
  105.             //cube.rotation.x +=0.01;
  106.             //cube.rotation.y += 0.005;
  107.         }
  108.  
  109.         //绘画渲染
  110.         var render=function() {
  111.             renderer.render(scene,camera);
  112.         }
  113.  
  114.         //循环运行update，render
  115.         var loop=function() {
  116.              requestAnimationFrame(loop);
  117.              update();
  118.              render();
  119.         }
  120.  
  121.         loop();//循环开始
  122.     </script>
  123. </body>
  124. </html>

【three.js第五课】光线的添加和感光材料的更多相关文章

  1. vue.js 第五课

    计算属性 1.基础例子 2.计算属性 vs $watch 3.计算 setter 4.计算属性开发实务demo   1.计算属性 computed( 电脑computer) (区别普通属性) 计算属性 ...

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

    算数运算符 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

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

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

  4. IC入门课第五课作业：完善 Microblog 前端（1、显示发布者的名字；2、增加新UI、3、关注其他学员的 canister）

    上周完成了 IC 入门课程第五课的作业 现将答案贴出,欢迎同学们参考,禁止抄袭作业哦 课程作业 (完善 microblog 前端) 1. 显示消息的发布者名字 a. 给 Message 增加 auth ...

  5. NeHe OpenGL教程 第二十五课：变形

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

  6. NeHe OpenGL教程 第十五课：纹理图形字

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

  7. NeHe OpenGL教程 第五课：3D空间

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

  8. 【Linux探索之旅】第二部分第五课：用户和权限，有权就任性

    内容简单介绍 .第二部分第五课:用户和权限,有权就任性 2.第二部分第六课预告:Nano,刚開始学习的人的文本编辑器 用户和权限.有权就任性 今天的标题也挺任性的啊,虽说小编是一个非常本分的人(真的吗 ...

  9. .NET高级代码审计（第五课） .NET Remoting反序列化漏洞

    0x00 前言 最近几天国外安全研究员Soroush Dalili (@irsdl)公布了.NET Remoting应用程序可能存在反序列化安全风险,当服务端使用HTTP信道中的SoapServerF ...

随机推荐

  1. 李宏毅老师机器学习课程笔记_ML Lecture 1: 回归案例研究

    引言: 最近开始学习"机器学习",早就听说祖国宝岛的李宏毅老师的大名,一直没有时间看他的系列课程.今天听了一课,感觉非常棒,通俗易懂,而又能够抓住重点,中间还能加上一些很有趣的例子 ...

  2. SpringCloud服务的注册发现--------Eureka实现高可用

    1,Eureka作为注册中心,掌管者服务治理的功能,十分重要,如果注册中心的服务一旦宕机,所有的服务就会挂了,为此,实现注册中心的集群(高可用)就显得十分必要了 2,Eureka 搭建集群 实现原理就 ...

  3. 微信阻止ios下拉回弹，橡皮筋效果

    直接阻止touchmove事件就好了(需设置passive: false): document.addEventListener("touchmove", function(evt ...

  4. Pytest系列（5） - 用例执行的几种状态

    如果你还想从头学起Pytest,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1690628.html 用例执行状态 用例执行完成后,每条 ...

  5. 【每周小项目】使用 puppeteer 插件爬取动态网站

    目录 0. 前言 问题 解决 1. 下载与引包 2. 使用步骤 3. 爬过的几个坑 page.evaluate 的传参问题 元素操作问题 0. 前言 这两天对爬虫开始感兴趣,最开始是源于天涯的一个房价 ...

  6. C/C++知识总结 四 循环与分支语句

    C/C++循环与分支语句 循环与分支语句的意义 关系运算符.逻辑运算符 for循环和嵌套for循环(基于范围for循环) while循环与do while循环 分支if语句.if else语句.if ...

  7. centos默认终端bash美化、颜色设置

    centos默认终端bash是一个很简单的界面,又无法通过像zsh一样直接安装主题和代码高亮插件,但是我们可以在bashrc的配置文件中通过代码实现一部分功能: 1.代码介绍: 这里推荐一篇大佬的文章 ...

  8. Xshell连接Centos7

    13:53:10 2019-08-05 一个月暑假开始 学习搭建一个自己的博客 我是用阿里云的服务器搭建自己的博客 先利用XShell连接我的服务器 XShell下载地址:https://www.ne ...

  9. TC1.6SourceCode java课程表

    /** * @version 2.0 * @author sharks */ /** * Instruction * this version will use IO * apply file to ...

  10. MyBatis（八）：高级结果映射

    本文是按照狂神说的教学视频学习的笔记,强力推荐,教学深入浅出一遍就懂!b站搜索狂神说或点击下面链接 https://space.bilibili.com/95256449?spm_id_from=33 ...