美文网首页Web前端之路
ThreeJs 认识场景和雾

ThreeJs 认识场景和雾

作者: 仰简 | 来源:发表于2019-07-31 15:40 被阅读0次

一、前言

场景,可以认为是 ThreeJs 3D 世界中的一个舞台,场景允许你在什么地方、摆放什么东西来交给three.js来渲染,这是你放置物体、灯光和摄像机的地方。

场景可以接受一个雾参数来模拟场景中雾的效果,而物体的材质则通过设置 fog 属性来决定材质是否受雾的影响。添加了雾的场景,就有点类似于起了雾的山峰,或者就是类似于西游记里天庭上的那种场景。

二、认识场景和雾

1.Scene

Scene.jpg

2.Fog

Fog.jpg
scene.fog = new THREE.Fog( 0x050505, 2000, 3500 );
FogSample.jpg

3.FogExp2

FogExp2.jpg
scene.fog = new THREE.FogExp2( 0xefd1b5, 0.0025 );
FogExp2Sample.jpg

三、总结

ThreeJs 中不管是物体还是灯光,或者是相机,都要被添加到场景中来进行渲染。雾是场景的修饰器,而物体的材质可以选择是否受到雾的影响。

相关文章

  • ThreeJs 认识场景和雾

    一、前言 场景,可以认为是 ThreeJs 3D 世界中的一个舞台,场景允许你在什么地方、摆放什么东西来交给thr...

  • 02、添加材质、光源以及物体对象的阴影

    threejs中添加新的材质和灯光以及设置阴影属性 首先,threejs的初始化,需要创建场景、相机、渲染器 创建...

  • 场景

    场景是threejs中所有object 元素盛放的容器,场景并没有多余复杂的操作,只需要在每次使用threejs构...

  • threejs场景雾化

    在场景生成的时候顺手雾化一下就可以了,它存在三个参数,第一个代表雾的颜色,后面代表雾化范围。

  • Threejs之三大组件

    Threejs的三大组件是场景,相机和渲染器。初学Threejs,完成了第一个样例,效果如下: 代码如下: 1.相...

  • D3.js

    D3.js 为什么学习D3 D3.js和threejs的应用场景完全不一样。threejs主要应用与基于webGL...

  • ThreeJs 认识材质

    一、前言 材质和纹理有那么一点微妙的关系,纹理决定了物体的表面,而材质则决定了物体的“气质”,比如说,反射度,光滑...

  • ThreeJs 认识纹理

    一、前言 这篇文章,我们主要来了解一下 ThreeJs 中纹理相关的知识。渲染一个 3D 物体时,网格 Mesh ...

  • three.js

    threejs官网 三维场景基本要素: 场景(Scene):模型、灯光等 相机(Camera):观察场景的视角 渲...

  • threejs - 3 - 场景刷新

    :) 简介 刷新其实可以和动画联系起来,改变场景中的物体(改变位置),刷新界面。最后就可以形成动画。一般1秒钟需要...

网友评论

    本文标题:ThreeJs 认识场景和雾

    本文链接:https://www.haomeiwen.com/subject/dyrtdctx.html