让每一名学员高薪就业
返回列表 发新帖

threeJS---光阴与材质

[复制链接]

177

主题

331

帖子

2890

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2890

版主

发表于 2019-7-17 15:55:29  | 显示全部楼层 | 阅读模式
在掌握了创建平面、球体、立方体模型,并学习了对模型的定位之后,下图是我们上一小结内容的完后效果图:
今天我们要在上一节内容基础上学习模型的相关材质以及光阴,如下图:
让我们来看看怎么做吧!
在threeJS里添加新的材质和灯光都是非常简单的,做法跟我们在前一节所理解的基本一样。

首先我们要先在场景中添加一个光源:
//前面代码省略
...

//创建光源代码,颜色为白色
var spotLight = new THREE.SpotLight(0Xffffff);
// 对光源进行定位
spotLight.position.set(-40,60,-10);
//场景中添加光源
scene.add(spotLight);

//在WwebGL_output盒子中使用渲染器渲染元素
$("#WebGL_output").append(renderer.domElement);
在threeJS中,SpotLight()是一种聚光灯灯源,具有类似于锥形效果的光锥,比如:手电筒。我们通过SpotLight()方法创建一个光源,通过SpotLight

.position.set(-40,60,-10))进行了光源的一个定位。如果我们现在渲染场景,结果是和之前场景并没有任何区别, 原因就在于我们的材质,在threeJS中,不同的材质对光源的反应是不同的,在我们上一节的实例中,我们是使用的是基础材质(MeshBasicMaterial()方法),基础材质是不会对场景中的光源产生反应的,而只会一指定的颜色渲染物体。所以接下来我们需要更改plane(平面)、cube(立方体)和sphere(球体)的材质,如下代码:
//平面物体材质
//原: var planeMaterial = new THREE.MeshBasicMaterial({color:0xcccccc});
//改为
var planeMaterial = new THREE.MeshLambertMaterial({color:0xcccccc})


//立方体物体材质
//原: var cubeMeterial = new THREE.MeshBasicMaterial({color:0xff0000});
//改为
var cubeMeterial = new THREE.MeshLambertMaterial({color:0xff0000});


//球体材质
// wireframe --- 控制物体线模式的属性
//原: var sphereMaterial = new THREE.MeshBasicMaterial({color:0x7777ff,wireframe: true});
// 改为
var sphereMaterial = new THREE.MeshLambertMaterial({color:0x7777ff});

在上面这段代码中,我们将三个物体的基本材质采薇了MeshLambertMaterial,在threeJS中有两种材质可以对光源产生反应,分别是MeshLambertMaterial和MeshPhongMaterial。在本节学习中,我们就是用MeshLambertMaterial材质,效果如下图:
虽然物体已经产生了光影的效果,但是这并不是我们所追求的效果,我们还缺少了光影效果中最重要的部分---阴影
渲染阴影要花费大量的计算资源,因此默认情况下ThreeJS并不生成阴影,但是要生成阴影还是很简单的,我们仅需要添加几行代码,如以下代码片段:

//允许渲染器开启阴影映射
renderer.shadowMapEnabled = true ;

首先,我们要允许渲染器开启阴影映射,但是只加这一句代码并不能开启所有物体的阴影,这句话只是告诉渲染器,允许渲染阴影,我们还需要明确指定哪个物体投射阴影,哪个物体要接收阴影。
在我们今天的练习里,我们需要将球体和立方体的阴影投射在地面上的,所以需要给我们球体和立方体投射阴影,而我们的平面则是接收阴影,所以我们还需要添加一下代码:
//开启平面接收阴影
plane.receiveShadow = true;
...
//允许立方体产生阴影
cude.castShadoe = true;
...
//允许球体产生阴影
sphere.castShadow = true;
此时你刷新页面后,页面还是没什么变化,因为我们需要给确定哪个光源是可以产生阴影的,在threeJS中,并不是所有光源都能产生阴影,所以我们还需要给spotLight(光源)也要设置产生阴影的属性:
//允许光源产生隐隐
spotLight.castShadow = true;
此时,我们刷新页面会看到以下效果:
我们阴影会产生一个锯齿的效果,我们可以修改光源分辨率来改善这个阴影的锯齿问题,代码如下:
//设置阴影分辨率
spotLight.shadow.mapSize.width = 2048;
spotLight.shadow.mapSize.height = 2048;
注意:光源的远近位置也会影响阴影的马赛克效果哦!
我们本小节的学习内容就到此结束啦。

回复

使用道具 举报

0

主题

9

帖子

19

积分

菜鸟

Rank: 1

积分
19
发表于 2019-7-17 15:58:27  | 显示全部楼层
楼主是老师么
回复 支持 反对

使用道具 举报

0

主题

6

帖子

7

积分

菜鸟

Rank: 1

积分
7
发表于 2019-7-17 15:58:50  | 显示全部楼层
老师们都好严格
回复 支持 反对

使用道具 举报

0

主题

8

帖子

26

积分

菜鸟

Rank: 1

积分
26
发表于 2019-7-17 16:05:40  | 显示全部楼层
PHP是世界上最好的语言
回复 支持 反对

使用道具 举报

0

主题

8

帖子

10

积分

菜鸟

Rank: 1

积分
10
发表于 2019-7-17 16:06:48  | 显示全部楼层
培训多久毕业
回复 支持 反对

使用道具 举报

0

主题

23

帖子

17

积分

菜鸟

Rank: 1

积分
17
发表于 2019-7-17 16:06:55  | 显示全部楼层
我逐字逐句地看完这个帖子
回复 支持 反对

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Java培训  |   PHP培训  |   UI培训  |   H5培训  |   Python培训  |   大数据培训  |   如何报名  |   视频下载
快速回复 返回顶部 返回列表