<canvas id="canvas"></canvas>

* { 

  margin: 0;

}

canvas { 

  display: block;

}

/*--------------------

Renderer

--------------------*/

const renderer = new THREE.WebGLRenderer({ 

  canvas: document.getElementById('canvas'), 

  antialias: true

})

renderer.setSize( window.innerWidth, window.innerHeight )

​

​

/*--------------------

Camera & Scene

--------------------*/

const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 )

camera.position.z = 5

const scene = new THREE.Scene()

scene.background = new THREE.Color( 0xe0e0e0 )

scene.fog = new THREE.Fog( 0xe0e0e0, 1, 15 )

​

​

/*--------------------

Controls

--------------------*/

const controls = new THREE.OrbitControls(camera, renderer.domElement)

controls.enableDamping = true

controls.dampingFactor = 0.1

​

​

/*--------------------

Light

--------------------*/

const ambientLight = new THREE.AmbientLight(0xffffff, .5)

scene.add(ambientLight)

​

const light2 = new THREE.PointLight(0xffffff, .5)

light2.position.set(0, 1, 0)

scene.add(light2)

​

const light = new THREE.PointLight(0xffffff, .1)

light.position.set(0, 2, 0)

scene.add(light)

light.castShadow = true

light.shadow.mapSize.width = 4096

light.shadow.mapSize.height = 4096

light.shadow.camera.near = 0.1

light.shadow.camera.far = 30

​

renderer.shadowMap.enabled = true;

renderer.shadowMap.type = THREE.PCFSoftShadowMap

​

​

/*--------------------

Init

--------------------*/

const meshes = []

const matcap = new THREE.TextureLoader().load('https://raw.githubusercontent.com/nidorx/matcaps/master/1024/5C4E41_CCCDD6_9B979B_B1AFB0.png')

const init = () => {

  const ballGeo = new THREE.SphereBufferGeometry(.3, 32, 32)

  const ballMat = new THREE.MeshMatcapMaterial( { 

    matcap: matcap

  })

  const hairGeo = new THREE.CylinderBufferGeometry(.006, .006, 8,  32)

  const hairMat = new THREE.MeshPhongMaterial( { 

    color: 0xcccccc

  })

​

  for (let i = 0; i < 10; i++) {

    const group = new THREE.Group()

    scene.add(group)

    const ball = new THREE.Mesh( ballGeo, ballMat )

    ball.position.y = -6

    ball.castShadow = true

    ball.receiveShadow = true

    group.add( ball )

    const hair = new THREE.Mesh( hairGeo, hairMat )

    hair.position.y = -2

    group.add( hair )

    group.position.x = -3. + i * .7

    group.position.y = 6

    gsap.fromTo(group.rotation, {

      x: -.3,

    }, {

      duration: 1.5,

      x: .3,

      repeat: -1,

      ease: 'power1.inOut',

      yoyo: true,

      delay: i * 0.1

    }) 

    meshes.push(group)

  }

  const geoPlane = new THREE.PlaneBufferGeometry(100, 100)

  const mat3 = new THREE.MeshPhongMaterial( { 

    color: 0xffffff,

    shininess: 0.4,

    metalness: 0.2,

  })

  const plane = new THREE.Mesh(geoPlane, mat3)

  plane.rotation.x = -Math.PI / 2

  plane.position.y = -2

  plane.receiveShadow = true

  scene.add(plane)

}

init()

​

​

/*--------------------

Renderer

--------------------*/

const render = () => {

  requestAnimationFrame( render )

  renderer.render( scene, camera )

  controls.update()

  scene.rotation.y += .005

}

render()

​

​

/*--------------------

Resize

--------------------*/

const resize = () => {

  camera.aspect = window.innerWidth / window.innerHeight

  camera.updateProjectionMatrix()

  renderer.setSize( window.innerWidth, window.innerHeight )

}

window.addEventListener('resize', resize)