feat: orbit controls

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

View File

@ -8,10 +8,18 @@
body { margin: 0; overflow: hidden; } body { margin: 0; overflow: hidden; }
</style> </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> </head>
<body> <body>
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script> <script type="module" src="main.js"></script>
<script src="main.js"></script>
</body> </body>

View File

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