Building an Interactive Tracklist Reveal for Pop Smoke

Shoot for the Stars, Aim for the Moon

Image for post
Image for post

Camera & Motion & Orientation

let stream = await navigator.mediaDevices.getUserMedia({
audio: false,
video: {
facingMode: 'environment'
}
})

Simple Three Scene

import * as THREE from 'three'
import { DeviceOrientationControls } from 'three/examples/jsm/controls/DeviceOrientationControls.js'
let controls = new DeviceOrientationControls(camera)
let geometry = new THREE.SphereGeometry(50, 24, 24)let material = new THREE.MeshBasicMaterial({
color: 0xFFFFFF,
opacity: 0.1,
transparent: true,
wireframe: true
})
let sphere = new THREE.Mesh(geometry, material)scene.add(sphere)
tracks.forEach((track, index) => {
let phi = (Math.random() * 60 + 30) * Math.PI / 180
let theta = (index / 19 * 360) * Math.PI / 180
let vector = new THREE.Vector3().setFromSphericalCoords(
50,
phi,
theta
)
let geometry = new THREE.Geometry().setFromPoints([vector]) let material = new THREE.PointsMaterial({
blending: THREE.AdditiveBlending,
color: 0xFFFFFF,
map: texture,
opacity: 1,
size: 10,
transparent: true
})
let star = new THREE.Points(geometry, material) scene.add(star)
})
let raycaster = new THREE.Raycaster()raycaster.params.Points.threshold = 5
raycaster.setFromCamera(new THREE.Vector2(), camera)let intersects = raycaster.intersectObjects(
scene.children.filter(child => child.type == "Points")
)
if (intersects.length) {
intersects[0].object.material.opacity = 0.15
// show title
} else {
// hide title
}}

Liquid Titles

Written by

I develop websites for rock 'n' roll bands and get paid in sex and drugs. Previously Silva Artist Management, SoundCloud, and Songkick. Currently: Available

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store