three.js dev template - module

HTML

<script type="importmap">
	{
		"imports": {
			"three": "https://unpkg.com/three@0.163/build/three.module.js",
      "three/addons/": "https://unpkg.com/three@0.163/examples/jsm/"
		}
	}
</script>
<canvas class="webgl"></canvas>

CSS

body {
	margin: 0px;
}

JavaScript

import * as THREE from 'three';

// Scene
const scene = new THREE.Scene();

// Create our sphere
const geometry = new THREE.SphereGeometry(3, 64, 64); // radius, segment, segment
const material = new THREE.MeshStandardMaterial({
  color: "#00ff83",
});
const mesh = new THREE.Mesh(geometry, material);

scene.add(mesh);

// Light
const light = new THREE.PointLight(0xffffff, 100, 100);
light.position.set(0, 10, 10);
scene.add(light);

// Adding the camera
const camera = new THREE.PerspectiveCamera(45, 800 / 600); // field of view, aspect ratio of 800x600
// Sphere and camera are at the same position. So, move back the camera a bit
camera.position.z = 20;
scene.add(camera);

// Renderer
const canvas = document.querySelector(".webgl");
const renderer = new THREE.WebGLRenderer({ canvas });

// Define how big out canvas is
renderer.setSize(800, 600);
renderer.render(scene, camera);