ktyl/pipes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: orbit controls

Browse Source
This commit is contained in:
ktyl 2025-10-29 09:44:08 +00:00
parent 98974890c8
commit 908a38cfd1
2 changed files with 17 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
index.html
View File

@ -8,10 +8,18 @@
body { margin: 0; overflow: hidden; }
</style>
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.180.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.180.0/examples/jsm/"
}
}
</script>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
<script src="main.js"></script>
<script type="module" src="main.js"></script>
</body>

8
main.js
View File

@ -1,6 +1,8 @@
// TODO: orbit camera
// TODO: meshes for puzzle pieces
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// Initialise scene
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
@ -19,6 +21,9 @@ scene.add(directionalLight.target);
// Position the camera
camera.position.z = 5;
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.update();
function makeCube(xCoord) {
const geometry = new THREE.BoxGeometry();
@ -46,6 +51,7 @@ function animate() {
cube.rotation.y += 0.01;
}
controls.update();
renderer.render(scene, camera);
}
animate();