Breaking News: Grepper is joining You.com. Read the official announcement!

Why my import * as THREE from three didn’t work?

ap_Cooperative_dev answered on February 16, 2022 Popularity 1/10 Helpfulness 1/10

answer Why my import * as THREE from *three* didn’t work?

Why my import * as THREE from three didn’t work?

Comment

If you want to use es6 modules, and are using nodejs, and express, you don’t need to serve the whole node_modules folder with all it’s subfolders just to get three.js.

One option you have,
Is, you can add a static path to your server code for the specific file or folder you want to serve.
eg,

app.use('/build/three.module.js', express.static(path.join(__dirname, '../../node_modules/three/build/three.module.js')));

Then in your JavaScript,

import * as THREE from '/build/three.module.js';

Now when your browser asks for /build/three.module.js , the server will know what to give it back.

if you write
import * as THREE from 'three';

Your html client doesn’t know what three is, unless you do all kinds of things before hand, for example, try webpack, or many other bundlers. You will need to tell webpack what three is, so that it can present it in some way that the browser will then understand what three is.

See my boilerplate for an example, where I create static routes to specific library files and/or folders, rather than use bundlers. (but only if you are interested in using typescript)


GitHub

Sean-Bradley/Three.js-TypeScript-Boilerplate 38
Three.js TypeScript Boilerplate. Contribute to Sean-Bradley/Three.js-TypeScript-Boilerplate development by creating an account on GitHub.

git clone https://github.com/Sean-Bradley/Three.js-TypeScript-Boilerplate.git
cd Three.js-TypeScript-Boilerplate
npm install -g typescript
npm install
npm run dev
Open in visual studio code and/or visit http://127.0.0.1:3000/ 9

use

git checkout statsgui

If you want to see a version of the boilerplate also linking stats.js and dat.gui panels. And see how I explicitly reference these in the server code without needing to serve the whole node_modules folder, or copy any of the threejs files to somewhere in the static root folder served by nodejs, or use webpack, rollup, et al.

The bottom line, is that your browser doesn’t know what three is unless you tell it.

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: discourse.threejs.org

Tags: import javascript

Link to this answer
Share Copy Link

Contributed on Feb 16 2022

ap_Cooperative_dev

0 Answers Avg Quality 2/10

Why my import * as THREE from three didn’t work?

Contents

More Related Answers

Why my import * as THREE from three didn’t work?

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.