美文网首页Three.jsThree.js学习记录系列
Three.js 学习记录(3) ----Scene(场景)

Three.js 学习记录(3) ----Scene(场景)

作者: Threejs开发者 | 来源:发表于2018-02-22 11:59 被阅读68次

一、基本介绍

从官网的的文档关于scene的API描述中可以看出,scene继承于Object3D。查看源码Scene.js文件也看可以佐证:

//Scene对象从THREE.Objec3D的原型继承所有属性方法
THREE.Scene.prototype = Object.create( THREE.Object3D.prototype );  

那么Scene除了拥有Object3D对象的属性和方法外,还拥有自己的一些,下面分别介绍。

1、作用

Scene是场景对象,所有的对象,灯光,动画,骨骼等都需要放置在场景内.

2、常用属性

属性名 描述
fog 设置场景的雾化效果,可以渲染出一层雾气,隐层远处的的物体.
overrideMaterial 强制场景中所有物体使用相同的材质。
autoUpdate 暂时没有用到
background 暂时没有用到
children 继承而来,所有对象的列表

3、常用方法

方法名 描述
add() 继承而来,向场景中添加对象。
remove() 继承而来,从场景中移除对象。
getChildByName() 继承而来根据名字直接返回这个对象。
traverse() 传入一个回调函数访问所有的对象。

二、属性示例

  • 针对一些常用的属性和方法做简单的代码使用示例。
  • 对于属性的类型为指针时,就要使用new 关键字,如fog和overrideMaterial属性。

下面代码摘自three.js文件:

THREE.Scene = function () {
    THREE.Object3D.call( this );
    this.type = 'Scene';
    this.fog = null;
    this.overrideMaterial = null;
    this.autoUpdate = true; // checked by the renderer
};

1、fog雾化效果

在定义完场景后加上雾化属性。

  //定义一个白色的雾化效果(0xffffff)
//THREE.Fog = function ( color, near, far )
 scene.fog = new THREE.Fog(0xffffff, 0.015, 100);

题外话:
THREE.Fog()为全局函数可直接调用,在src/scenes/Fog.js文件中定义。

2、overrideMaterial覆盖材料

所有对象都用相同的材质和颜色渲染.

//定义一个材料颜色为白色,详细材料的介绍关注下面的更新内容作。
var scene = new THREE.Scene();
scene.overrideMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});

三、方法示例

方法使用比较直接易懂。

scene.add(plane); 
scene.remove(plane);

相关文章

  • Three.js 学习记录(3) ----Scene(场景)

    一、基本介绍 从官网的的文档关于scene的API描述中可以看出,scene继承于Object3D。查看源码Sce...

  • three 简单模板

    Three.js的核心五步就是: 1.设置three.js渲染器2.设置摄像机camera3.设置场景scene4...

  • threeJs基础文档

    three.js基础结构 目录 一个three.js项目至少需要的东西有—— [ ] scene:场景 [ ] c...

  • Three.js入门(一)——旋转的立方体

    1、准备开发环境 2、创建一个场景 在Three.js中,要渲染物体到网页中,我们需要3个组建:场景(scene)...

  • 1.three.js世界中的四大要素

    一、三大组件 在Three.js中,要渲染物体到网页中,我们需要3个组建:场景(scene)、相机(camera)...

  • 初识three.js--2

    1、三大组建 在Three.js中,要渲染物体到网页中,我们需要3个组建:场景(scene)、相机(camera)...

  • Three.js与计算机图形学(三)

    Three.js中的3d场景(scene)为无限大的,我们当然不可能去获取无限大的信息,在Three.js中封装了...

  • 基本概念

    three.js基本概念## 一个典型的Three.js程序至少要包括渲染器(Renderer)、场景(Scene...

  • three.js笔记

    three.js 专业名词 场景(Scene)、相机(camera)和渲染器(WebGLRenderer)rend...

  • three.js 实现物体贴图

    在Three.js中,要渲染物体到网页中,我们需要3个组建:场景(scene)、相机(camera)和渲染器(re...

网友评论

    本文标题:Three.js 学习记录(3) ----Scene(场景)

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