React-three with later versions of three.js

[eeh]

Hi,

What version of THREE is safe to use with react-three? At the moment, I am able to get react-three operational using THREE 0.79 but not 0.80+

With THREE 0.80 I consistently get error messages about not being able to resolve Vector3. Judging from the release notes, THREE now seems to implement es6 modules, so imports might need to be handled differently...

Anyways, thanks for a great lib!

/Emil

[Izzimach]

Yeah, I haven't tried recent versions of threejs, hopefully it's just a few require/import changes.

[rgrocha]

I've updated manually the dependency to three@0.83.0 and changed all imports (on my code and react-three) form:

import THREE from 'three'

to

import * as THREE from 'three'

and everything is working just right.

But! there are more changes from three@0.73.0 to 0.83.0. Take a look at

https://github.com/mrdoob/three.js/wiki/Migration-Guide

For example, most of the properties named in react-three/src/components/lights/CommonShadowmapProps.js are now (as in 0.83.0) properties in sub-properties (https://github.com/mrdoob/three.js/wiki/Migration-Guide#r73--r74)

I was lucky to not using any of them. Perhaps rewriting the transferTHREEObject3DPropsByName function in react-three/src/mixins/THREEObject3DMixin.js to support nested properties will do the job.

[Izzimach]

Hm, that's a problem. Seems like a possible route is to use macros (sweetjs or equivalent) to generate code for checking/copying object properties.

[Izzimach]

Update to use threejs v0.83 is on the dev branch, and passes tests. I switched over props based on the migration guide but there are currently no tests for shadows so I dunno if that stuff works. 😞