requires :
npm install webvr-polyfill
http-server --cors .
ngrok http 8080
then navigate to https://xxxx.ngrok.io/examples/webvr_rollercoaster.html
Last active
August 24, 2017 15:08
-
-
Save clemos/28b0e914a41692dbacd9af74d3b6104e to your computer and use it in GitHub Desktop.
three.js rollercoaster + webcam texture
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title>three.js webvr - roller coaster</title> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> | |
| <!-- Origin Trial Token, feature = WebVR (For Chrome M59+), origin = https://threejs.org, expires = 2017-09-03 --> | |
| <meta http-equiv="origin-trial" data-feature="WebVR (For Chrome M59+)" data-expires="2017-09-03" content="Aqj+6XPnxHoSxQj/CDjGXhzrVFeP12/Pgvj7rfqFqVzodYX0ZXJNHTJIvCVExQfvip+Zq9GES+SOQ/zJlpceZgcAAABNeyJvcmlnaW4iOiJodHRwczovL3RocmVlanMub3JnOjQ0MyIsImZlYXR1cmUiOiJXZWJWUjEuMSIsImV4cGlyeSI6MTUwNDQ2NDIwNn0="> | |
| <style> | |
| body { | |
| margin: 0px; | |
| color: #fff; | |
| font-family: Monospace; | |
| background-color: #444; | |
| overflow: hidden; | |
| } | |
| a { | |
| color: #00f; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script src="/node_modules/webvr-polyfill/build/webvr-polyfill.min.js"></script> | |
| <script src="../build/three.js"></script> | |
| <script src="js/RollerCoaster.js"></script> | |
| <script src="js/vr/WebVR.js"></script> | |
| <script> | |
| WEBVR.checkAvailability().catch( function( message ) { | |
| document.body.appendChild( WEBVR.getMessageContainer( message ) ); | |
| } ); | |
| var video = document.createElement('video'); | |
| video.width = 512; | |
| video.height = 256; | |
| video.autoplay = true; | |
| video.style.position = "absolute"; | |
| video.style.zIndex = "2000"; | |
| video.style.width = "320px"; | |
| video.style.height = "240px"; | |
| video.style.border = "5px solid red"; | |
| //document.body.appendChild(video); | |
| try{ | |
| var constraints = { | |
| video : { | |
| width : 320, | |
| height: 240 | |
| }, | |
| audio : true | |
| }; | |
| // var constraints = { | |
| // video: facingMode: { exact: "environment" } | |
| // }; | |
| navigator.mediaDevices.getUserMedia(constraints).then( function(stream){ | |
| console.log('got video',stream); | |
| stream.onaddtrack = function(t){ | |
| console.log('track added',t); | |
| } | |
| video.src = webkitURL.createObjectURL(stream); | |
| }).catch( function(error){ | |
| alert("Failed to get a stream due to error" ); | |
| }); | |
| } catch(e){ | |
| alert("Error getting user media " + e); | |
| } | |
| var videoTexture = new THREE.VideoTexture( video ); | |
| videoTexture.minFilter = THREE.LinearFilter; | |
| //videoTexture.magFilter = THREE.LinearFilter; | |
| //videoTexture.format = THREE.RGBFormat; | |
| var videoMaterial = new THREE.MeshLambertMaterial({ | |
| map : videoTexture | |
| }); | |
| // | |
| var renderer = new THREE.WebGLRenderer( { antialias: false } ); | |
| renderer.setPixelRatio( window.devicePixelRatio ); | |
| renderer.setSize( window.innerWidth, window.innerHeight ); | |
| document.body.appendChild( renderer.domElement ); | |
| renderer.vr.enabled = true; | |
| var scene = new THREE.Scene(); | |
| scene.background = new THREE.Color( 0xf0f0ff ); | |
| var light = new THREE.HemisphereLight( 0xfff0f0, 0x606066 ); | |
| light.position.set( 1, 1, 1 ); | |
| scene.add( light ); | |
| var train = new THREE.Object3D(); | |
| scene.add( train ); | |
| var camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 0.1, 500 ); | |
| train.add( camera ); | |
| // environment | |
| var geometry = new THREE.PlaneBufferGeometry( 500, 500, 15, 15 ); | |
| geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) ); | |
| var positions = geometry.attributes.position.array; | |
| var vertex = new THREE.Vector3(); | |
| for ( var i = 0; i < positions.length; i += 3 ) { | |
| vertex.fromArray( positions, i ); | |
| vertex.x += Math.random() * 10 - 5; | |
| vertex.z += Math.random() * 10 - 5; | |
| var distance = ( vertex.distanceTo( scene.position ) / 5 ) - 25; | |
| vertex.y = Math.random() * Math.max( 0, distance ); | |
| vertex.toArray( positions, i ); | |
| } | |
| geometry.computeVertexNormals(); | |
| var material = new THREE.MeshLambertMaterial( { | |
| color: 0x407000 | |
| } ); | |
| var material = videoMaterial; | |
| var mesh = new THREE.Mesh( geometry, material ); | |
| scene.add( mesh ); | |
| var geometry = new TreesGeometry( mesh ); | |
| var material = new THREE.MeshBasicMaterial( { | |
| side: THREE.DoubleSide, vertexColors: THREE.VertexColors | |
| } ); | |
| var mesh = new THREE.Mesh( geometry, material ); | |
| scene.add( mesh ); | |
| var geometry = new SkyGeometry(); | |
| var material = new THREE.MeshBasicMaterial( { color: 0xffffff } ); | |
| var mesh = new THREE.Mesh( geometry, material ); | |
| scene.add( mesh ); | |
| // | |
| var PI2 = Math.PI * 2; | |
| var curve = ( function () { | |
| var vector = new THREE.Vector3(); | |
| var vector2 = new THREE.Vector3(); | |
| return { | |
| getPointAt: function ( t ) { | |
| t = t * PI2; | |
| var x = Math.sin( t * 3 ) * Math.cos( t * 4 ) * 50; | |
| var y = Math.sin( t * 10 ) * 2 + Math.cos( t * 17 ) * 2 + 5; | |
| var z = Math.sin( t ) * Math.sin( t * 4 ) * 50; | |
| return vector.set( x, y, z ).multiplyScalar( 2 ); | |
| }, | |
| getTangentAt: function ( t ) { | |
| var delta = 0.0001; | |
| var t1 = Math.max( 0, t - delta ); | |
| var t2 = Math.min( 1, t + delta ); | |
| return vector2.copy( this.getPointAt ( t2 ) ) | |
| .sub( this.getPointAt( t1 ) ).normalize(); | |
| } | |
| }; | |
| } )(); | |
| var geometry = new RollerCoasterGeometry( curve, 1500 ); | |
| var material = new THREE.MeshPhongMaterial( { | |
| vertexColors: THREE.VertexColors | |
| } ); | |
| var mesh = new THREE.Mesh( geometry, material ); | |
| scene.add( mesh ); | |
| var geometry = new RollerCoasterLiftersGeometry( curve, 100 ); | |
| var material = new THREE.MeshPhongMaterial(); | |
| var mesh = new THREE.Mesh( geometry, material ); | |
| mesh.position.y = 0.1; | |
| scene.add( mesh ); | |
| var geometry = new RollerCoasterShadowGeometry( curve, 500 ); | |
| var material = new THREE.MeshBasicMaterial( { | |
| color: 0x305000, depthWrite: false, transparent: true | |
| } ); | |
| var mesh = new THREE.Mesh( geometry, material ); | |
| mesh.position.y = 0.1; | |
| scene.add( mesh ); | |
| var funfairs = []; | |
| // | |
| var geometry = new THREE.CylinderBufferGeometry( 10, 10, 5, 15 ); | |
| var material = new THREE.MeshLambertMaterial( { | |
| color: 0xff8080, | |
| //flatShading: true // Lambert does not support flat shading | |
| } ); | |
| var mesh = new THREE.Mesh( geometry, material ); | |
| mesh.position.set( - 80, 10, - 70 ); | |
| mesh.rotation.x = Math.PI / 2; | |
| scene.add( mesh ); | |
| funfairs.push( mesh ); | |
| var geometry = new THREE.CylinderBufferGeometry( 5, 6, 4, 10 ); | |
| var material = new THREE.MeshLambertMaterial( { | |
| color: 0x8080ff, | |
| //flatShading: true // Lambert does not support flat shading | |
| } ); | |
| var mesh = new THREE.Mesh( geometry, material ); | |
| mesh.position.set( 50, 2, 30 ); | |
| scene.add( mesh ); | |
| funfairs.push( mesh ); | |
| // | |
| WEBVR.getVRDisplay( function ( display ) { | |
| renderer.vr.setDevice( display ); | |
| document.body.appendChild( WEBVR.getButton( display, renderer.domElement ) ); | |
| } ); | |
| // | |
| window.addEventListener( 'resize', onWindowResize, false ); | |
| function onWindowResize() { | |
| camera.aspect = window.innerWidth / window.innerHeight; | |
| camera.updateProjectionMatrix(); | |
| renderer.setSize( window.innerWidth, window.innerHeight ); | |
| } | |
| // | |
| var position = new THREE.Vector3(); | |
| var tangent = new THREE.Vector3(); | |
| var lookAt = new THREE.Vector3(); | |
| var velocity = 0; | |
| var progress = 0; | |
| var prevTime = performance.now(); | |
| function render() { | |
| //console.log('video ready state', video.readyState); | |
| //if( video.readyState === video.HAVE_ENOUGH_DATA ){ | |
| // videoTexture.needsUpdate = true; | |
| //} | |
| var time = performance.now(); | |
| var delta = time - prevTime; | |
| for ( var i = 0; i < funfairs.length; i ++ ) { | |
| funfairs[ i ].rotation.y = time * 0.0004; | |
| } | |
| // | |
| progress += velocity; | |
| progress = progress % 1; | |
| position.copy( curve.getPointAt( progress ) ); | |
| position.y += 0.3; | |
| train.position.copy( position ); | |
| tangent.copy( curve.getTangentAt( progress ) ); | |
| velocity -= tangent.y * 0.0000001 * delta; | |
| velocity = Math.max( 0.00004, Math.min( 0.0002, velocity ) ); | |
| train.lookAt( lookAt.copy( position ).sub( tangent ) ); | |
| // | |
| renderer.render( scene, camera ); | |
| prevTime = time; | |
| } | |
| renderer.animate( render ); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment