1  import "./styles.css"
 2  import * as THREE from "./three.min.js"
 3  import { OrbitControls } from './OrbitControls.js'
 4  
 5  /**
 6   * Base
 7   */
 8  
 9  // Canvas
10  const canvas = document.querySelector('canvas.webgl')
11  
12  // Scene
13  const scene = new THREE.Scene()
14  
15  /**
16   * Textures
17   */
18  const textureLoader = new THREE.TextureLoader()
19  
20  /**
21   * Test cube
22   */
23  const cube = new THREE.Mesh(
24      new THREE.BoxGeometry(1, 1, 1),
25      new THREE.MeshBasicMaterial()
26  )
27  scene.add(cube)
28  
29  /**
30   * Sizes
31   */
32  const sizes = {
33      width: window.innerWidth,
34      height: window.innerHeight
35  }
36  
37  window.addEventListener('resize', () =>
38  {
39      // Update sizes
40      sizes.width = window.innerWidth
41      sizes.height = window.innerHeight
42  
43      // Update camera
44      camera.aspect = sizes.width / sizes.height
45      camera.updateProjectionMatrix()
46  
47      // Update renderer
48      renderer.setSize(sizes.width, sizes.height)
49      renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
50  })
51  
52  /**
53   * Camera
54   */
55  // Base camera
56  const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
57  camera.position.z = 3
58  scene.add(camera)
59  
60  // Controls
61  const controls = new OrbitControls(camera, canvas)
62  controls.enableDamping = true
63  
64  /**
65   * Renderer
66   */
67  const renderer = new THREE.WebGLRenderer({
68      canvas: canvas
69  })
70  renderer.setSize(sizes.width, sizes.height)
71  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
72  
73  /**
74   * Animate
75   */
76  const clock = new THREE.Clock()
77  
78  const tick = () =>
79  {
80      const elapsedTime = clock.getElapsedTime()
81  
82      // Update controls
83      controls.update()
84  
85      // Render
86      renderer.render(scene, camera)
87  
88      // Call tick again on the next frame
89      window.requestAnimationFrame(tick)
90  }
91  
92  tick()
93