Estoy tratando de renderizar el lienzo de tres js en mi navegador, pero no se renderiza. Estoy usando vite.js para el servidor en vivo. El camino y todo es correcto. Sin errores. Pero todavía no funcionará. Por favor, dé consejos sobre esto.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="stylesheet" type="text/css" href="./style.css"> <link rel="icon" type="image/svg+xml" href="favicon.svg" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Vite App</title> </head> <body> <div id="app"></div> <script type="module" src="/main.js"> </script> </body> </html>JS
import * as THREE from "https://unpkg.com/three@0.137.5/build/three.module.js" const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000) const renderer = new THREE.WebGLRenderer( ); console.log(scene); console.log(camera); console.log(renderer); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement);Debe representar al menos un solo cuadro para ver un resultado en su página HTML. Agregue la siguiente línea al final de su lista de códigos:
renderer.render( scene, camera );