Component with 3D/Threejs canvas tag always rendering last

Get Help and Help Others
1

Hi,

Noob question about loading…

I am loading a component with a gltf model and it always renders the canvas tag last. I can put other content inside the component that will render in the right order, but the canvas tag always renders last.

I suspect I just need to use a wait type of command, but I am not finding any examples that I can lean on.

Can someone point me in the right direction for forcing my model component to load and canvas tag render before loading the rest of the page?

Thanks in advance!
-LH

2

Might help to provide some code examples. The way you stated it sounds like this is a react rendering issue. How is the data being added to the canvas? Thee way you described it sounds like you component runs the first render and then it does an update to draw the canvas and add it to the DOM.

4 

import * as THREE from 'three'

import { MetaTags } from '@redwoodjs/web'

const Threejsmodel = () => {
  var SW = window.innerWidth,
    SH = window.innerHeight
  var scene = new THREE.Scene()

  var camera = new THREE.PerspectiveCamera(75, SW / SH, 0.1, 1000) // fov, aspect, near/far clip planes
  var renderer = new THREE.WebGLRenderer()

  renderer.setSize(SW, SH)
  document.body.appendChild(renderer.domElement)

  var geometry = new THREE.BoxGeometry(1, 1, 1)
  var material = new THREE.MeshLambertMaterial({ color: 0x00ff00 })
  var cube = new THREE.Mesh(geometry, material)
  scene.add(cube)
  camera.position.z = 5

  var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5)
  directionalLight.position.set(0, 0, 5)
  scene.add(directionalLight)

  function render() {
    renderer.render(scene, camera)
    requestAnimationFrame(render)
    cube.rotation.x += 0.005
    cube.rotation.y += 0.005
  }

  render()
  return null
}

const HomePage = () => {
  return (
    <>
      <MetaTags title="Home" description="Home page" />
      <header>
        <h1>HOME</h1>
        <nav>
          <ul>
            <li>Home</li>
          </ul>
        </nav>
      </header>
      <main>
        This is the main section
        <p>
          <div id="above"> this is above the model</div>
          <div>
            <Threejsmodel />
          </div>
          <div id="below"> this is below below</div>
        </p>
      </main>
    </>
  )
}

export default HomePage