3. 场景Scene——所有组件的容器

声明一个场景:

new THREE.Scene();

场景中的组件:

  • 相机:决定哪些东西将要显示在屏幕上渲染
  • 光源:它们对材质如何显示,以及生产阴影是材质如何产生影响
  • 物体(Mesh对象):它们是在相机视图里主要的渲染对象:方块、球体等

常用属性

  • 1.fog 设置场景的雾化效果,可以渲染出一层雾气,隐层远处的的物体.

    // 线性雾,密度随着距离的增加呈线性增长。参数为:雾的颜色,开始的地方,浓度的加深程度。
    scene.fog = new THREE.Fog(0xffffff, 0.015, 100); 
    
    // 指数雾,密度随距离呈指数级增长。参数为:雾的颜色,浓度
    scene.fog = new THREE. FogExp2 (0xffffff, 0.015);
    
  • 2.材质覆盖:所有物体设置为同样的材质
    scene.overrideMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
    
  • 3.autoUpdate 默认true,如果设置,如果场景和对象需要矩阵更新则渲染器检查每个帧。如果不是,那么你必须自己维护场景中的所有矩阵。
  • 4.background
    scene.background = new THREE.Color().setHSL( 0.51, 0.6, 0.6 );
    
  • 5.children 获取场景中的所有子对象

常用方法

  • add(obj); //向场景中添加物体
  • remove(obj); //删除场景中的物体
  • getObjectByName(name); //通过名称获取场景中的物体对象
  • traverse(function (e){}); //遍历场景中的每个物体,对物体进行操作
demo: scene-function.html
demo:scene-effect.html

threejs
JSRUN前端笔记, 是针对前端工程师开放的一个笔记分享平台,是前端工程师记录重点、分享经验的一个笔记本。JSRUN前端采用的 MarkDown 语法 (极客专用语法), 这里只属于前端工程师。