【基于 React + Three.js 第一人称3D星球游戏】01.在React中使用Three.js

Three.js DOM结构 来源： https://threejsfundamentals.org/threejs/lessons/threejs-fundamentals.html

 

Three.js的大部分实例文件是直接写在HTML中，直接接入HTML原生的DOM结构。

Renderer作为Three.js的渲染器，有了Scene和Camera之后进行渲染。得到的渲染结果（canvas元素）作为一个新的DOM节点加入HTML的DOM tree中，即：

document.body.appendChild( renderer.domElement )

但React采用Virtual DOM，由ReactNode组成虚拟的DOM tree，通过ReactDom.render()最终一次性渲染到实际的浏览器DOM节点上，形成界面效果。

那Three.js的渲染器得到的结果作为DOM节点在React中应该放到哪里？