美文网首页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(场景)

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