Get back to work gallery

Scene Preset

Abstracts Three.js boilerplate

The code base https://github.com/LuisArmando-TestCoder/scene-preset

Published in NPM https://www.npmjs.com/package/scene-preset



Creative tests with this library

Warp



Gallery

How to

Install ScenePreset

npm i -S scenePreset

Start using ScenePreset

presetScene

import * as THREE from 'three' import presetScene from 'scene-preset' const geometry = new THREE.BoxGeometry(1, 1, 1) const material = new THREE.MeshStandardMaterial({ color: 0x990000 }) const mesh = new THREE.Mesh(geometry, material) presetScene({ setup({ scene }) { scene.add(mesh) }, animate({ scene }) { mesh.rotation.y += .01 }, })

Know all available control's names

  • setFirstPersonDirection
  • setFirstPersonZoom
  • setFirstPersonPosition
  • setCanvasAutoFocus

Set self updating uniforms

actions.setUniforms

import * as THREE from 'three' import { actions } from 'scene-preset' // Your amazing shader import { fragmentShader } from '../Shaders/MisticalColors' const material = new THREE.ShaderMaterial({ fragmentShader }) actions.setUniforms(material)

Set self updating custom uniforms

actions.setUniforms + customUniforms

import { actions } from 'scene-preset' // Your amazing shader import { vertexShader } from '../Shaders/MisticalColors' const material = new THREE.ShaderMaterial({ vertexShader }) presetScene({ setup({ camera }) { actions.setUniforms(material, { iCameraPosition: () => camera.position }) } })

Know how to write my shader

  1. Write shaders like you are used to with Three.js
  2. You would have some default uniforms updating, their names are standardized with ShaderToy
  3. Uniforms like the ones in the following list are available for you to reference them in your shader:

    • iResolution → viewport resolution (in pixels)
    • iTime → shader playback time (in seconds)
    • iTimeDelta → render time (in seconds)
    • iMouse → mouse pixel coords. xy: current (if MLB down), zw: click
  4. Is intended to add these over time:

    • iFrame // shader playback frame
    • iChannelTime[4] // channel playback time (in seconds)
    • iChannelResolution[4] // channel resolution (in pixels)
    • iChannel0..3 // input channel. XX = 2D/Cube
    • iDate
    • iSampleRate
uniform vec3 iResolution; uniform float iTime; uniform float iTimeDelta; // uniform int iFrame; // uniform float iChannelTime[4]; // uniform vec3 iChannelResolution[4]; uniform vec4 iMouse; // uniform samplerXX iChannel0..3; // uniform vec4 iDate; // uniform float iSampleRate; void main() { gl_FragColor = vec4(0., 1., 1., 1.); }

Screenshot canvas

actions.screenshotCanvas

import { actions } from 'scene-preset' // canvas as HTMLCanvasElement actions.screenshotCanvas(canvas)

Toggle Fullscreen on element

actions.toggleFullscreen

import { actions } from 'scene-preset' // fullscreen can be performed in many elements, including canvas actions.toggleFullscreen(canvas.parentElement)

Toggle VR view

actions.toggleVR

import presetScene, { actions } from 'scene-preset' presetScene({ setup({ canvasSelector }) { actions.toggleVR(canvasSelector) } })

Get, toggle canvasRecorder and download canvas recording

consulters.getCanvasRecorder

actions.downloadCanvasRecordingOnStop

recorder.start | recorder.stop

import presetScene, { actions, consulters } from 'scene-preset' presetScene({ setup({ canvas }) { const someStartTime = 2e3 const someDuration = 5e3 const endTime = someStartTime + someDuration // Get CanvasRecorder const recorder = consulters.getCanvasRecorder(canvas) // Start CanvasRecorder at some time setTimeout(() => { recorder.start() }, someStartTime) // Stop CanvasRecorder at some other time setTimeout(() => { recorder.stop() }, endTime) // Download canvas recording on stop // this will be downloaded as a .webm actions.downloadCanvasRecordingOnStop(recorder) } })

Get Audio Properties

consulters.getAudioProperties

AudioProperties contains the following properties:

  • audioContext
  • analyser
  • source
  • initialized
  • frequencies
  • averageFrequecy
  • amplitudes
  • averageAmplitude
import presetScene, { consulters } from 'scene-preset' presetScene({ animate() { // audio as HTMLMediaElement const audioProperties = consulters.getAudioProperties(audio) if (audioProperties) console.log(audioProperties) } })