材料分类:

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. C 2015年真题【保】

    1.编写一个完整的程序,使之能完成以下功能:从键盘中输入若干个整数,用链表储存这些输入的数,并要求存储的顺序与输入的顺序相反. 分析:链表建立[头插法] 代码: #include <stdio. ...

  2. go第三方常用包

    配置 go-ini/ini 用于读取 ini 格式配置文件. 地址:https://github.com/Go-ini/ini tomal 用于读取 conf 格式配置文件. 地址:https://g ...

  3. 接口自动化框架pyface详细介绍

    版权说明 本框架系本人结合一些实践经验和开源框架设计思想,在家基于兴趣爱好独立完成的代码开发. 源码只保存在私人电脑,办公电脑上无.github开源与公司无关,先把关系撇清,不涉及侵权. 嘘. 框架定 ...

  4. jq 导航跟随 模拟京东手机端

    想做一个导航跟随,但是代码都要下载,自己简单些了一个,css都放html里面了,所以也不用下载直接新建html,然后粘贴,点开就是导航跟随效果 效果如图 <!DOCTYPE html> & ...

  5. Ubuntu 18.04 将gcc版本降级为5.5版本

    Remark: Polynomial algebra 程序由于版本问题只能在gcc 5.0 版本运行, 而ubuntu更新会将gcc 更新到7.0版本,出现冲突(报错:如下) collect2: er ...

  6. python之面向对象三大特性: 继承(单继承)

    什么是继承 专业角度: B 继承 A类, B就叫做A的子类,派生类, A叫做B的父类,基类,超类. B类以及B类的对象使用A类的所有的属性以及方法. 字面意思: 继承就是继承父母所有的资产 class ...

  7. 树莓派3B+之Raspbian系统的安装

    概述 因为之前一段时间在研究物联网的原因,所以对树莓派这个东西早就有所耳闻.在我的印象里,树莓派几乎无所不能,它可以用来学编程. 搞物联网. 做服务器,甚至还能用它来进行渗透测试.终于,没禁的住诱惑, ...

  8. 数塔(杭电oj2084)

    Problem Description 在讲述DP算法的时候,一个经典的例子就是数塔问题,它是这样描述的: 有如下所示的数塔,要求从顶层走到底层,若每一步只能走到相邻的结点,则经过的结点的数字之和最大 ...

  9. 感知器基础原理及python实现

    简单版本,按照李航的<统计学习方法>的思路编写 数据采用了著名的sklearn自带的iries数据,最优化求解采用了SGD算法. 预处理增加了标准化操作. ''' perceptron c ...

  10. 【mysql】索引 回表 覆盖索引 索引下推

    索引类型 索引类型分为主键索引和非主键索引.(一定要牢记,是怎么存储数据的) 主键索引的叶子节点存的是整行数据.在 InnoDB 里,主键索引也被称为聚簇索引(clustered index). 非主 ...