feat: orbit controls
This commit is contained in:
parent
98974890c8
commit
908a38cfd1
12
index.html
12
index.html
@ -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>
|
||||||
|
|
||||||
|
|||||||
8
main.js
8
main.js
@ -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();
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user