three基础

1. 导包

引入three.js，代码示例如下：

 import * as THREE from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.module.js'

2. 自定义渲染节点

2.1 渲染节点

渲染节点的数据结构如下：

interface IRenderNode {
  // 唯一值
  id: string
  // 几何对象，默认是空
  geomtry: object
  // 初始化参数
  props: IRenderNodeProps
  // 自定义渲染节点的初始化处理，其中，scene：是外部渲染的场景;view：是场景视图；context：是渲染上下文，内部数据结构可参考`RenderContext`
  setup(scene: ExternalScene, view: ISceneView, context?: RenderContext): void
  // 对自定义的渲染节点内容进行操作并返回
  // @description 在 Renderer 中的render函数会依次调用 RenderNode 的 performRender 函数
  performRender(ctx: RenderContext, delta: Number): void
}

注：函数setup和performRender是必需的，否则节点构建不成功。

2.2 渲染上下文

渲染上下文的数据结构如下：

interface RenderContext {
  // webgl渲染上下文
  gl: WebGLRenderingContext
  // 绑定渲染目标
  bindRenderTarget():void
  // 重置渲染
  resetWebGLState():void
}

2.3 自定义渲染节点

使用three实现自定义渲染节点，代码示例如下：

const myThreeNode = {
  //  渲染节点初始化处理
  setup(externalScene, view, context) {...}
  ...
  // 每个渲染节点必须实现的渲染函数
  performRender(context) {...}
  ...
}

3. 使用方法

3.1 添加自定义渲染节点

addNode(node: IRenderNode): void

参数node实例化后的渲染节点。

在场景中添加渲染节点，代码示例如下：

scene.renderer.use('three').addNode(myThreeNode)

3.2 删除自定义渲染节点

removeNode(node: IRenderNode): void

参数node实例化后的渲染节点。

在场景中移除渲染节点，实际上就是删除节点中的几何对象geomtry，代码示例如下：

scene.renderer.use('three').removeNode(myThreeNode)

动画与粒子

选择与强调