Débuter en WebGL

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

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

<script type="modules" src="./app.js">

a présent plus de méssage d 'erreur
mais j 'obtiens rien sur l'écran

Nom : cc.jpg
Affichages : 58
Taille : 55,3 Ko

Nom : yy.jpg
Affichages : 57
Taille : 155,9 Ko

Merci

**mathieu** · 09/05/2025, 23h01

regarder le guide d'utilisation de three.js là :
https://threejs.org/manual/#en/installation

votre code html devrait plutot contenir cela :

Code html :

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

1
2
3
4
5
6
7
8
9
10
<script type="importmap">
{
	"imports" : {
		"three" : "https://cdn.jsdelivr.net/npm/three@0.176.0/build/three.module.js",
		"three/addons/" : "https://cdn.jsdelivr.net/npm/three@0.176.0/examples/jsm/"
	}
}
</script>
 
<script type="module" src="app.js"></script>

**labarre2002** · 09/05/2025, 23h20

@Mathieu bonsoir et merci pour ton méssage

Nom : aaaa.jpg
Affichages : 45
Taille : 87,4 Ko

Nom : qqq.jpg
Affichages : 44
Taille : 76,0 Ko

plus de méssage d 'érreur mais rien a l'écran alors que je suis censé avoir un cube

**mathieu** · 09/05/2025, 23h39

vous n'avez peut-être pas réglé l'affichage de tous les messages d'erreurs dans votre navigateur parce qu'avec firefox j'obtiens ce message :

"Blocage d’une requête multiorigine (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur file:///var/www/html/1/essai/dvlp/modules/app.js. Raison : la requête CORS n’utilise pas HTTP."

ce message indique que ça ne peux pas fonctionner en chargeant le fichier html directement dans le navigateur, vous devez le charger en passant par un serveur http.

**labarre2002** · 13/05/2025, 19h48

@mathieu

Bonsoir

et merci pour tes méssages .A présent j' ai placé mes fichiers sur un serveur

j' ai pris en compte tes apports a présent j'ai ce méssage

Nom : 11.jpg
Affichages : 16
Taille : 239,9 Ko

Nom : 11.jpg
Affichages : 16
Taille : 239,9 Ko

je comprends pas vraiment je suis le cours voici une capture du cours

Nom : 22.jpg
Affichages : 15
Taille : 427,4 Ko

**mathieu** · 13/05/2025, 21h11

je ne vois pas de message d'erreur sur la capture d'écran.
j'ai essayé le code que vous avez mis dans le 1er message et j'obtiens bien un cube qui tourne.