Metronomy's Small World

metronomy-s-small-world.markdown

Metronomy's Small World

A simple Three JS powered globe used in an activation in support of Metronomy's new album "Small World." Full dev blog here: https://medium.com/p/c870b93c6afc

A Pen by ✠ Aragua ✠ 🇧🇷 on CodePen.

License.

script.vue

<template>
  <div>
    <!-- Small World -->
  </div>
</template>

<script>
export default{
  methods: {
    initializeThree() {
      
      // Base
      // ----------
      
      // Initialize scene
      const scene = new THREE.Scene()
      
      // Initialize camera
      const camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 0.1, 60)
      
      // Reposition camera
      camera.position.set(6, 0, 0)
      
      // Initialize renderer
      const renderer = new THREE.WebGLRenderer({
        alpha: true,
        antialias: true
      })
      
      // Set renderer size
      renderer.setSize(window.innerWidth, window.innerHeight)
      
      // Append renderer to body
      document.body.appendChild(renderer.domElement)
      
      // Initialize controls
      const controls = new THREE.OrbitControls(camera, renderer.domElement)
      
      // World
      // ----------
      
      // Load world texture
      const worldTexture = new THREE.TextureLoader().load("https://assets.codepen.io/141041/small-world.jpg")
      
      // Initialize world geometry
      const worldGeometry = new THREE.SphereGeometry(1, 40, 40)
      
      // Initialize world material
      const worldMaterial = new THREE.MeshBasicMaterial({
        map: worldTexture
      })
      
      // Initialize world
      const world = new THREE.Mesh(worldGeometry, worldMaterial)
      
      // Add earth to scene
      scene.add(world)
      
      // Clouds
      // ----------
      
      // Load clouds texture
      const cloudTexture = new THREE.TextureLoader().load("https://assets.codepen.io/141041/small-world-clouds.png")
      
      // Initialize clouds geometry
      const cloudGeometry = new THREE.SphereGeometry(1.01, 40, 40)
      
      // Initialize clouds material
      const cloudMaterial = new THREE.MeshBasicMaterial({
        map: cloudTexture,
        transparent: true
      })
      
      // Initialize clouds
      const clouds = new THREE.Mesh(cloudGeometry, cloudMaterial)
      
      // Add clouds to scene
      scene.add(clouds)
      
      // Animation
      // ----------      
      
      // Prepare animation loop
      function animate() {
        // Request animation frame
        requestAnimationFrame(animate)
        
        // Rotate world
        world.rotation.y += 0.0005
        
        // Rotate clouds
        clouds.rotation.y -= 0.001
        
        // Render scene
        renderer.render(scene, camera)

      }
      
      // Animate
      animate()
      
      // Resize
      // ----------
      
      // Listen for window resizing
      window.addEventListener('resize', () => {
        // Update camera aspect
        camera.aspect = window.innerWidth / window.innerHeight
        
        // Update camera projection matrix
        camera.updateProjectionMatrix()
        
        // Resize renderer
        renderer.setSize(window.innerWidth, window.innerHeight)

      })
      
    }
  },
  mounted() {
    // Initialize three
    this.initializeThree()

  }
}
</script>

<style>
  body{
    background: radial-gradient(circle at center, white, rgba(113,129,191,0.5) 50%);
  }
</style>

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://assets.codepen.io/141041/OrbitControls.js"></script>

cool