Débuter en WebGL

**labarre2002** · 09/05/2025, 20h23

Bonsoir

J' ai pris ce cour https://www.awwwards.com/academy/cou...l-and-barba-js

je dois réaliser une page basique

mon

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<body>
    <div id="container">
 
    </div>
 
    <script src="app.js"></script>
</body>
</html>

puis

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
import * as THREE from 'three';
 
const width = window.innerWidth, height = window.innerHeight;
 
// init
 
const camera = new THREE.PerspectiveCamera( 70, width / height, 0.01, 10 );
camera.position.z = 1;
 
const scene = new THREE.Scene();
 
const geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
const material = new THREE.MeshNormalMaterial();
 
const mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
 
const renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( width, height );
renderer.setAnimationLoop( animate );
let container=document.getElementById('container');
container.appendChild( renderer.domElement );
 
// animation
 
function animate( time ) {
 
	mesh.rotation.x = time / 2000;
	mesh.rotation.y = time / 1000;
 
	renderer.render( scene, camera );
 
}

le soucis est qu 'il ne passe rien j ai bien revu le code mais pourtant rien ne marche

puis avoir une piste pour trouver ce qui cloche ?

dans ma console j ai "Uncaught SyntaxError: Cannot use import statement outside a modul"
j'ai reproduit les étapes du cour

j'ai modifier le code JS en ajoutant

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part