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