I try three.js for the first time and I don't understand why I can see color and my torus.
I try turn alpha: true in my render
I try change camera position z.
I try to change color.
I try to console.log something and it's working.
I try change window size.
//Création de la scène
let scene = new THREE.Scene();
//Création de la caméra (champ de vu, grandeur de la fenetre, ?, distance de rendu)
let camera = new THREE.PerspectiveCamera(35, window.innerWidth/window.innerHeight, 0.1, 3000);
//Définition de la position de la caméra
camera.position.z = 100;
scene.add(camera);
//Création le rendu
let rendu = new THREE.WebGLRenderer({ alpha: true });
//Définition de la taille du rendu
rendu.setSize(window.innerWidth, window.innerHeight)
//Défnition de la couleur du fond
rendu.setClearColor(0xff7f50, 0);
//Affichage du rendu dans notre page html
document.body.appendChild(rendu.domElement);
//Création du groupe
let forme = new THREE.Group();
//Création d'un torus (rayon, grosseur du tube, nombre de segment, nombre de segment le long du tube)
let geometrie = new THREE.TorusKnotGeometry(10,3,100,16)
//Création du matériau
let materiel = new THREE.MeshNormalMaterial({
transparent: true,
opacity: 1,
wireframe: true,
wireframeLinewidth: 5,
});
//Ajout du torus et de son matériau dans le groupe créer précedement
forme.add(new THREE.Mesh(geometrie,materiel));
scene.add(forme);<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>ThreeJS</title>
<style>
body{margin: 0;}
canvas{width: 100%;height: 100%;}
</style>
</head>
<body>
<script src="../Projet/lib/three.js"></script>
<script src="../Projet/script.js"></script>
</body>
</html>Thanks for your help !
You actually don't render your scene. Try it like so:
//Création de la scène
let scene = new THREE.Scene();
//Création de la caméra (champ de vu, grandeur de la fenetre, ?, distance de rendu)
let camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 3000);
//Définition de la position de la caméra
camera.position.z = 100;
scene.add(camera);
//Création le rendu
let rendu = new THREE.WebGLRenderer({antialias: true});
//Définition de la taille du rendu
rendu.setSize(window.innerWidth, window.innerHeight)
//Défnition de la couleur du fond
rendu.setClearColor(0xff7f50, 0);
//Affichage du rendu dans notre page html
document.body.appendChild(rendu.domElement);
//Création du groupe
let forme = new THREE.Group();
//Création d'un torus (rayon, grosseur du tube, nombre de segment, nombre de segment le long du tube)
let geometrie = new THREE.TorusKnotGeometry(10, 3, 100, 16)
//Création du matériau
let materiel = new THREE.MeshNormalMaterial({
transparent: true,
opacity: 1,
wireframe: true,
wireframeLinewidth: 5,
});
//Ajout du torus et de son matériau dans le groupe créer précedement
forme.add(new THREE.Mesh(geometrie, materiel));
scene.add(forme);
animate();
function animate() {
requestAnimationFrame(animate);
rendu.render(scene, camera);
}body {
margin: 0;
}<script src="https://cdn.jsdelivr.net/npm/three@0.133.1/build/three.min.js"></script>