Skip to content

Commit

Permalink
Day skybox example
Browse files Browse the repository at this point in the history
  • Loading branch information
jasonsturges committed Nov 2, 2024
1 parent 52ac5af commit 0844fc7
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 0 deletions.
1 change: 1 addition & 0 deletions examples/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,7 @@ <h2>Skybox</h2>

<div>
<ul>
<li><a href="/three-low-poly/skybox/day-skybox">Day Skybox</a></li>
<li><a href="/three-low-poly/skybox/twilight-skybox">Twilight Skybox</a></li>
</ul>
</div>
Expand Down
54 changes: 54 additions & 0 deletions examples/skybox/day-skybox.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Three Low Poly</title>
<style>
body {
margin: 0;
}
canvas {
display: block;
}
</style>
</head>
<body>
<script type="module">
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { DaySkybox } from "../../src/index.js";

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

const renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x000000);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
document.body.appendChild(renderer.domElement);

let daySkybox = new DaySkybox();
scene.add(daySkybox);

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(-5, 10, 5);
directionalLight.castShadow = true;
scene.add(directionalLight);

const hemisphereLight = new THREE.HemisphereLight(0xaaaaaa, 0x000000, 0.5);
hemisphereLight.position.set(0, 10, 0);
scene.add(hemisphereLight);

const controls = new OrbitControls(camera, renderer.domElement);
controls.update();

renderer.setAnimationLoop(() => {
renderer.render(scene, camera);
controls.update();
});
</script>
</body>
</html>

0 comments on commit 0844fc7

Please sign in to comment.