I just started learning three.js today but none of my code is properly rendering when opened in the browser. All that will show up is a blank white screen, and these errors:
Uncaught SyntaxError: import declarations may only appear at top level of a module
which is refering to
import * as THREE from 'three', which is at the top of the module. I also got
Uncaught TypeError: The specifier “three” was a bare specifier, but was not remapped to anything. Relative module specifiers must start with “./”, “../” or “/”
also about the same line. I have no idea how to fix this.
I’ve tried opening the document in both firefox and brave, neither of which worked, but other websites with three.js load fine. In firefox, the code works fine in jsfiddle.
here’s the jsfiddle, the code should be correct since it’s just copied from the docs.
does anyone know how to fix these errors??
The reason is that import statements are only understood by the browser if you have your code on a server. In Visual Studio code there is a live server. Just one click in visual studio code and you see your apps running. The live server is an addon that you have to install separately, but it is easy to find in the module library in visual studio code.
In addition, your script must be defined as a module when you call it in index.html
<script type="module" src="./src/index.js"></script>
I’m already using live server, and
type="module" didn’t work either. The error I have now is:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file
three.js is available as an old fashion script for integration into ES5 code or as a modern module variant and I suspect that’s where the problem lies. As far as I can see, you are trying to integrate the three.js script into a module. That will not do.
If you have downloaded threejs you will find a folder in the threejs directory called build and the script and module variants are in there.
By default I create a folder called resources and in it I make a folder called libs. I then put the threejs folder in this.
Since I put my code in a folder that I call src that is next to the resource folder, I have to integrate threejs like this
import * as THREE from “…/resources/libs/three/build/three.module.js”;
Here is a repository from me to download so you can see it
I quite like keeping the threejs folder structure. If you do that, you have to adjust the path for other modules. And one of the modules that is probably used the most is the OrbitControls module to be able to rotate, zoom and pan
You can also see that in my example.
There where you can see
from ../../../build/ three.module.js
in line 9 usually there is only three.js
Something like that can be very difficult at the beginning