I'm having trouble rendering a cube using Three.js. I followed the tutorial on tutorialspoint exactly, but all I see is a blank screen.
Even though I tried rendering the code, I can't seem to get anything to display on the screen. The code looks fine to me, but for some reason, I'm getting a blank screen. I attempted adding semicolons to the script code, but that didn't solve the issue.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Intro to Three JS</title>
<style>
* {
margin:0;
padding:0;
box-sizing:border-box;
font-family: "Poppins", sans-serif;
}
html, body {
height:100vh;
width:100vw;
}
#threejs-container {
position:block;
width:100%;
height:100%;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>
<div id="threejs-container">
<!--The rendered output will appear here-->
</div>
<script type="module">
//JavaScript code goes here
//Sizes
const width = window.innerWidth
const height = window.innerHeight
//Scene
const scene = new THREE.Scene()
scene.background = new THREE.Color(0x262626)
//Camera
const camera = new PerspectiveCamera(45, width/height, 0.1, 100)
camera.position.set(0,0,10)
//Creating a Cube
const geometry = new THREE.BoxGeometry(2,2,2)
const material = new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe:true})
const cube = new THREE.Mesh(geometry, material)
scene.add(cube)
//Renderer
const renderer = new THREE.WebGL1Renderer()
renderer.setSize(width,height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
//Render the scene
const container = document.querySelector('#threejs-container')
container.append(renderer.domElement)
renderer.render(scene,camera)
</script>
</body>
</html>
Struggling with rendering the cube.