使用SoundCity和Three.JS结合实现的音乐城市可视化动画

SoundCity + Three.JS Audio 3D Visualize experiment, 诡异的背景音乐。

html5, 3d, music

《使用js把svg图形转成png图像》申请公开！

第三方库
作品简介 4570
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

window.AudioContext = window.AudioContext ||
    window.webkitAudioContext ||
    window.mozAudioContext ||
    window.msAudioContext ||
    window.oAudioContext

const WIDTH = window.innerWidth,
    HEIGHT = window.innerHeight
const NBR_OBJ = 1024 / 1.5
var cubes = [],
    minHeight = []
var scene, camera, camControls, clock, renderer
var sphere = {},
    plane = {},
    lights = {}
var night = false

// Initialization of audio and analyser
if (AudioContext) {
    var audioCtx = new AudioContext()
    var audioBuffer
    var audioSource
    var analyser = audioCtx.createAnalyser()
    var frequencyData = new Uint8Array(analyser.frequencyBinCount)
    var audio = new Audio()
    audio.crossOrigin = "anonymous";
    audio.controls = false
    audio.src = "https://thomasvanglabeke.github.io/SoundCity/assets/holy.mp3"
    document.body.appendChild(audio)
        // Once the song is playable, the loader disappears and the init function start
    audio.addEventListener('canplay', function() {
        document.querySelector('#loader').remove()
        document.querySelector('#UIContainer').style.visibility = 'visible'
        audioSource = audioCtx.createMediaElementSource(audio)
        audioSource.connect(analyser)
        analyser.connect(audioCtx.destination)
        audio.play()
        init()
    })
}

function init() {
    // SCENE with Fog - CAMERA -
    scene = new THREE.Scene()
    scene.fog = new THREE.FogExp2(0xDD709B, 0.007)
    camera = new THREE.PerspectiveCamera(45, WIDTH / HEIGHT, 0.1, 1000)
    clock = new THREE.Clock()
    renderer = new THREE.WebGLRenderer({
        alpha: true,
        antialias: true
    })
    renderer.setClearColor(0x000000, 0)
    renderer.setSize(WIDTH, HEIGHT)
    renderer.shadowMap.enabled = true

// GROUND
    plane.geo = new THREE.PlaneGeometry(5000, 5000, 1, 1)
    plane.mat = new THREE.MeshPhongMaterial({
        color: 0x01122d
    })
    plane.mat.shininess = 50
    plane = new THREE.Mesh(plane.geo, plane.mat)
    plane.position.x = 0
    plane.position.y = 0
    plane.position.z = -5
    plane.rotation.x = -0.5 * Math.PI
    scene.add(plane)

// MOON 
    sphere.geo = new THREE.SphereBufferGeometry(5, 32, 32)
    sphere.mat = new THREE.MeshPhongMaterial({
        color: 0x000000,
        wireframe: false,
        transparent: true,
        opacity: 0.8
    })
    sphere = new THREE.Mesh(sphere.geo, sphere.mat)
    sphere.position.x = 100
    sphere.position.y = 40
    sphere.position.z = 130
    scene.add(sphere)

// BUILDINGS
    for (var i = 0; i < NBR_OBJ; i++) {
        cubes[i] = {}
        minHeight[i] = randomIntFromInterval(20, 50)
        cubes[i].geo = new THREE.BoxGeometry(3, minHeight[i], 3)
        cubes[i].mat = new THREE.MeshLambertMaterial({
            color: 0xD3D6E8
        })
        cubes[i] = new THREE.Mesh(cubes[i].geo, cubes[i].mat)
        cubes[i].position.x = randomIntFromInterval(-75, 75)
        cubes[i].position.y = -5
        cubes[i].position.z = randomIntFromInterval(-75, 75)
        cubes[i].castShadow = true
        scene.add(cubes[i])
    }

// LIGHTS 
    lights.spotLight = new THREE.SpotLight(0xffffff, 0.8)
    lights.spotLight.position.set(100, 140, 130)
    lights.spotLight.castShadow = true
    lights.spotLightReverse = new THREE.SpotLight(0x534da7, 0.2)
    lights.spotLightReverse.position.set(-100, 140, -130)
    lights.spotLightReverse.castShadow = true
    scene.add(lights.spotLight)
    scene.add(lights.spotLightReverse)

// CAMERA POSITION
    camera.position.x = -30
    camera.position.y = 30
    camera.position.z = 30
    camera.lookAt(scene.position)

// FirstPersonControls camera is an extra little lib for ThreeJS
    camControls = new THREE.FirstPersonControls(camera)
    camControls.lookSpeed = 0.02
    camControls.movementSpeed = 3
    camControls.noFly = true
    camControls.lookVertical = true
    camControls.constrainVertical = false
    camControls.maxPolarAngle = Math.PI / 2

document.body.appendChild(renderer.domElement)
    renderer.render(scene, camera)

// EventListener to display Day/Night mode and Random mode 
    window.addEventListener('keydown', function(e) {
        switch (e.keyCode) {
            case 78:
                if (!night) {
                    displayMode({
                        a: '#111439',
                        b: 0x111439,
                        c: 0x6dc6e4
                    })
                    night = true
                } else {
                    displayMode({
                        a: '#DD709B',
                        b: 0xDD709B,
                        c: 0xD3D6E8
                    })
                    night = false
                }
                break
            case 32:
                var colorRandom = Math.floor(Math.random() * 16777215).toString(16)
                if (colorRandom.length < 6) {
                    colorRandom = colorRandom + "0"
                    if (colorRandom.length < 6) {
                        colorRandom = colorRandom + "0"
                    }
                }
                displayMode({
                    a: '#' + colorRandom,
                    b: '#' + colorRandom,
                    c: Math.random() * 0xffffff
                })
                break
        }
    })

window.addEventListener('resize', onWindowResize, false)

// Start the Render function
    render()
}

function render() {
    // Update the camera with the Three.Clock
    var delta = clock.getDelta()
    camControls.update(delta)
    if (camera.position.y < 3) {
        camera.position.y = 3
    }

// Get the frequency data
    analyser.getByteFrequencyData(frequencyData)

// Make each building react to the music with a scale
    for (var i = 0; i < NBR_OBJ; i++) {
        var meshObj = scene.children[i]
        if (meshObj instanceof THREE.Mesh && meshObj.geometry.type == 'BoxGeometry') {
            var percentIdx = i / NBR_OBJ
            var frequencyIdx = Math.floor(1024 * percentIdx)
            meshObj.scale.y = 1 + (frequencyData[frequencyIdx] / frequencyData.length)
        }
    }

// Same thing for the Moon
    sphere.scale.y = 1 + (frequencyData[0] / 255)
    sphere.scale.x = 1 + (frequencyData[0] / 255)
    sphere.scale.z = 1 + (frequencyData[0] / 255)

requestAnimationFrame(render)
    renderer.render(scene, camera)
}

// Set the random colors
function displayMode(color) {
    document.querySelector('body').style.backgroundColor = color.a
    scene.fog = new THREE.FogExp2(color.b, 0.007)
    for (var i = 0; i < NBR_OBJ; i++) {
        var meshObj = scene.children[i]
        if (meshObj instanceof THREE.Mesh && meshObj.geometry.type == 'BoxGeometry') {
            meshObj.material.color.setHex(color.c)
        }
    }
}

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

function randomIntFromInterval(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min)
}

编译

CSS

HTML

SoundCity + Three.JS Audio 3D Visualize experiment, 诡异的背景音乐。

html5, 3d, music

编辑器支持Emmet

快捷键

SoundCity + Three.JS Audio 3D Visualize experiment, 诡异的背景音乐。

html5, 3d, music

使用AudioContext实现的生日快乐弹奏动画

使用CSS3 filter:hue-rotate和gradient构造炫彩动画墙纸

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：