当我动态加载Three.js 时,仍然找不到变量THREE。
我已经使用 create-react-app
创建了一个 React 项目,并将三个 js 文件复制到 public 文件夹中。结构如下所示:
src
public
├── js
│ └── threejs
│ ├── Detector.js
│ ├── OrbitControls.js
│ ├── postprocessing
│ │ ├── BloomPass.js
│ │ ├── ShaderPass.js
│ │ └── ...
│ ├── shaders
│ │ ├── BasicShader.js
│ │ ├── BleachBypassShader.js
│ │ ├── ....
│ ├── three.js
│ └── three.min.js
我创建了以下类,它动态加载 three.js 和属于 examples/js 文件夹的任何文件并触发 onLoaded 回调:
// Dependencies
import React from 'react';
export default class ThreeJsLoader 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;
}
}
脚本是这样使用的:
import React from 'react';
import ThreeJsLoader from './threejs_loader';
export default class PageBackground extends React.Component {
constructor(props) {
super(props);
this.background_ref = 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.background_ref.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>
<ThreeJsLoader onLoaded={ () => this.loadScene() } />
<div ref={this.background_ref} > </div>
</div>
);
}
}
我已经测试了代码并且它正确地加载了脚本。但是,我收到以下错误:
./src/page_background.jsx
Line 36: 'THREE' is not defined no-undef
Line 37: 'THREE' is not defined no-undef
最佳答案
不幸的是,我不得不弹出并禁用 EsLint,还禁用了不允许从外部源加载源的功能。我在某处读到这很危险,但我认为可以修改适当的文件系统权限限制。
关于javascript - 动态加载 threejs 到 create react app,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51257881/