The code base https://github.com/LuisArmando-TestCoder/scene-preset
Published in NPM https://www.npmjs.com/package/scene-preset
npm i -S scenePreset
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
},
})
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)
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
})
}
})
Uniforms like the ones in the following list are available for you to reference them in your shader:
Is intended to add these over time:
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.);
}
import { actions } from 'scene-preset'
// canvas as HTMLCanvasElement
actions.screenshotCanvas(canvas)
import { actions } from 'scene-preset'
// fullscreen can be performed in many elements, including canvas
actions.toggleFullscreen(canvas.parentElement)
import presetScene, { actions } from 'scene-preset'
presetScene({
setup({ canvasSelector }) {
actions.toggleVR(canvasSelector)
}
})
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)
}
})
AudioProperties contains the following properties:
import presetScene, { consulters } from 'scene-preset'
presetScene({
animate() {
// audio as HTMLMediaElement
const audioProperties = consulters.getAudioProperties(audio)
if (audioProperties) console.log(audioProperties)
}
})