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

材料分类：

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第五课】光线的添加和感光材料的更多相关文章

vue.js 第五课
计算属性 1.基础例子 2.计算属性 vs $watch 3.计算 setter 4.计算属性开发实务demo 1.计算属性 computed( 电脑computer) (区别普通属性) 计算属性 ...
潭州课堂25班：Ph201805201 WEB 之 JS 第五课 (课堂笔记)
算数运算符 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
【three.js第六课】物体3D化
1.在[three.js第五课]的基础上引入AnaglyphEffect.js文件. 文件路径: three源码包中进入[examples]文件夹: 进入[js]文件夹: 进入[effects]文件夹 ...
IC入门课第五课作业：完善 Microblog 前端（1、显示发布者的名字；2、增加新UI、3、关注其他学员的 canister）
上周完成了 IC 入门课程第五课的作业现将答案贴出,欢迎同学们参考,禁止抄袭作业哦课程作业 (完善 microblog 前端) 1. 显示消息的发布者名字 a. 给 Message 增加 auth ...
NeHe OpenGL教程第二十五课：变形
转自[翻译]NeHe OpenGL 教程前言声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...
NeHe OpenGL教程第十五课：纹理图形字
转自[翻译]NeHe OpenGL 教程前言声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...
NeHe OpenGL教程第五课：3D空间
转自[翻译]NeHe OpenGL 教程前言声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...
【Linux探索之旅】第二部分第五课：用户和权限，有权就任性
内容简单介绍 .第二部分第五课:用户和权限,有权就任性 2.第二部分第六课预告:Nano,刚開始学习的人的文本编辑器用户和权限.有权就任性今天的标题也挺任性的啊,虽说小编是一个非常本分的人(真的吗 ...
.NET高级代码审计（第五课） .NET Remoting反序列化漏洞
0x00 前言最近几天国外安全研究员Soroush Dalili (@irsdl)公布了.NET Remoting应用程序可能存在反序列化安全风险,当服务端使用HTTP信道中的SoapServerF ...

随机推荐

HBU-数据库第五周作业
第五周数据库作业注意 MySQL的数据库名.表名.列名.别名大小写规则是这样的: 1.数据库名与表名是严格区分大小写的: 2.表的别名是严格区分大小写的: 3.列名与列的别名在所有的情况下均是忽略大 ...
《前端之路》- TypeScript (四) class 中各类属性、方法，抽象类、多态
目录一.TypeScript 中的类二.TypeScript 中类的继承三.TypeScript 中公共,私有与受保护的修饰符 3-1.属性的 public 3-2.属性的 private 3- ...
《数据库优化》- MySQL视图
一.什么是视图视图,是基于一个表或多个表或视图的逻辑表,本身不包含数据,通过它可以对表里面的数据进行查询和修改,视图基于的表称为基表.视图是存储在数据字典里的一条select语句. 通俗地讲,视图就 ...
NLP interview
2019-08-26 17:19:58 1)聊实习项目 2)代码题,二维数组中的查找某个target 3)讲一些最能体现创新能力的工作,而不是一些工程上的实现 4)讲论文可以从哪些方面做创新点,文本生 ...
报错：Error updating database. Cause: com.mysql.jdbc.MysqlDataTruncation: Data truncation: Data too long for column 'gender' at row 1
我遇到这个错误是解决办法:我修改了对应的数据库字段的长度:原本我设置的是char型,但是存进去的是一个string型,结果就报了这个报了这个错误下面就是数据库修改之后的结果. 以上都是我学习过程中遇 ...
玩转控件:对Dev中GridControl控件的封装和扩展
又是一年清明节至,细雨绵绵犹如泪光,树叶随风摆动.... 转眼间,一年又过去了三分之一,疫情的严峻让不少企业就跟清明时节的树叶一样,摇摇欲坠.裁员的裁员,降薪的降薪,996的996~~说起来都是泪,以 ...
使用Keras进行深度学习：（七）GRU讲解及实践
####欢迎大家关注我们的网站和系列教程:http://www.tensorflownews.com/,学习更多的机器学习.深度学习的知识! 介绍 GRU(Gated Recurrent Unit) ...
jmeter4.0介绍一
apache JMeter™应用程序是开放源码软件, 一个100% 纯 Java 应用程序, 旨在加载测试功能行为和测量性能.它最初设计用于测试 Web 应用程序, 但后来扩展到其他测试功能. Jme ...
如何查看自己项目中vue的版本号和cli的版本号
查看Vue版本号代码方式 npm list vue 其他方式找到package.json文件夹找"dependencies"然后就可以看到你装的vue的版本了查看cli版本 ...
使用node.js中遇到的一些小bug
1.BUG Cannot set headers after they are sent to the client 解决:即发出一次请求得到两次或以上的回应时会出现此警告,此时注意查看再在一些条件下 ...

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

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

随机推荐

热门专题