CODEWITHSUNDEEP
javascriptreactjsthree.js
D. Chin
D. Chin

Reputation: 41

ReferenceError: THREE is not defined

I am trying to import the SSAO shader from three (node modules) as such:

import {SSAOShader} from 'three/examples/js/shaders/SSAOShader'`

but I am getting:

ReferenceError: THREE is not defined
    ./node_modules/three/examples/js/shaders/SSAOShader.js
    node_modules/three/examples/js/shaders/SSAOShader.js:9
       6 |  * https://learnopengl.com/Advanced-Lighting/SSAO
       7 |  *
       8 |  */
    >  9 | THREE.SSAOShader = {
      10 |   defines: {
      11 |     "PERSPECTIVE_CAMERA": 1,
      12 |     "KERNEL_SIZE": 32

Linking to jsm files is no problem, but linking to the js files throws the error.

import React, { Component } from 'react';
import * as THREE from 'three';
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader';
import {OBJLoader} from 'three/examples/jsm/loaders/OBJLoader';
import {SSAOShader} from 'three/examples/js/shaders/SSAOShader';

Would like to be able to use this library without throwing the error.

Upvotes: 2

Views: 4358

Answers (1)

Mugen87
Mugen87

Reputation: 31026

import {SSAOShader} from 'three/examples/js/shaders/SSAOShader';

This line of code is not valid since SSAOShader is not a module. For now, you have to convert the file to a module by yourself. At a later point a module version of SSAOShader will be available in the jsm directory.

three.js R104

Upvotes: 2

Related Questions