场景

yisky大约 4 分钟基础知识教程场景

Scene 作为场景单元，负责组织管理实体树，SceneRenderer 场景渲染器，负责场景的具体渲染。

我们可以同时激活一个或多个场景，也可以通过控制逻辑动态切换激活的场景。不同场景的实实体、组件之间是相互隔离，互不影响。

创建场景

创建场景

import { Scene } from '@fantasy3d/core';

// 创建场景
const scene = new Scene( engine );

提示

Scene 初始化参数详见 SceneOptions。

设置场景渲染器

import { SceneRenderer } from '@fantasy3d/core';

// 创建场景渲染器
const sceneRenderer = new SceneRenderer( engine );

// 为场景设置渲染器
scene.sceneRenderer = sceneRenderer;

重要

场景渲染器可以被多个场景共用，不要重复相同类型场景渲染器！除非不同场景使用不同类型渲染器。

import { SceneRenderer } from '@fantasy3d/core';
import { EffectRenderer } from '@fantasy3d/postprocessing';

// 创建默认场景渲染器
const sceneRenderer = new SceneRenderer( engine );
// 创建后处理场景渲染器
const effectRenderer = new EffectRenderer( engine );

// Scene1和Scene2使用相同的场景渲染器
scene1.sceneRenderer = sceneRenderer;
scene2.sceneRenderer = sceneRenderer;

// Scene3使用后处理场景渲染器
scene3.sceneRenderer = effectRenderer;

提示

Fantasy 3D 目前提供 SceneRenderer 和 EffectRenderer 两种类型场景渲染器。此外，我们也可以根据实际需求开发定制场景渲染器。

创建相机

import { Vector3, Vector4 } from 'three';

// 创建一个透视相机
const camera = scene.createPerspectiveCamera( {

  // 相机实体方位属性
  transform: {

    position: new Vector3( 0.0, 5.0, 5.0 ),
    lookAt: new Vector3( 0.0, 0.0, 0.0 )

  },

  // 相机属性
  camera: { 
    
    near: 0.1,                          // 近裁剪面距离
    far: 1000.0,                        // 远裁剪面距离
    viewport: new Vector3( 0, 0, 1, 1 ) // 相机渲染视口范围（NDC空间），xy视口左上角坐标，zw视口宽高
  
  }

} );

提示

一个场景可以拥有多个激活相机，可以通过 "viewport" 参数设置相机的渲染视口。

激活场景

// 激活场景
scene.isActive = true;

重要

一个场景只有被激活且至少存在一个激活相机才会被渲染！

属性

isActive - 场景是否激活，读写属性。
native - 获取three.js原生场景对象（Scene），只读属性。
rootEntity - 获取场景根实体，只读属性。
activeCameras - 获取场景激活的相机，只读属性。
background - 设置场景背景，只写属性。
backgroundBlurriness - 设置场景背景模糊度，只写属性。
backgroundIntensity - 设置场景背景强度，只写属性。

方法

createOrthographicCamera - 创建正交相机。

import { Vector3 } from 'three';

// 创建正交相机
const camera = scene.createOrthographicCamera( {

  transform: { position: new Vector3( 0.0, 10.0, 40.0 ) },
  camera: {

    near: 10.0,
    far: 150.0,
    frustum: 50.0

  }

} );

createPerspectiveCamera - 创建透视相机。

import { Vector3 } from 'three';

// 创建投射相机
const camera = scene.createPerspectiveCamera( {

  transform: {

    position: new Vector3( 0.0, 5.0, 5.0 ),
    lookAt: new Vector3( 0.0, 0.0, 0.0 )

  }

  camera: {

    near: 0.1,
    far: 500.0

  }

} );

render - 渲染场景。
dipose - 释放场景。

事件

on - 订阅事件。

import { EventType } from '@fantasy3d/core';

// 订阅“场景开始渲染”事件
scene.on( EventType.BEFORE_SCENE_RENDER, () => {

  // TODO:事件响应

} );

once - 订阅事件且仅响应一次。

import { EventType } from '@fantasy3d/core';

// 订阅一次“场景开始渲染”事件
scene.once( EventType.BEFORE_SCENE_RENDER, () => {

  // TODO:事件响应

} );

off - 取消事件订阅。

import { EventType } from '@fantasy3d/core';

// “场景开始渲染”事件订阅回调
const callback = () => {};

// 订阅“场景开始渲染”事件
scene.on( EventType.BEFORE_SCENE_RENDER, callback, { target: this } );

// 取消订阅“场景开始渲染”事件
scene.off( EventType.BEFORE_SCENE_RENDER, callback );

重要

“取消订阅”时如果不设置第二个参数，会取消该类型事件的所有订阅！

// 取消“场景开始渲染”事件的所有订阅
scene.off( EventType.BEFORE_SCENE_RENDER );

emit - 分发事件。

import { EventType } from '@fantasy3d/core';

// 分发“场景开始渲染”事件
scene.emit( { type: EventType.BEFORE_FRAME_LOOP } );

内置事件

事件类型	事件说明
BEFORE_SCENE_RENDER	场景开始渲染事件，单个场景渲染之前触发
AFTER_SCENE_RENDER	场景结束渲染事件，单个场景渲染之后触发
BEFORE_CAMERA_DEPTH_RENDER	相机深度开始渲染事件，相机深度渲染之前触发
AFTER_CAMERA_DEPTH_RENDER	相机深度结束渲染事件，相机深度渲染之后触发
BEFORE_CAMERA_RENDER	相机开始渲染事件，相机渲染之前触发
AFTER_CAMERA_RENDER	相机结束渲染事件，相机渲染之后触发

场景

# 创建场景

# 属性

# 方法

# 事件

创建场景

属性

方法

事件