Intento three.js por primera vez y no entiendo por qué puedo ver el color y mi toroide.
Intento convertir alfa: verdadero en mi render
Intento cambiar la posición de la cámara z.
Trato de cambiar de color.
Intento consolar. registrar algo y funciona.
Intento cambiar el tamaño de la ventana.
//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>Gracias por tu ayuda !
En realidad, no renderizas tu escena. Pruébalo así:
//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>