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 : 82
Taille : 55,3 Ko

Nom : yy.jpg
Affichages : 88
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/[email protected]/build/three.module.js",
		"three/addons/" : "https://cdn.jsdelivr.net/npm/[email protected]/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 : 59
Taille : 87,4 Ko

Nom : qqq.jpg
Affichages : 59
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 : 32
Taille : 239,9 Ko

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

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

Nom : 22.jpg
Affichages : 31
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.