initial commit
This commit is contained in:
		
						commit
						98974890c8
					
				
							
								
								
									
										17
									
								
								index.html
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										17
									
								
								index.html
									
									
									
									
									
										Normal file
									
								
							@ -0,0 +1,17 @@
 | 
				
			|||||||
 | 
					<!DOCTYPE html>
 | 
				
			||||||
 | 
					<html>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<head>
 | 
				
			||||||
 | 
					<meta charset="utf-8">
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<style>
 | 
				
			||||||
 | 
					body { margin: 0; overflow: hidden; }
 | 
				
			||||||
 | 
					</style>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					</head>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<body>
 | 
				
			||||||
 | 
					    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
 | 
				
			||||||
 | 
					    <script src="main.js"></script>
 | 
				
			||||||
 | 
					</body>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
							
								
								
									
										52
									
								
								main.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										52
									
								
								main.js
									
									
									
									
									
										Normal file
									
								
							@ -0,0 +1,52 @@
 | 
				
			|||||||
 | 
					// TODO: orbit camera
 | 
				
			||||||
 | 
					// TODO: meshes for puzzle pieces
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// Initialise 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.body.appendChild(renderer.domElement);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// Set up lights
 | 
				
			||||||
 | 
					const ambientLight = new THREE.AmbientLight(0x404040);
 | 
				
			||||||
 | 
					scene.add(ambientLight);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
 | 
				
			||||||
 | 
					directionalLight.position.set(1, 3, 2);
 | 
				
			||||||
 | 
					scene.add(directionalLight);
 | 
				
			||||||
 | 
					scene.add(directionalLight.target);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// Position the camera
 | 
				
			||||||
 | 
					camera.position.z = 5;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					function makeCube(xCoord) {
 | 
				
			||||||
 | 
					    const geometry = new THREE.BoxGeometry();
 | 
				
			||||||
 | 
					    const material = new THREE.MeshLambertMaterial({ color: 0x00ff00 });
 | 
				
			||||||
 | 
					    const cube = new THREE.Mesh(geometry, material);
 | 
				
			||||||
 | 
					    cube.position.set(xCoord, 0, 0);
 | 
				
			||||||
 | 
					    scene.add(cube);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    return cube;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					let cubes = [];
 | 
				
			||||||
 | 
					for (let i = 0; i < 3; i++) {
 | 
				
			||||||
 | 
					    const cube = makeCube((i - 1)*2);
 | 
				
			||||||
 | 
					    cubes.push(cube);
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// Animation loop
 | 
				
			||||||
 | 
					function animate() {
 | 
				
			||||||
 | 
					    requestAnimationFrame(animate);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    for (let i = 0; i < cubes.length; i++) {
 | 
				
			||||||
 | 
					        const cube = cubes[i];
 | 
				
			||||||
 | 
					        cube.rotation.x += 0.01;
 | 
				
			||||||
 | 
					        cube.rotation.y += 0.01;
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    renderer.render(scene, camera);
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					animate();
 | 
				
			||||||
 | 
					
 | 
				
			||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user