在多个 div 上渲染多个场景

Question

我使用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)

Answer 1

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

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

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

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

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

在多个 div 上渲染多个场景

Render multiple scene on multiple div

javascript

3d

render

three.js