Skip to content

Instantly share code, notes, and snippets.

@haehn

haehn/template.html

Created December 8, 2023 14:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save haehn/be79ce6456395666d6be770abb3d3c19 to your computer and use it in GitHub Desktop.
Save haehn/be79ce6456395666d6be770abb3d3c19 to your computer and use it in GitHub Desktop.
Download ZIP
SkySphere Template
Raw
template.html
<html>
<head>
<style>
html, body {
background-color:#000;
margin: 0;
padding: 0;
height: 100%;
overflow: hidden !important;
}
</style>
<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@latest/build/three.module.js",
"three/addons/": "https://unpkg.com/three@latest/examples/jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
var scene, camera, renderer, ambientLight, light, controls, sphere;
window.onload = function() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set( 0, 0, 500);
renderer = new THREE.WebGLRenderer({ });
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
ambientLight = new THREE.AmbientLight(0x000000);
scene.add( ambientLight );
light = new THREE.DirectionalLight( 0xffffff, 5.0 );
light.position.set( 10, 100, 10 );
scene.add( light );
// TODO
controls = new OrbitControls( camera, renderer.domElement );
animate();
};
function animate() {
requestAnimationFrame( animate );
controls.update();
renderer.render( scene, camera );
};
</script>
</head>
<body>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment