Hey there i am new to threejs and im trying to literally just show a sphere and it isnt working. I just wanted to test it and see if i got something going and it doesnt work? it is due to the three import?
the html code is here
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html, body {
margin: 0;
width: 100%;
height: 100%;
}
</style>
<script type="module" src="src/index.js"></script>
</head>
<body>
</body>
The Javascript code is here
import { Scene, PerspectiveCamera, WebGLRenderer, Color, ACESFilmicToneMapping, sRGBEncoding,
Mesh, SphereGeometry, MeshBasicMaterial } from 'https://cdn.skypack.dev/three@0.137';
const scene = new Scene();
scene.background = new Color("#FFEECC");
const camera = new PerspectiveCamera(45, innerWidth / innerHeight, 0.1, 1000);
//camera.position.set(-17,31,33);
camera.position.set(0, 0, 50);
const renderer = new WebGLRenderer({antialias: true })
renderer.setSize(InnerWidth, innerHeight);
renderer.toneMapping = ACESFilmicToneMapping;
renderer.outputEncoding = sRGBEncoding;
renderer.physicallyCorrectLights = true;
document.body.appendChild(renderer.domElement);
let sphereMesh = new Mesh(
new SphereGeometry(5, 10, 10),
new MeshBasicMaterial({ color: 0xff0000 })
);
scene.add(sphereMesh);
(async function() {
renderer.setAnimationLoop(() => {
renderer.render(scene, camera);
});
})();