材料分类:

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. AspNetCore3.1_Secutiry源码解析_6_Authentication_OpenIdConnect

    title: "AspNetCore3.1_Secutiry源码解析_6_Authentication_OpenIdConnect" date: 2020-03-25T21:33: ...

  2. 故事:走进JVM的世界(图文并茂)

    注意!本文较长,建议先收藏再阅读.更多文章可以关注作者公众号:码上实战 你也可以 star 我的 GitHub上本文所属仓库:https://github.com/flyhero/MarkNote 说 ...

  3. selenium停止对PhantomJS的支持

    今天发现最新版本的selenium3.11.0停止对PhantomJS的支持,需要对selenium降级 卸载最新版本:pip3 uninstall selenium 安装历史版本:pip3 inst ...

  4. Django 缓存机制

    一 缓存介绍 在动态网站中,用户所有的请求,服务器都会去数据库中进行相应的增,删,查,改,渲染模板,执行业务逻辑,最后生成用户看到的页面. 当一个网站的用户访问量很大的时候,每一次的的后台操作,都会消 ...

  5. JDBC开源框架:DBUtils自定义业务类型相关转换器

    dbutils提供的handler转换不能满足实际业务开发的需求.比如枚举转int,时间类型LocalDateTime,实体对象的属性名与字段未能相对应. mysql表member结构字段: id.m ...

  6. Spark使用jdbc时的并行度

    Spark SQL支持数据源使用JDBC从其他数据库读取数据. 与使用JdbcRDD相比,应优先使用此功能. 这是因为结果以DataFrame的形式返回,并且可以轻松地在Spark SQL中进行处理或 ...

  7. 1.NET Core 概述

    .NET Core 概述 .NET Core是一个免费的.开源的.跨平台的.广泛使用的Web框架:它是由微软维护的.社区广泛参与支持的一个框架..NET Core可以运行在:Windows.MacOS ...

  8. AI体验类产品竞品分析

    1.业界状态 人工智能(Artificial Intelligence),简称AI.上个世纪50年代就有一批年轻的科学家提出了这一概念,经历过50多年的长足发展,信息化建设的脚步不断加快,机器人战胜人 ...

  9. 深入理解NIO(二)—— Tomcat中对NIO的应用

    深入理解NIO(二)—— Tomcat中对NIO的应用 老哥行行好,转载和我说一声好吗,我不介意转载的,但是请把原文链接贴大点好吗 Tomcat大致架构 先贴两张图大致看一眼Tomcat的架构 Tom ...

  10. python—time模块

    timetime模块提供各种时间相关的功能,与时间相关的模块有:time,datetime,calendar等. 时间有三种表示方式,一种是时间戳.一种是格式化时间.一种是时间元组.时间戳和格式化时间 ...