{"contentType":"lapbin-threejs","codes":{"html":"\t\t\n\t\t","css":"\ta {\n\t\t\t\tcolor: blue;\n\t\t\t}\n\t\t\t.ac { /* prevent dat-gui from being selected */\n\t\t\t\t-webkit-user-select: none;\n\t\t\t\t-moz-user-select: none;\n\t\t\t\t-ms-user-select: none;\n\t\t\t\tuser-select: none;\n\t\t\t}\n\t\t\t.control-inactive {\n\t\t\t\tcolor: #888;\n\t\t\t}","js":"function main($,THREE,threex,datgui) {\n //import * as THREE from '../build/three.module.js';\n\n\t\t\t//import Stats from './jsm/libs/stats.module.js';\n\t\t\t//import { GUI } from './jsm/libs/dat.gui.module.js';\n \t\t\tvar GUI = datgui.GUI;\n\t\t\t//import { OrbitControls } from './jsm/controls/OrbitControls.js';\n \t\t\tvar OrbitControls = threex.controls.OrbitControls;\n\t\t\t//import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';\n \t\t\tvar GLTFLoader = threex.loaders.GLTFLoader;\n\n\t\t\tvar scene, renderer, camera, stats;\n\t\t\tvar model, skeleton, mixer, clock;\n\n\t\t\tvar crossFadeControls = [];\n\n\t\t\tvar currentBaseAction = 'idle';\n\t\t\tconst allActions = [];\n\t\t\tconst baseActions = {\n\t\t\t\tidle: { weight: 1 },\n\t\t\t\twalk: { weight: 0 },\n\t\t\t\trun: { weight: 0 }\n\t\t\t};\n\t\t\tconst additiveActions = {\n\t\t\t\tsneak_pose: { weight: 0 },\n\t\t\t\tsad_pose: { weight: 0 },\n\t\t\t\tagree: { weight: 0 },\n\t\t\t\theadShake: { weight: 0 }\n\t\t\t};\n\t\t\tvar panelSettings, numAnimations;\n\n\t\t\tinit();\n\n\t\t\tfunction init() {\n\n\t\t\t\tvar container = document.getElementById( 'container' );\n\t\t\t\tclock = new THREE.Clock();\n\n\t\t\t\tscene = new THREE.Scene();\n\t\t\t\tscene.background = new THREE.Color( 0xa0a0a0 );\n\t\t\t\tscene.fog = new THREE.Fog( 0xa0a0a0, 10, 50 );\n\n\t\t\t\tvar hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );\n\t\t\t\themiLight.position.set( 0, 20, 0 );\n\t\t\t\tscene.add( hemiLight );\n\n\t\t\t\tvar dirLight = new THREE.DirectionalLight( 0xffffff );\n\t\t\t\tdirLight.position.set( 3, 10, 10 );\n\t\t\t\tdirLight.castShadow = true;\n\t\t\t\tdirLight.shadow.camera.top = 2;\n\t\t\t\tdirLight.shadow.camera.bottom = - 2;\n\t\t\t\tdirLight.shadow.camera.left = - 2;\n\t\t\t\tdirLight.shadow.camera.right = 2;\n\t\t\t\tdirLight.shadow.camera.near = 0.1;\n\t\t\t\tdirLight.shadow.camera.far = 40;\n\t\t\t\tscene.add( dirLight );\n\n\t\t\t\t// ground\n\n\t\t\t\tvar mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 100, 100 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );\n\t\t\t\tmesh.rotation.x = - Math.PI / 2;\n\t\t\t\tmesh.receiveShadow = true;\n\t\t\t\tscene.add( mesh );\n\n\t\t\t\tvar loader = new GLTFLoader();\n\t\t\t\tloader.load( '/assets/lapbin/models/gltf/Xbot.glb', function ( gltf ) {\n\n\t\t\t\t\tmodel = gltf.scene;\n\t\t\t\t\tscene.add( model );\n\n\t\t\t\t\tmodel.traverse( function ( object ) {\n\n\t\t\t\t\t\tif ( object.isMesh ) object.castShadow = true;\n\n\t\t\t\t\t} );\n\n\t\t\t\t\tskeleton = new THREE.SkeletonHelper( model );\n\t\t\t\t\tskeleton.visible = false;\n\t\t\t\t\tscene.add( skeleton );\n\n\t\t\t\t\tvar animations = gltf.animations;\n\t\t\t\t\tmixer = new THREE.AnimationMixer( model );\n\n\t\t\t\t\tnumAnimations = animations.length;\n\n\t\t\t\t\tfor ( let i = 0; i !== numAnimations; ++ i ) {\n\n\t\t\t\t\t\tlet clip = animations[ i ];\n\t\t\t\t\t\tconst name = clip.name;\n\n\t\t\t\t\t\tif ( baseActions[ name ] ) {\n\n\t\t\t\t\t\t\tconst action = mixer.clipAction( clip );\n\t\t\t\t\t\t\tactivateAction( action );\n\t\t\t\t\t\t\tbaseActions[ name ].action = action;\n\t\t\t\t\t\t\tallActions.push( action );\n\n\t\t\t\t\t\t} else if ( additiveActions[ name ] ) {\n\n\t\t\t\t\t\t\t// Make the clip additive and remove the reference frame\n\n\t\t\t\t\t\t\tTHREE.AnimationUtils.makeClipAdditive( clip );\n\n\t\t\t\t\t\t\tif ( clip.name.endsWith( '_pose' ) ) {\n\n\t\t\t\t\t\t\t\tclip = THREE.AnimationUtils.subclip( clip, clip.name, 2, 3, 30 );\n\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tconst action = mixer.clipAction( clip );\n\t\t\t\t\t\t\tactivateAction( action );\n\t\t\t\t\t\t\tadditiveActions[ name ].action = action;\n\t\t\t\t\t\t\tallActions.push( action );\n\n\t\t\t\t\t\t}\n\n\t\t\t\t\t}\n\n\t\t\t\t\tcreatePanel();\n\n\t\t\t\t\tanimate();\n\n\t\t\t\t} );\n\n\t\t\t\trenderer = new THREE.WebGLRenderer( { antialias: true } );\n\t\t\t\trenderer.setPixelRatio( window.devicePixelRatio );\n\t\t\t\trenderer.setSize( window.innerWidth, window.innerHeight );\n\t\t\t\trenderer.outputEncoding = THREE.sRGBEncoding;\n\t\t\t\trenderer.shadowMap.enabled = true;\n\t\t\t\tcontainer.appendChild( renderer.domElement );\n\n\t\t\t\t// camera\n\t\t\t\tcamera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 100 );\n\t\t\t\tcamera.position.set( - 1, 2, 3 );\n\n\t\t\t\tvar controls = new OrbitControls( camera, renderer.domElement );\n\t\t\t\tcontrols.enablePan = false;\n\t\t\t\tcontrols.enableZoom = false;\n\t\t\t\tcontrols.target.set( 0, 1, 0 );\n\t\t\t\tcontrols.update();\n\n\t\t\t\t//stats = new Stats();\n\t\t\t\t//container.appendChild( stats.dom );\n\n\t\t\t\twindow.addEventListener( 'resize', onWindowResize, false );\n\n\t\t\t}\n\n\t\t\tfunction createPanel() {\n\n\t\t\t\tvar panel = new GUI( { width: 310 } );\n\n\t\t\t\tvar folder1 = panel.addFolder( 'Base Actions' );\n\t\t\t\tvar folder2 = panel.addFolder( 'Additive Action Weights' );\n\t\t\t\tvar folder3 = panel.addFolder( 'General Speed' );\n\n\t\t\t\tpanelSettings = {\n\t\t\t\t\t'modify time scale': 1.0\n\t\t\t\t};\n\n\t\t\t\tconst baseNames = [ 'None', ...Object.keys( baseActions ) ];\n\n\t\t\t\tfor ( let i = 0, l = baseNames.length; i !== l; ++ i ) {\n\n\t\t\t\t\tconst name = baseNames[ i ];\n\t\t\t\t\tconst settings = baseActions[ name ];\n\t\t\t\t\tpanelSettings[ name ] = function () {\n\n\t\t\t\t\t\tconst currentSettings = baseActions[ currentBaseAction ];\n\t\t\t\t\t\tconst currentAction = currentSettings ? currentSettings.action : null;\n\t\t\t\t\t\tconst action = settings ? settings.action : null;\n\n\t\t\t\t\t\tprepareCrossFade( currentAction, action, 0.35 );\n\n\t\t\t\t\t};\n\n\t\t\t\t\tcrossFadeControls.push( folder1.add( panelSettings, name ) );\n\n\t\t\t\t}\n\n\t\t\t\tfor ( const name of Object.keys( additiveActions ) ) {\n\n\t\t\t\t\tconst settings = additiveActions[ name ];\n\n\t\t\t\t\tpanelSettings[ name ] = settings.weight;\n\t\t\t\t\tfolder2.add( panelSettings, name, 0.0, 1.0, 0.01 ).listen().onChange( function ( weight ) {\n\n\t\t\t\t\t\tsetWeight( settings.action, weight );\n\t\t\t\t\t\tsettings.weight = weight;\n\n\t\t\t\t\t} );\n\n\t\t\t\t}\n\n\t\t\t\tfolder3.add( panelSettings, 'modify time scale', 0.0, 1.5, 0.01 ).onChange( modifyTimeScale );\n\n\t\t\t\tfolder1.open();\n\t\t\t\tfolder2.open();\n\t\t\t\tfolder3.open();\n\n\t\t\t\tcrossFadeControls.forEach( function ( control ) {\n\n\t\t\t\t\tcontrol.classList1 = control.domElement.parentElement.parentElement.classList;\n\t\t\t\t\tcontrol.classList2 = control.domElement.previousElementSibling.classList;\n\n\t\t\t\t\tcontrol.setInactive = function () {\n\n\t\t\t\t\t\tcontrol.classList2.add( 'control-inactive' );\n\n\t\t\t\t\t};\n\n\t\t\t\t\tcontrol.setActive = function () {\n\n\t\t\t\t\t\tcontrol.classList2.remove( 'control-inactive' );\n\n\t\t\t\t\t};\n\n\t\t\t\t\tconst settings = baseActions[ control.property ];\n\n\t\t\t\t\tif ( ! settings || ! settings.weight ) {\n\n\t\t\t\t\t\tcontrol.setInactive();\n\n\t\t\t\t\t}\n\n\t\t\t\t} );\n\n\t\t\t}\n\n\t\t\tfunction activateAction( action ) {\n\n\t\t\t\tconst clip = action.getClip();\n\t\t\t\tconst settings = baseActions[ clip.name ] || additiveActions[ clip.name ];\n\t\t\t\tsetWeight( action, settings.weight );\n\t\t\t\taction.play();\n\n\t\t\t}\n\n\t\t\tfunction modifyTimeScale( speed ) {\n\n\t\t\t\tmixer.timeScale = speed;\n\n\t\t\t}\n\n\t\t\tfunction prepareCrossFade( startAction, endAction, duration ) {\n\n\t\t\t\t// If the current action is 'idle', execute the crossfade immediately;\n\t\t\t\t// else wait until the current action has finished its current loop\n\n\t\t\t\tif ( currentBaseAction === 'idle' || ! startAction || ! endAction ) {\n\n\t\t\t\t\texecuteCrossFade( startAction, endAction, duration );\n\n\t\t\t\t} else {\n\n\t\t\t\t\tsynchronizeCrossFade( startAction, endAction, duration );\n\n\t\t\t\t}\n\n\t\t\t\t// Update control colors\n\n\t\t\t\tif ( endAction ) {\n\n\t\t\t\t\tconst clip = endAction.getClip();\n\t\t\t\t\tcurrentBaseAction = clip.name;\n\n\t\t\t\t} else {\n\n\t\t\t\t\tcurrentBaseAction = 'None';\n\n\t\t\t\t}\n\n\t\t\t\tcrossFadeControls.forEach( function ( control ) {\n\n\t\t\t\t\tconst name = control.property;\n\n\t\t\t\t\tif ( name === currentBaseAction ) {\n\n\t\t\t\t\t\tcontrol.setActive();\n\n\t\t\t\t\t} else {\n\n\t\t\t\t\t\tcontrol.setInactive();\n\n\t\t\t\t\t}\n\n\t\t\t\t} );\n\n\t\t\t}\n\n\t\t\tfunction synchronizeCrossFade( startAction, endAction, duration ) {\n\n\t\t\t\tmixer.addEventListener( 'loop', onLoopFinished );\n\n\t\t\t\tfunction onLoopFinished( event ) {\n\n\t\t\t\t\tif ( event.action === startAction ) {\n\n\t\t\t\t\t\tmixer.removeEventListener( 'loop', onLoopFinished );\n\n\t\t\t\t\t\texecuteCrossFade( startAction, endAction, duration );\n\n\t\t\t\t\t}\n\n\t\t\t\t}\n\n\t\t\t}\n\n\t\t\tfunction executeCrossFade( startAction, endAction, duration ) {\n\n\t\t\t\t// Not only the start action, but also the end action must get a weight of 1 before fading\n\t\t\t\t// (concerning the start action this is already guaranteed in this place)\n\n\t\t\t\tif ( endAction ) {\n\n\t\t\t\t\tsetWeight( endAction, 1 );\n\t\t\t\t\tendAction.time = 0;\n\n\t\t\t\t\tif ( startAction ) {\n\n\t\t\t\t\t\t// Crossfade with warping\n\n\t\t\t\t\t\tstartAction.crossFadeTo( endAction, duration, true );\n\n\t\t\t\t\t} else {\n\n\t\t\t\t\t\t// Fade in\n\n\t\t\t\t\t\tendAction.fadeIn( duration );\n\n\t\t\t\t\t}\n\n\t\t\t\t} else {\n\n\t\t\t\t\t// Fade out\n\n\t\t\t\t\tstartAction.fadeOut( duration );\n\n\t\t\t\t}\n\n\t\t\t}\n\n\t\t\t// This function is needed, since animationAction.crossFadeTo() disables its start action and sets\n\t\t\t// the start action's timeScale to ((start animation's duration) / (end animation's duration))\n\n\t\t\tfunction setWeight( action, weight ) {\n\n\t\t\t\taction.enabled = true;\n\t\t\t\taction.setEffectiveTimeScale( 1 );\n\t\t\t\taction.setEffectiveWeight( weight );\n\n\t\t\t}\n\n\t\t\tfunction onWindowResize() {\n\n\t\t\t\tcamera.aspect = window.innerWidth / window.innerHeight;\n\t\t\t\tcamera.updateProjectionMatrix();\n\n\t\t\t\trenderer.setSize( window.innerWidth, window.innerHeight );\n\n\t\t\t}\n\n\t\t\tfunction animate() {\n\n\t\t\t\t// Render loop\n\n\t\t\t\trequestAnimationFrame( animate );\n\n\t\t\t\tfor ( let i = 0; i !== numAnimations; ++ i ) {\n\n\t\t\t\t\tconst action = allActions[ i ];\n\t\t\t\t\tconst clip = action.getClip();\n\t\t\t\t\tconst settings = baseActions[ clip.name ] || additiveActions[ clip.name ];\n\t\t\t\t\tsettings.weight = action.getEffectiveWeight();\n\n\t\t\t\t}\n\n\t\t\t\t// Get the time elapsed since the last frame, used for mixer update\n\n\t\t\t\tvar mixerUpdateDelta = clock.getDelta();\n\n\t\t\t\t// Update the animation mixer, the stats panel, and render this frame\n\n\t\t\t\tmixer.update( mixerUpdateDelta );\n\n\t\t\t\t//stats.update();\n\n\t\t\t\trenderer.render( scene, camera );\n\n\t\t\t}\n}"}}

{"contentType":"lapbin-threejs","codes":{"html":"\t\n\n\t\t","css":null,"js":"function main($,THREE,threex,datgui) {\n\n\t\t //import * as THREE from '../build/three.module.js';\n\n\t\t\t//import Stats from './jsm/libs/stats.module.js';\n\n\t\t\t//import { OrbitControls } from './jsm/controls/OrbitControls.js';\n \t\t\tvar OrbitControls = threex.controls.OrbitControls;\n\t\t\t//import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';\n \t\t\tvar GLTFLoader = threex.loaders.GLTFLoader;\n\t\t\t//import { DRACOLoader } from './jsm/loaders/DRACOLoader.js';\n\t\t\tvar DRACOLoader = threex.loaders.DRACOLoader;\n\t\t\tvar scene, camera, dirLight, stats;\n\t\t\tvar renderer, mixer, controls;\n\n\t\t\tvar clock = new THREE.Clock();\n\t\t\tvar container = document.getElementById( 'container' );\n\n\t\t\t//stats = new Stats();\n\t\t\t//container.appendChild( stats.dom );\n\n\t\t\trenderer = new THREE.WebGLRenderer( { antialias: true } );\n\t\t\trenderer.setPixelRatio( window.devicePixelRatio );\n\t\t\trenderer.setSize( window.innerWidth, window.innerHeight );\n\t\t\trenderer.outputEncoding = THREE.sRGBEncoding;\n\t\t\tcontainer.appendChild( renderer.domElement );\n\n\t\t\tscene = new THREE.Scene();\n\t\t\tscene.background = new THREE.Color( 0xbfe3dd );\n\n\t\t\tcamera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 100 );\n\t\t\tcamera.position.set( 5, 2, 8 );\n\n\t\t\tcontrols = new OrbitControls( camera, renderer.domElement );\n\t\t\tcontrols.target.set( 0, 0.5, 0 );\n\t\t\tcontrols.update();\n\t\t\tcontrols.enablePan = false;\n\t\t\tcontrols.enableDamping = true;\n\n\t\t\tscene.add( new THREE.HemisphereLight( 0xffffff, 0x000000, 0.4 ) );\n\n\t\t\tdirLight = new THREE.DirectionalLight( 0xffffff, 1 );\n\t\t\tdirLight.position.set( 5, 2, 8 );\n\t\t\tscene.add( dirLight );\n\n\t\t\t// envmap\n\t\t\tvar path = '/assets/lapbin/textures/cube/Park2/';\n\t\t\tvar format = '.jpg';\n\t\t\tvar envMap = new THREE.CubeTextureLoader().load( [\n\t\t\t\tpath + 'posx' + format, path + 'negx' + format,\n\t\t\t\tpath + 'posy' + format, path + 'negy' + format,\n\t\t\t\tpath + 'posz' + format, path + 'negz' + format\n\t\t\t] );\n\n\t\t\tvar dracoLoader = new DRACOLoader();\n\t\t\tdracoLoader.setDecoderPath( '/assets/lapbin/js/libs/draco/gltf/' );\n\n\t\t\tvar loader = new GLTFLoader();\n\t\t\tloader.setDRACOLoader( dracoLoader );\n\t\t\tloader.load( '/assets/lapbin/models/gltf/LittlestTokyo.glb', function ( gltf ) {\n\n\t\t\t\tvar model = gltf.scene;\n\t\t\t\tmodel.position.set( 1, 1, 0 );\n\t\t\t\tmodel.scale.set( 0.01, 0.01, 0.01 );\n\t\t\t\tmodel.traverse( function ( child ) {\n\n\t\t\t\t\tif ( child.isMesh ) child.material.envMap = envMap;\n\n\t\t\t\t} );\n\n\t\t\t\tscene.add( model );\n\n\t\t\t\tmixer = new THREE.AnimationMixer( model );\n\t\t\t\tmixer.clipAction( gltf.animations[ 0 ] ).play();\n\n\t\t\t\tanimate();\n\n\t\t\t}, undefined, function ( e ) {\n\n\t\t\t\tconsole.error( e );\n\n\t\t\t} );\n\n\n\t\t\twindow.onresize = function () {\n\n\t\t\t\tcamera.aspect = window.innerWidth / window.innerHeight;\n\t\t\t\tcamera.updateProjectionMatrix();\n\n\t\t\t\trenderer.setSize( window.innerWidth, window.innerHeight );\n\n\t\t\t};\n\n\n\t\t\tfunction animate() {\n\n\t\t\t\trequestAnimationFrame( animate );\n\n\t\t\t\tvar delta = clock.getDelta();\n\n\t\t\t\tmixer.update( delta );\n\n\t\t\t\tcontrols.update();\n\n\t\t\t\t//stats.update();\n\n\t\t\t\trenderer.render( scene, camera );\n\n\t\t\t}\n\n\n}"}}

{"contentType":"lapbin-threejs","codes":{"html":"\t\n\t\n\t\n","css":"body {\n margin: 0;\n background-color: #000;\n color: #fff;\n font-family: Monospace;\n font-size: 13px;\n line-height: 24px;\n overscroll-behavior: none;\n}\n#overlay {\n position: absolute;\n font-size: 16px;\n z-index: 2;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n background: rgba(0,0,0,0.7);\n}\n#overlay button {\n background: transparent;\n border: 0;\n border: 1px solid rgb(255, 255, 255);\n border-radius: 4px;\n color: #ffffff;\n padding: 12px 18px;\n text-transform: uppercase;\n cursor: pointer;\n}","js":"function main($,THREE,threex,datgui) {\n \t\t//import * as THREE from '../build/three.module.js';\n\n\t\t//import { OrbitControls } from './jsm/controls/OrbitControls.js';\n\t\tvar OrbitControls = threex.controls.OrbitControls;\n\t\tvar scene, camera, renderer, clock;\n\n\t\tvar objects = [];\n\n\t\tvar speed = 2.5;\n\t\tvar height = 3;\n\t\tvar offset = 0.5;\n\n\t\tvar startButton = document.getElementById( 'startButton' );\n\t\tstartButton.addEventListener( 'click', init );\n\n\t\tfunction init() {\n\n\t\t\tvar overlay = document.getElementById( 'overlay' );\n\t\t\toverlay.remove();\n\n\t\t\tvar container = document.getElementById( 'container' );\n\n\t\t\tscene = new THREE.Scene();\n\n\t\t\tclock = new THREE.Clock();\n\n\t\t\t//\n\n\t\t\tcamera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 100 );\n\t\t\tcamera.position.set( 7, 3, 7 );\n\n\t\t\t// lights\n\n\t\t\tvar ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );\n\t\t\tscene.add( ambientLight );\n\n\t\t\tvar directionalLight = new THREE.DirectionalLight( 0xffffff, 0.7 );\n\t\t\tdirectionalLight.position.set( 0, 5, 5 );\n\t\t\tscene.add( directionalLight );\n\n\t\t\tvar d = 5;\n\t\t\tdirectionalLight.castShadow = true;\n\t\t\tdirectionalLight.shadow.camera.left = - d;\n\t\t\tdirectionalLight.shadow.camera.right = d;\n\t\t\tdirectionalLight.shadow.camera.top = d;\n\t\t\tdirectionalLight.shadow.camera.bottom = - d;\n\n\t\t\tdirectionalLight.shadow.camera.near = 1;\n\t\t\tdirectionalLight.shadow.camera.far = 20;\n\n\t\t\tdirectionalLight.shadow.mapSize.x = 1024;\n\t\t\tdirectionalLight.shadow.mapSize.y = 1024;\n\n\t\t\t// audio\n\n\t\t\tvar audioLoader = new THREE.AudioLoader();\n\n\t\t\tvar listener = new THREE.AudioListener();\n\t\t\tcamera.add( listener );\n\n\t\t\t// floor\n\n\t\t\tvar floorGeometry = new THREE.PlaneBufferGeometry( 10, 10 );\n\t\t\tvar floorMaterial = new THREE.MeshLambertMaterial( { color: 0x4676b6 } );\n\n\t\t\tvar floor = new THREE.Mesh( floorGeometry, floorMaterial );\n\t\t\tfloor.rotation.x = Math.PI * - 0.5;\n\t\t\tfloor.receiveShadow = true;\n\t\t\tscene.add( floor );\n\n\t\t\t// objects\n\n\t\t\tvar count = 5;\n\t\t\tvar radius = 3;\n\n\t\t\tvar ballGeometry = new THREE.SphereBufferGeometry( 0.3, 32, 16 );\n\t\t\tballGeometry.translate( 0, 0.3, 0 );\n\t\t\tvar ballMaterial = new THREE.MeshLambertMaterial( { color: 0xcccccc } );\n\n\t\t\t// create objects when audio buffer is loaded\n\n\t\t\taudioLoader.load( '/assets/lapbin/sounds/ping_pong.mp3', function ( buffer ) {\n\n\t\t\t\tfor ( var i = 0; i < count; i ++ ) {\n\n\t\t\t\t\tvar s = i / count * Math.PI * 2;\n\n\t\t\t\t\tvar ball = new THREE.Mesh( ballGeometry, ballMaterial );\n\t\t\t\t\tball.castShadow = true;\n\t\t\t\t\tball.userData.down = false;\n\n\t\t\t\t\tball.position.x = radius * Math.cos( s );\n\t\t\t\t\tball.position.z = radius * Math.sin( s );\n\n\t\t\t\t\tvar audio = new THREE.PositionalAudio( listener );\n\t\t\t\t\taudio.setBuffer( buffer );\n\t\t\t\t\tball.add( audio );\n\n\t\t\t\t\tscene.add( ball );\n\t\t\t\t\tobjects.push( ball );\n\n\t\t\t\t}\n\n\t\t\t\tanimate();\n\n\t\t\t} );\n\n\t\t\t//\n\n\t\t\trenderer = new THREE.WebGLRenderer( { antialias: true } );\n\t\t\trenderer.shadowMap.enabled = true;\n\t\t\trenderer.setSize( window.innerWidth, window.innerHeight );\n\t\t\trenderer.setClearColor( 0x000000 );\n\t\t\trenderer.setPixelRatio( window.devicePixelRatio );\n\t\t\tcontainer.appendChild( renderer.domElement );\n\n\t\t\t//\n\n\t\t\tvar controls = new OrbitControls( camera, renderer.domElement );\n\t\t\tcontrols.minDistance = 1;\n\t\t\tcontrols.maxDistance = 25;\n\n\t\t\t//\n\n\t\t\twindow.addEventListener( 'resize', onWindowResize, false );\n\n\t\t}\n\n\t\tfunction onWindowResize() {\n\n\t\t\tcamera.aspect = window.innerWidth / window.innerHeight;\n\t\t\tcamera.updateProjectionMatrix();\n\n\t\t\trenderer.setSize( window.innerWidth, window.innerHeight );\n\n\t\t}\n\n\t\tfunction animate() {\n\n\t\t\trequestAnimationFrame( animate );\n\n\t\t\trender();\n\n\t\t}\n\n\t\tfunction render() {\n\n\t\t\tvar time = clock.getElapsedTime();\n\n\t\t\tfor ( var i = 0; i < objects.length; i ++ ) {\n\n\t\t\t\tvar ball = objects[ i ];\n\n\t\t\t\tvar previousHeight = ball.position.y;\n\t\t\t\tball.position.y = Math.abs( Math.sin( i * offset + ( time * speed ) ) * height );\n\n\t\t\t\tif ( ball.position.y < previousHeight ) {\n\n\t\t\t\t\tball.userData.down = true;\n\n\t\t\t\t} else {\n\n\t\t\t\t\tif ( ball.userData.down === true ) {\n\n\t\t\t\t\t\t// ball changed direction from down to up\n\n\t\t\t\t\t\tvar audio = ball.children[ 0 ];\n\t\t\t\t\t\taudio.play(); // play audio with perfect timing when ball hits the surface\n\t\t\t\t\t\tball.userData.down = false;\n\n\t\t\t\t\t}\n\n\t\t\t\t}\n\n\t\t\t}\n\n\t\t\trenderer.render( scene, camera );\n\n\t\t}\n}"}}

{"contentType":"lapbin-threejs","codes":{"html":"\t\n\t\t","css":"body {\n\tmargin: 0;\n\tbackground-color: #000;\n\tcolor: #fff;\n\tfont-family: Monospace;\n\tfont-size: 13px;\n\tline-height: 24px;\n\toverscroll-behavior: none;\n}\n\na {\n\tcolor: #ff0;\n\ttext-decoration: none;\n}\n\na:hover {\n\ttext-decoration: underline;\n}\n\nbutton {\n\tcursor: pointer;\n\ttext-transform: uppercase;\n}\n\ncanvas {\n\tdisplay: block;\n}\n\n#info {\n\tposition: absolute;\n\ttop: 0px;\n\twidth: 100%;\n\tpadding: 10px;\n\tbox-sizing: border-box;\n\ttext-align: center;\n\t-moz-user-select: none;\n\t-webkit-user-select: none;\n\t-ms-user-select: none;\n\tuser-select: none;\n\tpointer-events: none;\n\tz-index: 1; /* TODO Solve this in HTML */\n}\n#overlay {\n position: absolute;\n font-size: 16px;\n z-index: 2;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n background: rgba(0,0,0,0.7);\n}\n#overlay button {\n background: transparent;\n border: 0;\n border: 1px solid rgb(255, 255, 255);\n border-radius: 4px;\n color: #ffffff;\n padding: 12px 18px;\n text-transform: uppercase;\n cursor: pointer;\n}","js":"function main($,THREE,threex,datgui) {\n\t\t\t//import * as THREE from '../build/three.module.js';\n\n\t\t\t//import { GUI } from './jsm/libs/dat.gui.module.js';\n\t\t\tvar GUI = datgui.GUI;\n\t\t\t//import { FirstPersonControls } from './jsm/controls/FirstPersonControls.js';\n\t\t\tvar FirstPersonControls = threex.controls.FirstPersonControls;\n\t\t\tvar camera, controls, scene, renderer, light;\n\n\t\t\tvar material1, material2, material3;\n\n\t\t\tvar analyser1, analyser2, analyser3;\n\n\t\t\tvar clock = new THREE.Clock();\n\n\t\t\tvar startButton = document.getElementById( 'startButton' );\n\t\t\tstartButton.addEventListener( 'click', init );\n\n\t\t\tfunction init() {\n\n\t\t\t\tvar overlay = document.getElementById( 'overlay' );\n\t\t\t\toverlay.remove();\n\n\t\t\t\tcamera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );\n\t\t\t\tcamera.position.set( 0, 25, 0 );\n\n\t\t\t\tvar listener = new THREE.AudioListener();\n\t\t\t\tcamera.add( listener );\n\n\t\t\t\tscene = new THREE.Scene();\n\t\t\t\tscene.fog = new THREE.FogExp2( 0x000000, 0.0025 );\n\n\t\t\t\tlight = new THREE.DirectionalLight( 0xffffff );\n\t\t\t\tlight.position.set( 0, 0.5, 1 ).normalize();\n\t\t\t\tscene.add( light );\n\n\t\t\t\tvar sphere = new THREE.SphereBufferGeometry( 20, 32, 16 );\n\n\t\t\t\tmaterial1 = new THREE.MeshPhongMaterial( { color: 0xffaa00, flatShading: true, shininess: 0 } );\n\t\t\t\tmaterial2 = new THREE.MeshPhongMaterial( { color: 0xff2200, flatShading: true, shininess: 0 } );\n\t\t\t\tmaterial3 = new THREE.MeshPhongMaterial( { color: 0x6622aa, flatShading: true, shininess: 0 } );\n\n\t\t\t\t// sound spheres\n\n\t\t\t\tvar audioLoader = new THREE.AudioLoader();\n\n\t\t\t\tvar mesh1 = new THREE.Mesh( sphere, material1 );\n\t\t\t\tmesh1.position.set( - 250, 30, 0 );\n\t\t\t\tscene.add( mesh1 );\n\n\t\t\t\tvar sound1 = new THREE.PositionalAudio( listener );\n\t\t\t\taudioLoader.load( '/assets/lapbin/sounds/358232_j_s_song.ogg', function ( buffer ) {\n\n\t\t\t\t\tsound1.setBuffer( buffer );\n\t\t\t\t\tsound1.setRefDistance( 20 );\n\t\t\t\t\tsound1.play();\n\n\t\t\t\t} );\n\t\t\t\tmesh1.add( sound1 );\n\n\t\t\t\t//\n\n\t\t\t\tvar mesh2 = new THREE.Mesh( sphere, material2 );\n\t\t\t\tmesh2.position.set( 250, 30, 0 );\n\t\t\t\tscene.add( mesh2 );\n\n\t\t\t\tvar sound2 = new THREE.PositionalAudio( listener );\n\t\t\t\taudioLoader.load( '/assets/lapbin/sounds/376737_Skullbeatz___Bad_Cat_Maste.ogg', function ( buffer ) {\n\n\t\t\t\t\tsound2.setBuffer( buffer );\n\t\t\t\t\tsound2.setRefDistance( 20 );\n\t\t\t\t\tsound2.play();\n\n\t\t\t\t} );\n\t\t\t\tmesh2.add( sound2 );\n\n\t\t\t\t//\n\n\t\t\t\tvar mesh3 = new THREE.Mesh( sphere, material3 );\n\t\t\t\tmesh3.position.set( 0, 30, - 250 );\n\t\t\t\tscene.add( mesh3 );\n\n\t\t\t\tvar sound3 = new THREE.PositionalAudio( listener );\n\t\t\t\tvar oscillator = listener.context.createOscillator();\n\t\t\t\toscillator.type = 'sine';\n\t\t\t\toscillator.frequency.setValueAtTime( 144, sound3.context.currentTime );\n\t\t\t\toscillator.start( 0 );\n\t\t\t\tsound3.setNodeSource( oscillator );\n\t\t\t\tsound3.setRefDistance( 20 );\n\t\t\t\tsound3.setVolume( 0.5 );\n\t\t\t\tmesh3.add( sound3 );\n\n\t\t\t\t// analysers\n\n\t\t\t\tanalyser1 = new THREE.AudioAnalyser( sound1, 32 );\n\t\t\t\tanalyser2 = new THREE.AudioAnalyser( sound2, 32 );\n\t\t\t\tanalyser3 = new THREE.AudioAnalyser( sound3, 32 );\n\n\t\t\t\t// global ambient audio\n\n\t\t\t\tvar sound4 = new THREE.Audio( listener );\n\t\t\t\taudioLoader.load( '/assets/lapbin/sounds/Project_Utopia.ogg', function ( buffer ) {\n\n\t\t\t\t\tsound4.setBuffer( buffer );\n\t\t\t\t\tsound4.setLoop( true );\n\t\t\t\t\tsound4.setVolume( 0.5 );\n\t\t\t\t\tsound4.play();\n\n\t\t\t\t} );\n\n\t\t\t\t// ground\n\n\t\t\t\tvar helper = new THREE.GridHelper( 1000, 10, 0x444444, 0x444444 );\n\t\t\t\thelper.position.y = 0.1;\n\t\t\t\tscene.add( helper );\n\n\t\t\t\t//\n\n\t\t\t\tvar SoundControls = function () {\n\n\t\t\t\t\tthis.master = listener.getMasterVolume();\n\t\t\t\t\tthis.firstSphere = sound1.getVolume();\n\t\t\t\t\tthis.secondSphere = sound2.getVolume();\n\t\t\t\t\tthis.thirdSphere = sound3.getVolume();\n\t\t\t\t\tthis.Ambient = sound4.getVolume();\n\n\t\t\t\t};\n\n\t\t\t\tvar GeneratorControls = function () {\n\n\t\t\t\t\tthis.frequency = oscillator.frequency.value;\n\t\t\t\t\tthis.wavetype = oscillator.type;\n\n\t\t\t\t};\n\n\t\t\t\tvar gui = new GUI();\n\t\t\t\tvar soundControls = new SoundControls();\n\t\t\t\tvar generatorControls = new GeneratorControls();\n\t\t\t\tvar volumeFolder = gui.addFolder( 'sound volume' );\n\t\t\t\tvar generatorFolder = gui.addFolder( 'sound generator' );\n\n\t\t\t\tvolumeFolder.add( soundControls, 'master' ).min( 0.0 ).max( 1.0 ).step( 0.01 ).onChange( function () {\n\n\t\t\t\t\tlistener.setMasterVolume( soundControls.master );\n\n\t\t\t\t} );\n\t\t\t\tvolumeFolder.add( soundControls, 'firstSphere' ).min( 0.0 ).max( 1.0 ).step( 0.01 ).onChange( function () {\n\n\t\t\t\t\tsound1.setVolume( soundControls.firstSphere );\n\n\t\t\t\t} );\n\t\t\t\tvolumeFolder.add( soundControls, 'secondSphere' ).min( 0.0 ).max( 1.0 ).step( 0.01 ).onChange( function () {\n\n\t\t\t\t\tsound2.setVolume( soundControls.secondSphere );\n\n\t\t\t\t} );\n\n\t\t\t\tvolumeFolder.add( soundControls, 'thirdSphere' ).min( 0.0 ).max( 1.0 ).step( 0.01 ).onChange( function () {\n\n\t\t\t\t\tsound3.setVolume( soundControls.thirdSphere );\n\n\t\t\t\t} );\n\t\t\t\tvolumeFolder.add( soundControls, 'Ambient' ).min( 0.0 ).max( 1.0 ).step( 0.01 ).onChange( function () {\n\n\t\t\t\t\tsound4.setVolume( soundControls.Ambient );\n\n\t\t\t\t} );\n\t\t\t\tvolumeFolder.open();\n\t\t\t\tgeneratorFolder.add( generatorControls, 'frequency' ).min( 50.0 ).max( 5000.0 ).step( 1.0 ).onChange( function () {\n\n\t\t\t\t\toscillator.frequency.setValueAtTime( generatorControls.frequency, listener.context.currentTime );\n\n\t\t\t\t} );\n\t\t\t\tgeneratorFolder.add( generatorControls, 'wavetype', [ 'sine', 'square', 'sawtooth', 'triangle' ] ).onChange( function () {\n\n\t\t\t\t\toscillator.type = generatorControls.wavetype;\n\n\t\t\t\t} );\n\n\t\t\t\tgeneratorFolder.open();\n\n\t\t\t\t//\n\n\t\t\t\trenderer = new THREE.WebGLRenderer( { antialias: true } );\n\t\t\t\trenderer.setPixelRatio( window.devicePixelRatio );\n\t\t\t\trenderer.setSize( window.innerWidth, window.innerHeight );\n\t\t\t\tdocument.body.appendChild( renderer.domElement );\n\n\t\t\t\t//\n\n\t\t\t\tcontrols = new FirstPersonControls( camera, renderer.domElement );\n\n\t\t\t\tcontrols.movementSpeed = 70;\n\t\t\t\tcontrols.lookSpeed = 0.05;\n\t\t\t\tcontrols.noFly = true;\n\t\t\t\tcontrols.lookVertical = false;\n\n\t\t\t\t//\n\n\t\t\t\twindow.addEventListener( 'resize', onWindowResize, false );\n\n\t\t\t\tanimate();\n\n\t\t\t}\n\n\t\t\tfunction onWindowResize() {\n\n\t\t\t\tcamera.aspect = window.innerWidth / window.innerHeight;\n\t\t\t\tcamera.updateProjectionMatrix();\n\n\t\t\t\trenderer.setSize( window.innerWidth, window.innerHeight );\n\n\t\t\t\tcontrols.handleResize();\n\n\t\t\t}\n\n\t\t\tfunction animate() {\n\n\t\t\t\trequestAnimationFrame( animate );\n\t\t\t\trender();\n\n\t\t\t}\n\n\n\t\t\tfunction render() {\n\n\t\t\t\tvar delta = clock.getDelta();\n\n\t\t\t\tcontrols.update( delta );\n\n\t\t\t\tmaterial1.emissive.b = analyser1.getAverageFrequency() / 256;\n\t\t\t\tmaterial2.emissive.b = analyser2.getAverageFrequency() / 256;\n\t\t\t\tmaterial3.emissive.b = analyser3.getAverageFrequency() / 256;\n\n\t\t\t\trenderer.render( scene, camera );\n\n\t\t\t}\n\n\n\n\n\n}"}}

{"contentType":"lapbin-threejs","codes":{"html":"\n\t\n\t","css":null,"js":"function main($,THREE,threex,datgui) {\n\n\t\t//import * as THREE from '../build/three.module.js';\n\n\t\t//import { OrbitControls } from './jsm/controls/OrbitControls.js';\n \t\tvar OrbitControls = threex.controls.OrbitControls;\n\t\t//import { PositionalAudioHelper } from './jsm/helpers/PositionalAudioHelper.js';\n \t\tvar PositionalAudioHelper = threex.helpers.PositionalAudioHelper;\n\t\t//import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';\n\t\tvar GLTFLoader = threex.loaders.GLTFLoader;\n\t\tvar scene, camera, renderer;\n\n\t\tvar startButton = document.getElementById( 'startButton' );\n\t\tstartButton.addEventListener( 'click', init );\n\n\t\tfunction init() {\n\n\t\t\tvar overlay = document.getElementById( 'overlay' );\n\t\t\toverlay.remove();\n\n\t\t\tvar container = document.getElementById( 'container' );\n\n\t\t\t//\n\n\t\t\tcamera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 100 );\n\t\t\tcamera.position.set( 3, 2, 3 );\n\n\t\t\tvar reflectionCube = new THREE.CubeTextureLoader()\n\t\t\t\t.setPath( '/assets/lapbin/textures/cube/SwedishRoyalCastle/' )\n\t\t\t\t.load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );\n\n\t\t\tscene = new THREE.Scene();\n\t\t\tscene.background = new THREE.Color( 0xa0a0a0 );\n\t\t\tscene.fog = new THREE.Fog( 0xa0a0a0, 2, 20 );\n\n\t\t\t//\n\n\t\t\tvar hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );\n\t\t\themiLight.position.set( 0, 20, 0 );\n\t\t\tscene.add( hemiLight );\n\n\t\t\tvar dirLight = new THREE.DirectionalLight( 0xffffff );\n\t\t\tdirLight.position.set( 5, 5, 0 );\n\t\t\tdirLight.castShadow = true;\n\t\t\tdirLight.shadow.camera.top = 1;\n\t\t\tdirLight.shadow.camera.bottom = - 1;\n\t\t\tdirLight.shadow.camera.left = - 1;\n\t\t\tdirLight.shadow.camera.right = 1;\n\t\t\tdirLight.shadow.camera.near = 0.1;\n\t\t\tdirLight.shadow.camera.far = 20;\n\t\t\tscene.add( dirLight );\n\n\t\t\t// scene.add( new CameraHelper( dirLight.shadow.camera ) );\n\n\t\t\t//\n\n\t\t\tvar mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 50, 50 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );\n\t\t\tmesh.rotation.x = - Math.PI / 2;\n\t\t\tmesh.receiveShadow = true;\n\t\t\tscene.add( mesh );\n\n\t\t\tvar grid = new THREE.GridHelper( 50, 50, 0x888888, 0x888888 );\n\t\t\tscene.add( grid );\n\n\t\t\t//\n\n\t\t\tvar listener = new THREE.AudioListener();\n\t\t\tcamera.add( listener );\n\n\t\t\tvar audioElement = document.getElementById( 'music' );\n\t\t\taudioElement.play();\n\n\t\t\tvar positionalAudio = new THREE.PositionalAudio( listener );\n\t\t\tpositionalAudio.setMediaElementSource( audioElement );\n\t\t\tpositionalAudio.setRefDistance( 1 );\n\t\t\tpositionalAudio.setDirectionalCone( 180, 230, 0.1 );\n\n\t\t\tvar helper = new PositionalAudioHelper( positionalAudio, 0.1 );\n\t\t\tpositionalAudio.add( helper );\n\n\t\t\t//\n\n\t\t\tvar gltfLoader = new GLTFLoader();\n\t\t\tgltfLoader.load( '/assets/lapbin/models/gltf/BoomBox/glTF-Binary/BoomBox.glb', function ( gltf ) {\n\n\t\t\t\tvar boomBox = gltf.scene;\n\t\t\t\tboomBox.position.set( 0, 0.2, 0 );\n\t\t\t\tboomBox.scale.set( 20, 20, 20 );\n\n\t\t\t\tboomBox.traverse( function ( object ) {\n\n\t\t\t\t\tif ( object.isMesh ) {\n\n\t\t\t\t\t\tobject.material.envMap = reflectionCube;\n\t\t\t\t\t\tobject.geometry.rotateY( - Math.PI );\n\t\t\t\t\t\tobject.castShadow = true;\n\n\t\t\t\t\t}\n\n\t\t\t\t} );\n\n\t\t\t\tboomBox.add( positionalAudio );\n\t\t\t\tscene.add( boomBox );\n\t\t\t\tanimate();\n\n\t\t\t} );\n\n\t\t\t// sound is damped behind this wall\n\n\t\t\tvar wallGeometry = new THREE.BoxBufferGeometry( 2, 1, 0.1 );\n\t\t\tvar wallMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, transparent: true, opacity: 0.5 } );\n\n\t\t\tvar wall = new THREE.Mesh( wallGeometry, wallMaterial );\n\t\t\twall.position.set( 0, 0.5, - 0.5 );\n\t\t\tscene.add( wall );\n\n\n\t\t\t//\n\n\t\t\trenderer = new THREE.WebGLRenderer( { antialias: true } );\n\t\t\trenderer.setSize( window.innerWidth, window.innerHeight );\n\t\t\trenderer.setPixelRatio( window.devicePixelRatio );\n\t\t\trenderer.outputEncoding = THREE.sRGBEncoding;\n\t\t\trenderer.shadowMap.enabled = true;\n\t\t\tcontainer.appendChild( renderer.domElement );\n\n\t\t\t//\n\n\t\t\tvar controls = new OrbitControls( camera, renderer.domElement );\n\t\t\tcontrols.target.set( 0, 0.1, 0 );\n\t\t\tcontrols.update();\n\t\t\tcontrols.minDistance = 0.5;\n\t\t\tcontrols.maxDistance = 10;\n\t\t\tcontrols.maxPolarAngle = 0.5 * Math.PI;\n\n\t\t\t//\n\n\t\t\twindow.addEventListener( 'resize', onWindowResize, false );\n\n\t\t}\n\n\t\tfunction onWindowResize() {\n\n\t\t\tcamera.aspect = window.innerWidth / window.innerHeight;\n\t\t\tcamera.updateProjectionMatrix();\n\n\t\t\trenderer.setSize( window.innerWidth, window.innerHeight );\n\n\t\t}\n\n\t\tfunction animate() {\n\n\t\t\trequestAnimationFrame( animate );\n\t\t\trenderer.render( scene, camera );\n\n\t\t}\n\n\n}"}}

{"contentType":"lapbin-threejs","codes":{"html":null,"css":"body {\n\tmargin: 0;\n\tbackground-color: #000;\n\tcolor: #fff;\n\tfont-family: Monospace;\n\tfont-size: 13px;\n\tline-height: 24px;\n\toverscroll-behavior: none;\n}\n\na {\n\tcolor: #ff0;\n\ttext-decoration: none;\n}\n\na:hover {\n\ttext-decoration: underline;\n}\n\nbutton {\n\tcursor: pointer;\n\ttext-transform: uppercase;\n}\n\ncanvas {\n\tdisplay: block;\n}\n\n#info {\n\tposition: absolute;\n\ttop: 0px;\n\twidth: 100%;\n\tpadding: 10px;\n\tbox-sizing: border-box;\n\ttext-align: center;\n\t-moz-user-select: none;\n\t-webkit-user-select: none;\n\t-ms-user-select: none;\n\tuser-select: none;\n\tpointer-events: none;\n\tz-index: 1; /* TODO Solve this in HTML */\n}\t\nsvg {\n\t\t\t\tdisplay: block;\n\t\t\t}","js":"function main($,THREE,threex,datgui) {\n\t\t\t//import * as THREE from '../build/three.module.js';\n\n\t\t\t//import Stats from './jsm/libs/stats.module.js';\n\n\t\t\t//import { SVGRenderer, SVGObject } from './jsm/renderers/SVGRenderer.js';\n \t\t\tvar SVGRenderer = threex.renderers.SVGRenderer;\n\t\t\tvar SVGObject = threex.renderers.SVGRenderer.SVGObject;\n\t\t\tvar camera, scene, renderer, stats;\n\n\t\t\tvar mesh, group;\n\n\t\t\tinit();\n\t\t\tanimate();\n\n\t\t\tfunction init() {\n\n\t\t\t\tcamera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );\n\t\t\t\tcamera.position.z = 500;\n\n\t\t\t\tscene = new THREE.Scene();\n\t\t\t\tscene.background = new THREE.Color( 0xf0f0f0 );\n\n\t\t\t\t// QRCODE\n\n\t\t\t\tvar loader = new THREE.BufferGeometryLoader();\n\t\t\t\tloader.load( '/assets/lapbin/models/json/QRCode_buffergeometry.json', function ( geometry ) {\n\n\t\t\t\t\tmesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { vertexColors: true } ) );\n\t\t\t\t\tmesh.scale.x = mesh.scale.y = mesh.scale.z = 2;\n\t\t\t\t\tscene.add( mesh );\n\n\t\t\t\t} );\n\n\t\t\t\t// CUBES\n\n\t\t\t\tvar cube = new THREE.BoxBufferGeometry( 100, 100, 100 );\n\n\t\t\t\tmesh = new THREE.Mesh( cube, new THREE.MeshBasicMaterial( { color: 0x0000ff, opacity: 0.5, transparent: true } ) );\n\t\t\t\tmesh.position.x = 500;\n\t\t\t\tmesh.rotation.x = Math.random();\n\t\t\t\tmesh.rotation.y = Math.random();\n\t\t\t\tmesh.scale.x = mesh.scale.y = mesh.scale.z = 2;\n\t\t\t\tscene.add( mesh );\n\n\t\t\t\tmesh = new THREE.Mesh( cube, new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) );\n\t\t\t\tmesh.position.x = 500;\n\t\t\t\tmesh.position.y = 500;\n\t\t\t\tmesh.rotation.x = Math.random();\n\t\t\t\tmesh.rotation.y = Math.random();\n\t\t\t\tmesh.scale.x = mesh.scale.y = mesh.scale.z = 2;\n\t\t\t\tscene.add( mesh );\n\n\t\t\t\t// PLANE\n\n\t\t\t\tmesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 100, 100 ), new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, side: THREE.DoubleSide } ) );\n\t\t\t\tmesh.position.y = - 500;\n\t\t\t\tmesh.scale.x = mesh.scale.y = mesh.scale.z = 2;\n\t\t\t\tscene.add( mesh );\n\n\t\t\t\t// CYLINDER\n\n\t\t\t\tmesh = new THREE.Mesh( new THREE.CylinderBufferGeometry( 20, 100, 200, 10 ), new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) );\n\t\t\t\tmesh.position.x = - 500;\n\t\t\t\tmesh.rotation.x = - Math.PI / 2;\n\t\t\t\tmesh.scale.x = mesh.scale.y = mesh.scale.z = 2;\n\t\t\t\tscene.add( mesh );\n\n\t\t\t\t// POLYFIELD\n\n\t\t\t\tvar geometry = new THREE.BufferGeometry();\n\t\t\t\tvar material = new THREE.MeshBasicMaterial( { vertexColors: true, side: THREE.DoubleSide } );\n\n\t\t\t\tvar v = new THREE.Vector3();\n\t\t\t\tvar v0 = new THREE.Vector3();\n\t\t\t\tvar v1 = new THREE.Vector3();\n\t\t\t\tvar v2 = new THREE.Vector3();\n\t\t\t\tvar color = new THREE.Color();\n\n\t\t\t\tvar vertices = [];\n\t\t\t\tvar colors = [];\n\n\t\t\t\tfor ( var i = 0; i < 100; i ++ ) {\n\n\t\t\t\t\tv.set(\n\t\t\t\t\t\tMath.random() * 1000 - 500,\n\t\t\t\t\t\tMath.random() * 1000 - 500,\n\t\t\t\t\t\tMath.random() * 1000 - 500\n\t\t\t\t\t);\n\n\t\t\t\t\tv0.set(\n\t\t\t\t\t\tMath.random() * 100 - 50,\n\t\t\t\t\t\tMath.random() * 100 - 50,\n\t\t\t\t\t\tMath.random() * 100 - 50\n\t\t\t\t\t);\n\n\t\t\t\t\tv1.set(\n\t\t\t\t\t\tMath.random() * 100 - 50,\n\t\t\t\t\t\tMath.random() * 100 - 50,\n\t\t\t\t\t\tMath.random() * 100 - 50\n\t\t\t\t\t);\n\n\t\t\t\t\tv2.set(\n\t\t\t\t\t\tMath.random() * 100 - 50,\n\t\t\t\t\t\tMath.random() * 100 - 50,\n\t\t\t\t\t\tMath.random() * 100 - 50\n\t\t\t\t\t);\n\n\t\t\t\t\tv0.add( v );\n\t\t\t\t\tv1.add( v );\n\t\t\t\t\tv2.add( v );\n\n\t\t\t\t\tcolor.setHex( Math.random() * 0xffffff );\n\n\t\t\t\t\t// create a single triangle\n\n\t\t\t\t\tvertices.push( v0.x, v0.y, v0.z );\n\t\t\t\t\tvertices.push( v1.x, v1.y, v1.z );\n\t\t\t\t\tvertices.push( v2.x, v2.y, v2.z );\n\n\t\t\t\t\tcolors.push( color.r, color.g, color.b );\n\t\t\t\t\tcolors.push( color.r, color.g, color.b );\n\t\t\t\t\tcolors.push( color.r, color.g, color.b );\n\n\t\t\t\t}\n\n\t\t\t\tgeometry.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );\n\t\t\t\tgeometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );\n\n\t\t\t\tgroup = new THREE.Mesh( geometry, material );\n\t\t\t\tgroup.scale.set( 2, 2, 2 );\n\t\t\t\tscene.add( group );\n\n\t\t\t\t// SPRITES\n\n\t\t\t\tfor ( var i = 0; i < 50; i ++ ) {\n\n\t\t\t\t\tvar material = new THREE.SpriteMaterial( { color: Math.random() * 0xffffff } );\n\t\t\t\t\tvar sprite = new THREE.Sprite( material );\n\t\t\t\t\tsprite.position.x = Math.random() * 1000 - 500;\n\t\t\t\t\tsprite.position.y = Math.random() * 1000 - 500;\n\t\t\t\t\tsprite.position.z = Math.random() * 1000 - 500;\n\t\t\t\t\tsprite.scale.set( 64, 64, 1 );\n\t\t\t\t\tscene.add( sprite );\n\n\t\t\t\t}\n\n\t\t\t\t// CUSTOM\n\n\t\t\t\tvar node = document.createElementNS( 'http://www.w3.org/2000/svg', 'circle' );\n\t\t\t\tnode.setAttribute( 'stroke', 'black' );\n\t\t\t\tnode.setAttribute( 'fill', 'red' );\n\t\t\t\tnode.setAttribute( 'r', '40' );\n\n\t\t\t\tfor ( var i = 0; i < 50; i ++ ) {\n\n\t\t\t\t\tvar object = new SVGObject( node.cloneNode() );\n\t\t\t\t\tobject.position.x = Math.random() * 1000 - 500;\n\t\t\t\t\tobject.position.y = Math.random() * 1000 - 500;\n\t\t\t\t\tobject.position.z = Math.random() * 1000 - 500;\n\t\t\t\t\tscene.add( object );\n\n\t\t\t\t}\n\n\t\t\t\t// CUSTOM FROM FILE\n\n\t\t\t\tvar fileLoader = new THREE.FileLoader();\n\t\t\t\tfileLoader.load( '/assets/lapbin/models/svg/hexagon.svg', function ( svg ) {\n\n\t\t\t\t\tvar node = document.createElementNS( 'http://www.w3.org/2000/svg', 'g' );\n\t\t\t\t\tvar parser = new DOMParser();\n\t\t\t\t\tvar doc = parser.parseFromString( svg, 'image/svg+xml' );\n\n\t\t\t\t\tnode.appendChild( doc.documentElement );\n\n\t\t\t\t\tvar object = new SVGObject( node );\n\t\t\t\t\tobject.position.x = 500;\n\t\t\t\t\tscene.add( object );\n\n\t\t\t\t} );\n\n\t\t\t\t// LIGHTS\n\n\t\t\t\tvar ambient = new THREE.AmbientLight( 0x80ffff );\n\t\t\t\tscene.add( ambient );\n\n\t\t\t\tvar directional = new THREE.DirectionalLight( 0xffff00 );\n\t\t\t\tdirectional.position.set( - 1, 0.5, 0 );\n\t\t\t\tscene.add( directional );\n\n\t\t\t\trenderer = new SVGRenderer();\n\t\t\t\trenderer.setSize( window.innerWidth, window.innerHeight );\n\t\t\t\trenderer.setQuality( 'low' );\n\t\t\t\tdocument.body.appendChild( renderer.domElement );\n\n\t\t\t\t//stats = new Stats();\n\t\t\t\t//document.body.appendChild( stats.dom );\n\n\t\t\t\t//\n\n\t\t\t\twindow.addEventListener( 'resize', onWindowResize, false );\n\n\t\t\t}\n\n\t\t\tfunction onWindowResize() {\n\n\t\t\t\tcamera.aspect = window.innerWidth / window.innerHeight;\n\t\t\t\tcamera.updateProjectionMatrix();\n\n\t\t\t\trenderer.setSize( window.innerWidth, window.innerHeight );\n\n\t\t\t}\n\n\t\t\t//\n\n\t\t\tfunction animate() {\n\n\t\t\t\trequestAnimationFrame( animate );\n\n\t\t\t\trender();\n\t\t\t\t//stats.update();\n\n\t\t\t}\n\n\t\t\tfunction render() {\n\n\t\t\t\tvar time = Date.now() * 0.0002;\n\n\t\t\t\tcamera.position.x = Math.sin( time ) * 500;\n\t\t\t\tcamera.position.z = Math.cos( time ) * 500;\n\t\t\t\tcamera.lookAt( scene.position );\n\n\t\t\t\tgroup.rotation.x += 0.01;\n\n\t\t\t\trenderer.render( scene, camera );\n\n\t\t\t}\n}"}}

{"contentType":"lapbin-threejs","codes":{"html":"\t","css":"body {\n\tmargin: 0;\n\tbackground-color: #000;\n\tcolor: #fff;\n\tfont-family: Monospace;\n\tfont-size: 13px;\n\tline-height: 24px;\n\toverscroll-behavior: none;\n}\n\na {\n\tcolor: #ff0;\n\ttext-decoration: none;\n}\n\na:hover {\n\ttext-decoration: underline;\n}\n\nbutton {\n\tcursor: pointer;\n\ttext-transform: uppercase;\n}\n\ncanvas {\n\tdisplay: block;\n}\n\n#info {\n\tposition: absolute;\n\ttop: 0px;\n\twidth: 100%;\n\tpadding: 10px;\n\tbox-sizing: border-box;\n\ttext-align: center;\n\t-moz-user-select: none;\n\t-webkit-user-select: none;\n\t-ms-user-select: none;\n\tuser-select: none;\n\tpointer-events: none;\n\tz-index: 1; /* TODO Solve this in HTML */\n}","js":"function main($,THREE,threex,datgui) {\t\t\n\t\t\t//import * as THREE from '../build/three.module.js';\n\n\t\t\t//import { SVGRenderer } from './jsm/renderers/SVGRenderer.js';\n\t\t\tvar SVGRenderer = threex.renderers.SVGRenderer;\n\t\t\tvar camera, scene, renderer;\n\n\t\t\tinit();\n\t\t\tanimate();\n\n\t\t\tfunction init() {\n\n\t\t\t\tcamera = new THREE.PerspectiveCamera( 33, window.innerWidth / window.innerHeight, 0.1, 100 );\n\t\t\t\tcamera.position.z = 10;\n\n\t\t\t\tscene = new THREE.Scene();\n\t\t\t\tscene.background = new THREE.Color( 0, 0, 0 );\n\n\t\t\t\trenderer = new SVGRenderer();\n\t\t\t\trenderer.setSize( window.innerWidth, window.innerHeight );\n\t\t\t\tdocument.body.appendChild( renderer.domElement );\n\n\t\t\t\t//\n\n\t\t\t\tvar vertices = [];\n\t\t\t\tvar divisions = 50;\n\n\t\t\t\tfor ( var i = 0; i <= divisions; i ++ ) {\n\n\t\t\t\t\tvar v = ( i / divisions ) * ( Math.PI * 2 );\n\n\t\t\t\t\tvar x = Math.sin( v );\n\t\t\t\t\tvar z = Math.cos( v );\n\n\t\t\t\t\tvertices.push( x, 0, z );\n\n\t\t\t\t}\n\n\t\t\t\tvar geometry = new THREE.BufferGeometry();\n\t\t\t\tgeometry.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );\n\n\t\t\t\t//\n\n\t\t\t\tfor ( var i = 1; i <= 3; i ++ ) {\n\n\t\t\t\t\tvar material = new THREE.LineBasicMaterial( {\n\t\t\t\t\t\tcolor: Math.random() * 0xffffff,\n\t\t\t\t\t\tlinewidth: 10\n\t\t\t\t\t} );\n\t\t\t\t\tvar line = new THREE.Line( geometry, material );\n\t\t\t\t\tline.scale.setScalar( i / 3 );\n\t\t\t\t\tscene.add( line );\n\n\t\t\t\t}\n\n\t\t\t\tvar material = new THREE.LineDashedMaterial( {\n\t\t\t\t\tcolor: 'blue',\n\t\t\t\t\tlinewidth: 1,\n\t\t\t\t\tdashSize: 10,\n\t\t\t\t\tgapSize: 10\n\t\t\t\t} );\n\t\t\t\tvar line = new THREE.Line( geometry, material );\n\t\t\t\tline.scale.setScalar( 2 );\n\t\t\t\tscene.add( line );\n\n\t\t\t\t//\n\n\t\t\t\twindow.addEventListener( 'resize', onWindowResize, false );\n\n\t\t\t}\n\n\t\t\tfunction onWindowResize() {\n\n\t\t\t\tcamera.aspect = window.innerWidth / window.innerHeight;\n\t\t\t\tcamera.updateProjectionMatrix();\n\n\t\t\t\trenderer.setSize( window.innerWidth, window.innerHeight );\n\n\t\t\t}\n\n\t\t\tfunction animate() {\n\n\t\t\t\tvar count = 0;\n\t\t\t\tvar time = performance.now() / 1000;\n\n\t\t\t\tscene.traverse( function ( child ) {\n\n\t\t\t\t\tchild.rotation.x = count + ( time / 3 );\n\t\t\t\t\tchild.rotation.z = count + ( time / 4 );\n\n\t\t\t\t\tcount ++;\n\n\t\t\t\t} );\n\n\t\t\t\trenderer.render( scene, camera );\n\t\t\t\trequestAnimationFrame( animate );\n\n\t\t\t}\n}"}}

{"contentType":"3dmedia","url":"/assets/uploads/files/1632066655680-tetris.cglap"}

{"contentType":"3dmedia","url":"/assets/uploads/files/1632064950952-2048-3d.cglap"}

{"contentType":"3dmedia","url":"/assets/uploads/files/1632042169372-typo.cglap"}