How to import 'MeshBasicNodeMaterial()'?

Questions
, ,
1

I’m trying to use the following line in my code:

`const atmosphereMaterial = new THREE.MeshBasicNodeMaterial( { side: THREE.BackSide, transparent: true } );`

But doing so raises the error in the browser:

Uncaught TypeError: THREE.MeshBasicNodeMaterial is not a constructor

Thus I tried to import it like so:

import { MeshBasicNodeMaterial } from 'three';

But it still give me the following error:

Uncaught SyntaxError: The requested module ‘three’ does not provide an export named ‘MeshBasicNodeMaterial’

My import is like this:

import * as THREE from 'three';
import { OrbitControls } from '/static/web_dev/three.js-master/examples/jsm/controls/OrbitControls.js';

import { VRButton } from '/static/web_dev/three.js-master/examples/jsm/webxr/VRButton.js';

import { MeshBasicMaterial } from 'three';
import { MeshBasicNodeMaterial } from 'three';

what am I supposed to do ?

2

Node users have to use a different import. Try to import from three/webgpu instead of three.

TSL syntax is imported via three/tsl.

Developers who import directly over a CDN should use an updated import map. E.g.:

<script type="importmap">
	{
		"imports": {
			"three": "https://unpkg.com/three/build/three.webgpu.js",
			"three/webgpu": "https://unpkg.com/three/build/three.webgpu.js",
			"three/tsl": "https://unpkg.com/three/build/three.tsl.js",
			"three/addons/": "https://unpkg.com/three/examples/jsm/"
		}
	}
</script>
1 Like