Beginning on WebGL

Questions
1

Hi everyone

I buy this course and I begin on webGL
Creating a simple portfolio website with WebGL and Barba.js

ht
ht709×515 61.5 KB

I create this page and I put this code I get on the github

1
1837×778 74.4 KB

but nothing append on the screen I get this message on the console

“Uncaught SyntaxError: Cannot use import statement outside a module”

can I have some idea about how to fix this ?
thanks by advance.

2

<script src="app.js">
to
<script type="module" src="app.js">
or
<script type="module" src="./app.js">

1 Like
3

I thanks for your message now I have this

error
error932×122 53.3 KB

4

Need for local server like xampp, open server or load to github.

image
image872×543 141 KB

5

Thanks for your messsage I install nodejs now but I get this

yy
yy1141×738 65.4 KB

cc
cc1155×719 42.3 KB

now no error but nothing appear on the page I suppose to have a cube

6

send project files here for testing

7

ok
app.js (830 Bytes)
index.html (423 Bytes)
style.css (197 Bytes)

8
  1. Change type="modules" to type="module"
  2. Into app.js set path for three.js file import * as THREE from 'three';
    my path is import * as THREE from './three_172.js';

Download: www.zip (260.9 KB)

image
image279×198 2.47 KB

1 Like
9

thanks for the message I will try tomorow

10

Hi Chaser_Code

3
31146×793 50.9 KB

1
1777×559 93.1 KB

2
2712×608 73.5 KB

11

Run it on server, nor like this
image
Delete this line, because three_172.js already have path to three.core.js:
image

Another solution is leave path in app.js: import * as THREE from 'three';
and define path at index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div id="container"></div>
<script type="importmap">
{
"imports":{
"three":"./three_172.js",
"three/addons/":"./jsm/"
}
}
</script>
<script type="module" src="./app.js"></script>
</body>
</html>
13

Hi @pat66 …

I have been working with Three.js pages in a different way for a long time.

If you want to follow my advice:

Create a directory named 3D in C:
Place the zipped contents in myserver.zip in the 3D directory.
Run quick.bat and open a web browser by typing 127.0.0.1 and pressing ENTER.
Click on the web line and click on hello.html

Here goes the zip file…
myserver.zip (3.2 MB)

You will get these twuo screens…

screen1
screen1441×338 9.45 KB

screen2
screen2507×261 8.44 KB

14

Hi
thanks for your message I try now I have this message

error
error932×328 71.6 KB

this is a capture on the course :slight_smile:

22
221191×736 153 KB

don’t understand this message error

15

You probably need a:

<div id="container"> </div>

inside the <body> of your html.

1 Like
16

html
html807×304 52.5 KB

17

I’m using a 32 bits operating system is it a problem to run webgl website

18

Hi @pat66 …
Searching in Google:
No, it’s not inherently problematic to run a WebGL website with Three.js on a 32-bit machine. WebGL and Three.js are designed to be platform-independent and can run on a wide variety of hardware, including 32-bit systems

19

I ask because I don t understand why I have so many problem with this small code

20

Hi everyone

my problem is solved I found what is going wrong I put

document.querySelector when I suposse to put document.getElementById.

thanks a lot for answers

1 Like