samcaf.github.io/animation.html at main · samcaf/samcaf.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html>
<head>
	<title>Rotating Cube</title>
	<style>
		#canvas-container {
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
		}
	</style>
</head>
<body>
	<div id="canvas-container"></div>
	<script src="https://cdn.jsdelivr.net/npm/three@0.133.2/build/three.min.js"></script>
	<script>
		// Initialize Three.js scene
		const scene = new THREE.Scene();
		const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
		const renderer = new THREE.WebGLRenderer();
		renderer.setSize(window.innerWidth, window.innerHeight);
		document.getElementById('canvas-container').appendChild(renderer.domElement);

		// Create a cube
		const geometry = new THREE.BoxGeometry();
		const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
		const cube = new THREE.Mesh(geometry, material);
		scene.add(cube);

		// Position the camera
		camera.position.z = 5;

		// Add event listener to handle mouse events
		let isDragging = false;
		let previousMousePosition = {
			x: 0,
			y: 0
		};
		document.addEventListener('mousedown', event => {
			isDragging = true;
		});
		document.addEventListener('mouseup', event => {
			isDragging = false;
		});
		document.addEventListener('mousemove', event => {
			if (isDragging) {
				let deltaMove = {
					x: event.offsetX - previousMousePosition.x,
					y: event.offsetY - previousMousePosition.y
				};

				// Rotate the cube
				cube.rotation.x += deltaMove.y * 0.01;
				cube.rotation.y += deltaMove.x * 0.01;
			}

			previousMousePosition = {
				x: event.offsetX,
				y: event.offsetY
			};
		});

		// Render loop
		const animate = function () {
			requestAnimationFrame(animate);

			// Render the scene
			renderer.render(scene, camera);
		};
		animate();
	</script>
</body>
</html>