Three.js display nothing-CodePudding

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 !

CodePudding user response：

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/[email protected]/build/three.min.js"></script>