材料分类：

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第四课】的原本基础上进行修改，将自定义的材料修改为如下：

        //自定义材料

        //map:用于设置纹理贴图，也可以用16进制的颜色替换：color:0xFFFFFF

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

        //MeshBasicMaterial：基础网孔材料，一个以简单着色（平面或线框）方式来绘制几何形状的材料。

        //MeshLambertMaterial：兰伯特网孔材料，一种非发光材料（兰伯特）的表面

        //MeshPhongMaterial：网孔材料，用于表面有光泽的材料，计算每个像素。

        var cubeMaterial = [

            //右

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

            //左

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

            //上

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

            //下

            new THREE.MeshLambertMaterial({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.MeshPhongMaterial({map: new THREE.TextureLoader().load('images/6.png') ,side:THREE.DoubleSide})

        ];

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

        //添加光线

        //注意：材料收到光线影响，即不同的材料对不同的光线表现出不同的特点，试着该表材料和光线，观测结果

        //1.    AmbientLight  环境光：这种光的颜色被应用到全局范围内的所有对象。

        //AmbientLight(光线的颜色，光线的强度)

        //var ambientLight = new THREE.AmbientLight(0xFFFFFF,3.0);

        //scene.add(ambientLight);//光线加入场景中

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

        //var pointLight = new THREE.PointLight(0xFFFFFF,3.0);

        //scene.add(pointLight);//光线加入场景中

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

        //var directionalLight = new THREE.DirectionalLight(0xFFFFFF,3.0);

        //scene.add(directionalLight);//光线加入场景中

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

        //var spotLight = new THREE.SpotLight(0xFFFFFF,3.0);

        //scene.add(spotLight);//光线加入场景中

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

        var light = new THREE.Light(0xFFFFFF,3.0);

        scene.add(light);//光线加入场景中

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

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

        //MeshBasicMaterial：基础网孔材料，一个以简单着色（平面或线框）方式来绘制几何形状的材料。

        //MeshLambertMaterial：兰伯特网孔材料，一种非发光材料（兰伯特）的表面

        //MeshPhongMaterial：网孔材料，用于表面有光泽的材料，计算每个像素。

        var cubeMaterial = [

            //右

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

            //左

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

            //上

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

            //下

            new THREE.MeshLambertMaterial({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.MeshPhongMaterial({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);       

        //添加光线

        //注意：材料收到光线影响，即不同的材料对不同的光线表现出不同的特点，试着该表材料和光线，观测结果

        //1.    AmbientLight  环境光：这种光的颜色被应用到全局范围内的所有对象。

        //AmbientLight(光线的颜色，光线的强度)

        //var ambientLight = new THREE.AmbientLight(0xFFFFFF,3.0);

        //scene.add(ambientLight);//光线加入场景中

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

        //var pointLight = new THREE.PointLight(0xFFFFFF,3.0);

        //scene.add(pointLight);//光线加入场景中

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

        //var directionalLight = new THREE.DirectionalLight(0xFFFFFF,3.0);

        //scene.add(directionalLight);//光线加入场景中

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

        //var spotLight = new THREE.SpotLight(0xFFFFFF,3.0);

        //scene.add(spotLight);//光线加入场景中

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

        var light = new THREE.Light(0xFFFFFF,3.0);

        scene.add(light);//光线加入场景中

        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.基础例子 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. iframe框架及优缺点

    iframe框架及优缺点 HTML5不再支持使用frame,关于frame与iframe的区别,可以参阅 iframe与frame的区别 基本使用 src:规定在iframe中显示的文档的URL. f ...

  2. 什么是EIP、ESP、EBP

    堆栈是一种简单的数据结构,是一种只允许在其一端进行插入或删除的线性表.允许插入或删除操作的一端称为栈顶,另一端称为栈底,对堆栈的插入和删除操作被称入栈和出栈.有一组CPU指令可以实现对进程的内存实现堆 ...

  3. 《大空头》与A股内幕消息

    目录 <大空头>简介 投行人士透露内幕消息不划算 <大空头>里合规性的一些解释 相信A股内幕消息的一些惨痛教训. 风险提示. <大空头>简介 <大空头> ...

  4. Git提交代码的流程——新手适用

    pull:是下拉代码,相等于将远程的代码下载到你本地,与你本地的代码合并push:是推代码,将你的代码上传到远程的动作完整的流程是: 第一种方法:(简单易懂) 1.git add .(后面有一个点,意 ...

  5. IP协议的助手 —— ICMP 协议

    IP协议的助手 —— ICMP 协议 IP协议的助手 —— ICMP 协议 ping 是基于 ICMP 协议工作的,所以要明白 ping 的工作,首先我们先来熟悉 ICMP 协议. ICMP 是什么? ...

  6. MATLAB中mean的用法

    https://blog.csdn.net/wangyang20170901/article/details/78745587 MATLAB中mean的用法 转载仙女阳 最后发布于2017-12-07 ...

  7. mongodb的更新语句

    MongoDB 使用 update() 和 save() 方法来更新集合中的文档: update()方法: update() 方法用于更新已存在的文档.语法格式如下: db.collection.up ...

  8. [noip2016]蚯蚓<单调队列+模拟>

    题目链接:https://vijos.org/p/2007 题目链接:https://www.luogu.org/problem/show?pid=2827#sub 说实话当两个网站给出AC后,我很感 ...

  9. C#是什么？

    C# 是一个现代的.通用的.面向对象的编程语言,它是由微软(Microsoft)开发的,由 Ecma 和 ISO 核准认可的. C# 是由 Anders Hejlsberg 和他的团队在 .Net 框 ...

  10. minIO分布式集群搭建+nginx负载均衡

    暂时关闭防火墙 systemctl stop firewalld 查看防火墙状态 systemctl status firewalld 赋予最高权限 chmod +x minio !/bin/bash ...