search

firtoz / react-three-renderer

Render into a three.js canvas using React.
https://toxicfork.github.com/react-three-renderer-example/
MIT License
1.49k stars 155 forks source link

Using OrbitControls without react ref #190

Closed benwinding closed 6 years ago

benwinding commented 6 years ago

Background We want to use the OrbitControls with this library, but we're having trouble not using the ref function in React.

Example Src: https://github.com/benwinding/Test-react-three-renderer/ Example Demo: https://benwinding.github.io/Test-react-three-renderer

Problem We need the OrbitControls to get a reference to the PerspectiveCamera, without using the ref feature in React.

React complains: Refs Must Have Owner Warning

Solution 1? Is it possible to use both use new THREE....() components inside of react-three-renderer components?

Say add the camera new THREE.PerspectiveCamera() to the <scene></scene>

Solution 2? Is it possible to add a THREE.PerspectiveCamera() object to the <perspectiveCamera /> component?

Solution 3? Is it possible to suppress the ref warning?

benwinding commented 6 years ago

So it turns out using refs is ok, our problem was that we had multiple copies of React being referenced, when having separate npm modules.

Here's our directory structure, the two npm modules react-app and react-mycomponent. During local development we were using npm link, to use the local version of the module. This unfortunately also uses the local versions "node_modules"

This means all import statements import React from 'react'; were importing from the react-mycomponent/node_modules folder.

In order to prevent this, we changed all references:

import React from 'react';

to

var React = require('react');