| 3 | let camera, scene, renderer, cube; |
| 4 | |
| 5 | function init() { |
| 6 | // Init scene |
| 7 | scene = new THREE.Scene(); |
| 8 | |
| 9 | // Init camera (PerspectiveCamera) |
| 10 | camera = new THREE.PerspectiveCamera( |
| 11 | 75, |
| 12 | window.innerWidth / window.innerHeight, |
| 13 | 0.1, |
| 14 | 1000 |
| 15 | ); |
| 16 | |
| 17 | // Init renderer |
| 18 | renderer = new THREE.WebGLRenderer({ antialias: true }); |
| 19 | |
| 20 | // Set size (whole window) |
| 21 | renderer.setSize(window.innerWidth, window.innerHeight); |
| 22 | |
| 23 | // Render to canvas element |
| 24 | document.body.appendChild(renderer.domElement); |
| 25 | |
| 26 | // Init BoxGeometry object (rectangular cuboid) |
| 27 | const geometry = new THREE.BoxGeometry(2, 2, 2); |
| 28 | |
| 29 | // Create material with color |
| 30 | const material = new THREE.MeshStandardMaterial({ color: 0xff0051 }); |
| 31 | |
| 32 | // Add texture - |
| 33 | // const texture = new THREE.TextureLoader().load('textures/crate.gif'); |
| 34 | |
| 35 | // Create material with texture |
| 36 | // const material = new THREE.MeshBasicMaterial({ map: texture }); |
| 37 | |
| 38 | // Create mesh with geo and material |
| 39 | cube = new THREE.Mesh(geometry, material); |
| 40 | // Add to scene |
| 41 | scene.add(cube); |
| 42 | |
| 43 | var pointLight = new THREE.PointLight(0xffffff, 1); |
| 44 | pointLight.position.set(25, 50, 25); |
| 45 | scene.add(pointLight); |
| 46 | |
| 47 | // Position camera |
| 48 | camera.position.z = 5; |
| 49 | |
| 50 | // Orbit controls ( mouse events ) |
| 51 | const controls = new OrbitControls(camera, renderer.domElement); |
| 52 | controls.target.set(0, 0, 0); |
| 53 | controls.update(); |
| 54 | } |
| 55 | |
| 56 | // Draw the scene every time the screen is refreshed |
| 57 | function animate() { |