No results of my code pulled and working on the internet

Questions
1

I can’t get three.js to work on my machine
I’m coding on vsc with five server

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>test three.js</title>
		<!--insertion style css-->
		 <link rel="stylesheet" href="style.css">
		 <!--insertion three.js-->
		<script src="./libs/three.module.js" defer></script>
		<!--insertion jquery-->
		<script src="./libs/jquery-3.7.1.js" defer></script>
		<!--insertion app.js-->
		<script src="./app.js" defer></script>
	</head>
	<body>
	</body>
</html>

/// declaration element de base de three.js

// declaration scene
const scene = new THREE.Scene();
// declaration moteur de rendu
const renderer = new THREE.WebGLRenderer();
// declaration caméra
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

/// declaration mesh cylindre

//  declaration de la forme du mesh
const geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );
// declaration du materiel(texture) du mesh + couleur
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
// declaration du mesh et mise en commun des forme et du materiel
const cylinder = new THREE.Mesh( geometry, material );
// ajout du mesh dans la scene
scene.add( cylinder );

// moteur de rendu plein ecran
renderer.setSize( window.innerWidth, window.innerHeight );

// ajout dans la page via canvas html 5
document.body.appendChild( renderer.domElement );

// animation de rotation dans les trois dimensions
function animate() {
    requestAnimationFrame( animate );
    cylinder.rotation.x += 0.01;
    cylinder.rotation.y += 0.01;
    cylinder.rotation.z += 0.01;

    renderer.render( scene, camera );

    requestAnimationFrame( animate );
}

animate();
2

Hi @Le_Belch …

Please view this link…

https://jrlazz.eu5.org/anim/Le_Belch.html

I have inserted the Three.js import … added camera position and cut the second requestAnimationFrame( animate ); in the animate function.

1 Like