How to make a Plain Three.js Canvas span across the view height and width of a webpage using React?

Question

I am trying to modify the code from this example:

This is the code:

import React, { Component } from 'react'
import * as THREE from 'three'

class Scene extends Component {
constructor(props) {
super(props)

this.start = this.start.bind(this)
this.stop = this.stop.bind(this)
this.animate = this.animate.bind(this)
}

componentDidMount() {
const width = this.mount.clientWidth
const height = this.mount.clientHeight

const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(
  75,
  width / height,
  0.1,
  1000
)
const renderer = new THREE.WebGLRenderer({ antialias: true })
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial({ color: '#433F81' })
const cube = new THREE.Mesh(geometry, material)

camera.position.z = 4
scene.add(cube)
renderer.setClearColor('#000000')
renderer.setSize(width, height)

this.scene = scene
this.camera = camera
this.renderer = renderer
this.material = material
this.cube = cube

this.mount.appendChild(this.renderer.domElement)
this.start()
}

componentWillUnmount() {
this.stop()
this.mount.removeChild(this.renderer.domElement)
}

start() {
if (!this.frameId) {
  this.frameId = requestAnimationFrame(this.animate)
}
}

stop() {
  cancelAnimationFrame(this.frameId)
}

animate() {
this.cube.rotation.x += 0.01
this.cube.rotation.y += 0.01

this.renderScene()
this.frameId = window.requestAnimationFrame(this.animate)
}

renderScene() {
  this.renderer.render(this.scene, this.camera)
}

render() {
return (
  <div
    style={{ width: '400px', height: '400px' }}
    ref={(mount) => { this.mount = mount }}
  />
)
}
}

export default Scene

I am trying to make the canvas span to the view height and view width of the page so it can be used for the background

so far I've tried to use the npm module

npm install react-native-responsive-view-port --save

and make the amendments:

  render() {
    return (
      <div
        style={{ width: vh(100), height: vw(100), }}
        ref={(mount) => { this.mount = mount }}
      />
    )
  }

As react seems to not accept percentages, I am however now getting the error:

Module not found: Can't resolve 'react-native-expo-viewport-units' in 'C:\Users\Gabriel\Desktop\grid_site\src\pages'

Does anyone have a solution to help me make the Three Js canvas responsively span the width and height of the browser window?

score 1 · Accepted Answer · answered Apr 06 '21 at 21:56

You should be able to use those same units and measurements, but using the native CSS instead of a JavaScript function, in the style prop:

vh(100) turns into 100vh, vw(100) to 100vw.

One reason the package may not be available is perhaps because it is meant to be used with React Native.

How to make a Plain Three.js Canvas span across the view height and width of a webpage using React?

1 Answers1