Skip to content

Commit

Permalink
Example abstractions
Browse files Browse the repository at this point in the history
  • Loading branch information
jasonsturges committed Nov 5, 2024
1 parent 668400d commit 82a7293
Show file tree
Hide file tree
Showing 40 changed files with 114 additions and 1,122 deletions.
37 changes: 5 additions & 32 deletions examples/models/architecture/bifurcated-staircase.html
Original file line number Diff line number Diff line change
Expand Up @@ -16,45 +16,18 @@
<body>
<script type="module">
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { BifurcatedStaircaseGeometry } from "../../../src/index.js";
import { createOrbitScene } from "../../utils/orbitScene.js";

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.y = 5;
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);
const { scene, camera, controls } = createOrbitScene();
camera.position.set(0, 1, 2);
controls.target.set(0, 1, 0);

const bifurcatedStaircaseGeometry = new BifurcatedStaircaseGeometry(2, 0.3, 0.5, 5, 5, Math.PI / 4);
const material = new THREE.MeshStandardMaterial({ color: 0x8b4513, side: THREE.DoubleSide });
const bifurcatedStaircaseMesh = new THREE.Mesh(bifurcatedStaircaseGeometry, material);
bifurcatedStaircaseMesh.rotation.y = Math.PI;
scene.add(bifurcatedStaircaseMesh);

const ambientLight = new THREE.AmbientLight(0x404040, 0.5);
scene.add(ambientLight);

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>
34 changes: 3 additions & 31 deletions examples/models/architecture/diorama.html
Original file line number Diff line number Diff line change
Expand Up @@ -16,45 +16,17 @@
<body>
<script type="module">
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { DioramaGeometry } from "../../../src/index.js";
import { createOrbitScene } from "../../utils/orbitScene.js";

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const { scene, camera, controls } = createOrbitScene();
camera.position.set(5, 5, 5);
camera.lookAt(0, 0, 0);

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

const dioramaGeometry = new DioramaGeometry(5, 3, 5, 0.2);
const material = new THREE.MeshStandardMaterial({ color: 0xaaaaaa, side: THREE.DoubleSide });
const customRoomMesh = new THREE.Mesh(dioramaGeometry, material);
scene.add(customRoomMesh);

const ambientLight = new THREE.AmbientLight(0x404040, 0.5);
scene.add(ambientLight);

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>
38 changes: 5 additions & 33 deletions examples/models/architecture/l-shaped-staircase.html
Original file line number Diff line number Diff line change
Expand Up @@ -16,46 +16,18 @@
<body>
<script type="module">
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { LShapedStaircaseGeometry } from "../../../src/index.js";
import { createOrbitScene } from "../../utils/orbitScene.js";

const scene = new THREE.Scene();
const { scene, camera, controls } = createOrbitScene();
camera.position.set(0, 1, 2);
controls.target.set(0, 1, 0);

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.y = 5;
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);

// Example usage
const lShapedStaircaseGeometry = new LShapedStaircaseGeometry(2, 0.3, 0.5, 5, 2);
const material = new THREE.MeshStandardMaterial({ color: 0x8b4513, side: THREE.DoubleSide });
const lShapedStaircaseMesh = new THREE.Mesh(lShapedStaircaseGeometry, material);
lShapedStaircaseMesh.rotation.y = Math.PI;
scene.add(lShapedStaircaseMesh);

const ambientLight = new THREE.AmbientLight(0x404040, 0.5);
scene.add(ambientLight);

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>
37 changes: 4 additions & 33 deletions examples/models/architecture/spiral-staircase.html
Original file line number Diff line number Diff line change
Expand Up @@ -16,46 +16,17 @@
<body>
<script type="module">
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { SpiralStaircaseGeometry } from "../../../src/index.js";
import { createOrbitScene } from "../../utils/orbitScene.js";

const scene = new THREE.Scene();
const { scene, camera, controls } = createOrbitScene();
camera.position.set(0, 3, 5);
controls.target.set(0, 2, 0);

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.y = 5;
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);

// Example usage
const spiralStaircaseGeometry = new SpiralStaircaseGeometry(2, 0.8, 0.2, 20, 1, Math.PI / 8);
const material = new THREE.MeshStandardMaterial({ color: 0x8b4513, side: THREE.DoubleSide });
const spiralStaircaseMesh = new THREE.Mesh(spiralStaircaseGeometry, material);
scene.add(spiralStaircaseMesh);

const ambientLight = new THREE.AmbientLight(0x404040, 0.5);
scene.add(ambientLight);

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>
37 changes: 5 additions & 32 deletions examples/models/architecture/staircase.html
Original file line number Diff line number Diff line change
Expand Up @@ -16,45 +16,18 @@
<body>
<script type="module">
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { StaircaseGeometry } from "../../../src/index.js";
import { createOrbitScene } from "../../utils/orbitScene.js";

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.y = 5;
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);
const { scene, camera, controls } = createOrbitScene();
camera.position.set(0, 1, 2);
controls.target.set(0, 1, 0);

const staircaseGeometry = new StaircaseGeometry(2, 0.3, 0.5, 10);
const material = new THREE.MeshStandardMaterial({ color: 0x8b4513, side: THREE.DoubleSide });
const staircaseMesh = new THREE.Mesh(staircaseGeometry, material);
staircaseMesh.rotation.y = Math.PI;
scene.add(staircaseMesh);

const ambientLight = new THREE.AmbientLight(0x404040, 0.5);
scene.add(ambientLight);

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>
35 changes: 3 additions & 32 deletions examples/models/astronomy/moon.html
Original file line number Diff line number Diff line change
Expand Up @@ -15,43 +15,14 @@
</head>
<body>
<script type="module">
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { Moon } from "../../../src/index.js";
import { createOrbitScene } from "../../utils/orbitScene.js";

const scene = new THREE.Scene();

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

const renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x000000);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
document.body.appendChild(renderer.domElement);
const { scene, camera } = createOrbitScene();
camera.position.set(0, 0, 15);

const moon = new Moon();
scene.add(moon);

const ambientLight = new THREE.AmbientLight(0x404040, 0.5);
scene.add(ambientLight);

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>
35 changes: 3 additions & 32 deletions examples/models/cemetery/mausoleum.html
Original file line number Diff line number Diff line change
Expand Up @@ -15,44 +15,15 @@
</head>
<body>
<script type="module">
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { Mausoleum } from "../../../src/index.js";
import { createOrbitScene } from "../../utils/orbitScene.js";

const scene = new THREE.Scene();

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

const renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x000000);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
document.body.appendChild(renderer.domElement);
const { scene, camera } = createOrbitScene();
camera.position.set(0, 0, 10);

const mausoleum = new Mausoleum();
mausoleum.position.y = -2;
scene.add(mausoleum);

const ambientLight = new THREE.AmbientLight(0x404040, 0.5);
scene.add(ambientLight);

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>
36 changes: 4 additions & 32 deletions examples/models/furniture/desk.html
Original file line number Diff line number Diff line change
Expand Up @@ -15,43 +15,15 @@
</head>
<body>
<script type="module">
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { Desk } from "../../../src/index.js";
import { createOrbitScene } from "../../utils/orbitScene.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);
const { scene, camera, controls } = createOrbitScene();
camera.position.set(0, 5, 5);
controls.target.set(0, 2, 0);

const desk = new Desk();
scene.add(desk);

const ambientLight = new THREE.AmbientLight(0x404040, 0.5);
scene.add(ambientLight);

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>
Loading

0 comments on commit 82a7293

Please sign in to comment.