master

分支 (1)

管理

管理

master

snowfall
/
index.html

<!DOCTYPE html>
<html lang="zh-Hans-cn">
<head>
    <meta charset="UTF-8">
    <title>WHITE ALBUM</title>
    <style>
        body {
            background: #000000;
            margin: 0;
        }
        canvas {
            width: 100%;
            height: 100%;
        }
    </style>
    <script src="node_modules/three/build/three.min.js"></script>
</head>
<body>
    <div id="snow"></div>
<script>

(() => {
  'use strict'
  let container
  let camera, scene, renderer

  init()
  animate()

  function init () {
    const textureLoader = new THREE.TextureLoader()
    const geometry = new THREE.Geometry()
    const snow = textureLoader.load('snow.png')
    const snowSizes = [5, 10]
    camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 1, 3000)
    scene = new THREE.Scene()
    renderer = new THREE.WebGLRenderer()
    container = document.getElementById('snow')
    camera.position.z = 1000

    for (let i = 0; i < 1000; i++) {
      let vertex = new THREE.Vector3()
      vertex.x = Math.random() * 2000 - 1000
      vertex.y = Math.random() * 2000 - 1000
      vertex.z = Math.random() * 2000 - 1000
      geometry.vertices.push(vertex)
    }

    snowSizes.forEach((size, i) => {
      scene.add(new THREE.Points(geometry, new THREE.PointsMaterial({
        size,
        map: snow,
        blending: THREE.AdditiveBlending,
        depthTest: false,
        transparent: true
      })))
    })

    renderer.setPixelRatio(window.devicePixelRatio)
    renderer.setSize(window.innerWidth, window.innerHeight)
    container.appendChild(renderer.domElement)
    window.addEventListener('resize', onWindowResize, false)
  }

  function onWindowResize () {
    windowHalfX = window.innerWidth / 2
    windowHalfY = window.innerHeight / 2
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth, window.innerHeight)
  }

  function animate () {
    requestAnimationFrame(animate)
    render()
  }

  function render () {
    let time = Date.now() * 0.00008
    camera.position.y += camera.position.y * 0.5
    camera.lookAt(scene.position)
    for (let i = 0; i < scene.children.length; i++) {
      scene.children[i].rotation.x = time
      scene.children[i].rotation.y = time
    }
    renderer.render(scene, camera)
  }
})()

</script>
</body>
</html>