Unable to integrate create-react-app with Three.js

Question

I'm facing this issue when I try to execute the three.js with react. It throws THREE is not defined no-undef and it executes well and fine if I'm not using the create-react-app. However, it throws this error with create-react-app.

have added my 3D scene in the create-react-app which throws an error THREE is not defined no-undef. github repo

Inside the public/ index.html

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link href="%PUBLIC_URL%/css/font-awesome.min.css" rel="stylesheet">
    <link href="%PUBLIC_URL%/css/style.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.js"></script>

inside the src/webVR.js I'm importing this way along with the other loaders where it throws an error saying THREE undefined

import React from 'react';
import DDSLoader from './utils/DDSLoader';
import MTLLoader from './utils/MTLLoader';
import OBJLoader from './utils/OBJLoader';

@AbdennourTOUMI have a look at the code this is how im calling the threejs inside my working JS file. also attached my github repo — andy ram
– andy ram, Commented Nov 18, 2017 at 10:20
You should install three with npm and import it, not use as a global script tag. Threejs itself and the three ecosystem are low quality, and you will need to find appropriate npm packages (or make them) for things not in core, such as npmjs.com/package/three-obj-loader — Andy Ray
– Andy Ray, Commented Nov 18, 2017 at 20:48
@AndyRay I tried installing three npm and importing it. However, it throws the same error THREE undefined, is there anything I have to do with the file structure in my repo? github.com/priyakrishnadev/webglapp — andy ram
– andy ram, Commented Nov 19, 2017 at 3:40

Dharman · Accepted Answer · 2020-07-21 17:48:34Z

1

The three.js npm module contains everything by default. You can import the same with the following.

import React, { useEffect } from 'react'
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { GUI } from 'three/examples/jsm/libs/dat.gui.module';
import Stats from 'three/examples/jsm/libs/stats.module';
import SoldierAnim from './../../assets/models/Soldier.glb';

If you are working with React hooks, here is an example of a loaded 3D model from three.js with React.js.

https://github.com/sarat9/react-threejs-sample/blob/master/src/animations/SoldierMachineAnimation/index.jsx

edited Jul 21, 2020 at 17:48

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Jul 21, 2020 at 17:43

Sarat Chandra

6,17838 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alexander Solovyev · Accepted Answer · 2019-04-21 18:59:18Z

To import Three.js correctly into a create-react-app you should use "three" npm package https://www.npmjs.com/package/three

Here is a code snippet of how THREE.OrbitControls might be imported along with Three.js

import * as THREE from 'three';


window.THREE = THREE; // THREE.OrbitControls expects THREE to be a global object
require('three/examples/js/controls/OrbitControls');


export default {...THREE, OrbitControls: window.THREE.OrbitControls};

then you could import THREE in your React app like this:

import React, { Component } from "react";
import ReactDOM from "react-dom";
import THREE from "./three";


class App extends Component {
    componentDidMount() {


        // BASIC THREE.JS THINGS: SCENE, CAMERA, RENDERER
        // Three.js Creating a scene tutorial
        // https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(
            75,
            window.innerWidth / window.innerHeight,
            0.1,
            1000
        );
        camera.position.z = 5;

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);



        // MOUNT INSIDE OF REACT
        this.mount.appendChild(renderer.domElement); // mount a scene inside of React using a ref



        // CAMERA CONTROLS
        // https://threejs.org/docs/index.html#examples/controls/OrbitControls
        this.controls = new THREE.OrbitControls(camera);



        // ADD CUBE AND LIGHTS
        // https://threejs.org/docs/index.html#api/en/geometries/BoxGeometry
        // https://threejs.org/docs/scenes/geometry-browser.html#BoxGeometry
        var geometry = new THREE.BoxGeometry(2, 2, 2);
        var material = new THREE.MeshPhongMaterial( {
            color: 0x156289,
            emissive: 0x072534,
            side: THREE.DoubleSide,
            flatShading: true
        } );
        var cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        var lights = [];
        lights[ 0 ] = new THREE.PointLight( 0xffffff, 1, 0 );
        lights[ 1 ] = new THREE.PointLight( 0xffffff, 1, 0 );
        lights[ 2 ] = new THREE.PointLight( 0xffffff, 1, 0 );

        lights[ 0 ].position.set( 0, 200, 0 );
        lights[ 1 ].position.set( 100, 200, 100 );
        lights[ 2 ].position.set( - 100, - 200, - 100 );

        scene.add( lights[ 0 ] );
        scene.add( lights[ 1 ] );
        scene.add( lights[ 2 ] );



        // SCALE ON RESIZE

        // Check "How can scene scale be preserved on resize?" section of Three.js FAQ
        // https://threejs.org/docs/index.html#manual/en/introduction/FAQ

        // code below is taken from Three.js fiddle
        // http://jsfiddle.net/Q4Jpu/

        // remember these initial values
        var tanFOV = Math.tan( ( ( Math.PI / 180 ) * camera.fov / 2 ) );
        var windowHeight = window.innerHeight;

        window.addEventListener( 'resize', onWindowResize, false );

        function onWindowResize( event ) {

            camera.aspect = window.innerWidth / window.innerHeight;

            // adjust the FOV
            camera.fov = ( 360 / Math.PI ) * Math.atan( tanFOV * ( window.innerHeight / windowHeight ) );

            camera.updateProjectionMatrix();
            camera.lookAt( scene.position );

            renderer.setSize( window.innerWidth, window.innerHeight );
            renderer.render( scene, camera );

        }



        // ANIMATE THE SCENE
        var animate = function() {
            requestAnimationFrame(animate);

            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;

            renderer.render(scene, camera);
        };

        animate();
    }
    render() {
        return <div ref={ref => (this.mount = ref)} />;
    }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Full code in CodeSandBox: https://codesandbox.io/s/github/supromikali/react-three-demo

Live demo: https://31yp61zxq6.codesandbox.io/

Preview:

Prashant Maurya · Accepted Answer · 2023-07-16 16:46:44Z

0

Here you have to install 3Js package to use react3 fibre Here is the cmd -> npm install three

answered Jul 16, 2023 at 16:46

Prashant Maurya

1

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Unable to integrate create-react-app with Three.js

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related