Three.js学习2_场景相关

时间:2020-09-11 19:25:04 来源:

【摘要】 Three.js学习2_场景相关考必过小编为大家整理了关于Three.js学习2_场景相关的信息,希望可以帮助到大家!

Three.js学习2_场景相关

标签:材质解释renderimageswebglOLEtryplaydem

场景参数设置

部分内容展示:

          

场景相关内容, 下文将一一解释

    构造器Scene(),

    属性:

      fog

      overrideMaterial

      autoUpdate

      background

    方法

      toJSON

      dispose

1. 构造器

构造一个场景, let scene = new THREE.Scene()

2. 属性

2.1 fog

该属性表示线性雾, 就和实际生活中类似, 距离越远, 可视度越低

1     let scene = new THREE.Scene();
2     let fog = new THREE.Fog(0xffffff, 1, 20);
3     scene.fog = fog;

效果如上图所示

2.2 overrideMaterial

用于覆盖场景中所有物体的材质, 关于材质在后续会讲到.

这里简单讲解下物体, 每个物体由两部分组成, 一个是几何结构, 一个是用于展示的材质,

代码及效果如下:  

     

 1     let scene = new THREE.Scene();
 2 
 3     let material1 = new THREE.MeshBasicMaterial({
 4         // color: 0x00ff00,
 5         vertexColors: THREE.VertexColors,
 6         wireframe: true
 7     });
 8 
 9     // 覆盖所有材质
10     scene.overrideMaterial=material1;
11 
12     let geometry = new THREE.BoxGeometry( 1, 1, 1 );
13     let meterial2 = new THREE.MeshBasicMaterial( {
14         vertexColors: THREE.VertexColors,
15         // wireframe: true
16     });
17     let cube = new THREE.Mesh(
18         geometry,
19         meterial2
20     );
21     scene.add(cube);

解释:

3-7行创建材质, 10行场景覆盖所有材质, 12行创建正方体, 13-16行创建材质, 创建带材质的正方体

逻辑: 首先创建一个带有材质的正方体, 如上左图 ----> 10行语句直接将该正方体材质换成场景要求的, 如上右图

2.3 autoUpdate

默认值为true,若设置了这个值,则渲染器会检查每一帧是否需要更新场景及其中物体的矩阵。 当设为false时,你必须亲自手动维护场景中的矩阵。还未使用过

2.4 background

设置场景的背景, 可以是颜色, 照片, 或者是六个面组成的天空盒, 看起来就和真实环境十分类似

      

        更改背景颜色                          更改背景照片

1     let scene = new THREE.Scene();
2     // scene.background = new THREE.Color(0xfff0ff);
3     scene.background = new THREE.TextureLoader().load( "../项目/images/brick_uneven_stones_basecolor.png" );

解释:

2行, 更改背景颜色, 3行更改背景图片

3. 方法

3.1 toJSON

返回目前流行的JSON数据

console.log(scene.toJSON());

返回结果

3.2 dispose

清除WebGLRenderer内部所缓存的场景相关的数据。

Three.js学习2_场景相关

标签:材质解释renderimageswebglOLEtryplaydem

以上就是Three.js学习2_场景相关的内容,更多资讯请及时关注考必过网站,最新消息小编会第一时间发布,大家考试加油!

上一篇      下一篇
前端相关推荐 更多>>
Three.jsthree.js 中的矩阵变换及两种旋转表达方式 three.js 着色器材质基础(一) three.js 着色器材质之变量(二)
前端热点专题 更多>>
热点问答
国家公务员考试年龄限制是多少 公务员国考和省考考试内容有什么区别 函授大专学历能不能考公务员 国家公务员考试考点能自己选择吗 新闻学专业能报考2022年公务员考试吗 什么是联合培养研究生 什么是破格录取研究生 什么人不适合读研 研究生报名户口所在地填什么 研究生结业和毕业有什么区别
网站首页 网站地图 返回顶部
考必过移动版 https://m.kaobiguo.net