When I am dynamically loading Three.js, the variable THREE is not found.
I have created a React project using create-react-app and copied the three js file into the public folder. Here's the directory structure:
src
public
├── js
│ └── threejs
│ ├── Detector.js
│ ├── OrbitControls.js
│ ├── postprocessing
│ │ ├── BloomPass.js
│ │ ├── ShaderPass.js
│ │ └── ...
│ ├── shaders
│ │ ├── BasicShader.js
│ │ ├── BleachBypassShader.js
│ │ ├── ....
│ ├── three.js
│ └── three.min.js
I have created a class that loads three.js as well as any files that are part of the examples/js folder dynamically. It also triggers the onLoaded callback when done:
// Dependencies
import React from 'react';
export default class DynamicThreeJsLoader extends React.Component {
constructor(props) {
super(props);
this.unloaded = [
'/js/threejs/three.js',
'/js/threejs/OrbitControls.js'
];
this.loaded = [];
}
loadScript(address) {
let script = document.createElement('script');
script.setAttribute('type', 'text/javascript'); // optional
script.setAttribute('src', address);
script.onload = () => {
this.loaded.push(address);
this.checkLoaded();
};
document.getElementsByTagName('head')[0].appendChild(script);
}
checkLoaded() {
if(this.loaded.length >= this.unloaded.length) {
if(this.props.onLoaded) {
this.props.onLoaded();
}
}
}
componentDidMount() {
while(true) {
let script = this.unloaded.shift();
let script_path = `${process.env.PUBLIC_URL}${script}`;
if(script) {
this.loadScript(script_path);
}
else {
break;
}
}
}
render() {
return null;
}
}
This is how the script is used:
import React from 'react';
import DynamicThreeJsLoader from './dynamic_threejs_loader';
export default class PageBackground extends React.Component {
constructor(props) {
super(props);
this.backgroundRef = React.createRef();
}
loadScene() {
let scene = new THREE.Scene();
scene.background = new THREE.Color( 0xcccccc );
let renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
this.backgroundRef.current.appendChild( renderer.domElement );
let camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 400, 200, 0 );
// controls
let controls = new THREE.OrbitControls( camera, renderer.domElement );
}
render() {
return (
<div>
<DynamicThreeJsLoader onLoaded={ () => this.loadScene() } />
<div ref={this.backgroundRef} ></div>
</div>
);
}
}
I have tested the code and it successfully loads the scripts. However, I encounter the following error:
./src/page_background.jsx
Line 36: 'THREE' is not defined no-undef
Line 37: 'THREE' is not defined no-undef