在多个 div 上渲染多个场景答案

【问题标题】：Render multiple scene on multiple div在多个 div 上渲染多个场景
【发布时间】：2018-08-07 13:02:27
【问题描述】：

我使用map 函数创建了多个场景。在那个map函数中，我创建了一定数量的div（数量根据场景而定）。如何将每个场景附加到每个 div。

当我尝试渲染时，第一个模型（或所有其他模型，除了最后一个）会闪烁显示然后消失，然后是最后一个模型显示。据我了解，它与渲染功能有关。

但我现在不知道该怎么办。任何帮助，将不胜感激。

  let cameraInstance = new THREE.PerspectiveCamera(
          75,
          window.innerWidth / window.innerHeight,
          0.1,
          1000
        )
        const rendererInstance = new THREE.WebGLRenderer({ alpha: true })
        rendererInstance.setSize(300, 200)
        const oControl = new OrbitControls(
          cameraInstance,
          rendererInstance.domElement
        )

        const loaderInstance = new THREE.JSONLoader()

        let createSceneInstance = tempInstances.map((tempInstance, i) => {
          let sceneInstance = new THREE.Scene()
          const ambientLight = new THREE.AmbientLight(0x383838)
          sceneInstance.add(ambientLight)

          const spotLight = new THREE.SpotLight(0xffffff)
          spotLight.position.set(300, 300, 300)
          spotLight.intensity = 1
          sceneInstance.add(spotLight)

          let newDiv = document.createElement('div')
          newDiv.id = 'instance' + i
          document.getElementById('instances').appendChild(newDiv)

          loaderInstance.load(
            path + tempInstance.json3d,
            // eslint-disable-next-line
            (geo, mat) => {
              let ins1 = new THREE.Mesh(geo, mat)
              ins1.scale.set(20, 20, 20)
              sceneInstance.add(ins1)

              cameraInstance.position.set(30, 35, 40)
              cameraInstance.lookAt(sceneInstance.position)

              const render = () => {
                requestAnimationFrame(render)
                oControl.update()
                rendererInstance.render(sceneInstance, cameraInstance)
              }

              render()
            }
          )

          return sceneInstance
        })

        document
          .getElementById('instance0')
          .appendChild(rendererInstance.domElement)

【问题讨论】：

欢迎来到 Stack Overflow。请花几分钟浏览帮助中心，特别是How do I ask a good question?。请务必在您的问题中包含所有支持代码和错误。另外，考虑使用snippets 创建一个Minimal, Complete, and Verifiable example。另外，请查看three.js examples，过滤“多个”。

标签： javascript three.js 3d render

【解决方案1】：

您需要为每个场景提供自己的相机和 OrbitControls……您可以在场景之间共享它们，但它们都会从同一个视点进行渲染，我怀疑这是否是您想要的。

WebGLRenderer 创建它自己的画布元素（称为 domElement），因此您必须将每个元素附加到您的 div 中，例如：div.appendChild(renderer.domElement)。

如果有很多 div，为每个 div 创建渲染器可能会占用大量资源...

在这种情况下，您可以为整个窗口（具有窗口大小的 div）制作 1 个渲染器并控制它仅在窗口的子 div 区域中渲染，但这需要更多的工作：

https://threejs.org/examples/webgl_multiple_elements.html

【讨论】：