de oorspronkelijke schets

 de oorspronkelijke schets

 

 

 

 

 

 

rollercoaster met wolkenlucht

 rollercoaster met wolkenlucht 
regel 38, 39 en 40 ingeschakeld
regel 84, 85, 86 en 87 uitgeschakeld

 

 

 

 

 

 

rollercoaster landschap

landschap met ander kleurtje (regel 68)

 

 

 

 

 bomen een ander kleurtje gegeven (regel 76)

 bomen een ander kleurtje gegeven (regel 76) 

 

 

 

 

 

  

rode cylinder toegevoegd, regel 151 t/m 154 toegevoegd

 rode cylinder toegevoegd

regel 151 t/m 154 toegevoegd 

 

 

 

 

 groene lijn rood gemaakt (regel 131)

 groene lijn rood gemaakt (regel 131)

 

 

 

 

 

rollercoaster lifters 100 --> 350 (regel 123)

 rollercoaster lifters 100 --> 350 (regel 123)

 

 

 

 

boompjes gekapt  (regel 74 t/m 81 uitgeschakeld)

boomjes gekapt (regel 74 t/m 81 uitgeschakeld)

 

 

 

 

 

De midden buis heeft nu een bruine kleur

De midden buis heeft een andere kleur
Door aanpassingen in Rollercoaster.js

rollercoaster.                    terug naar de inleiding      naar de rollercoaster animatie in  fullscreen

De schets is gemaakt door Ricardo Cabello een van de intiatiefnemers van Three.js.
Ik heb de schets op mijn server gezet en als experiment er veranderingen in aangebracht.
 
1) de lucht in wolkenlucht verandert (regel 38, 39 en 40) de methode SkyGeometrie, in RollerCoaster.js, uitgeschakeld (regel 84, 85, 86, en 87).
2) het landschap een andere kleur geven (regel 68)
3) de boompjes een andere kleur geven (regel 76)
4) een cylinder mesh toegevoegd (regel 151, 152, 153 en 154)
5) de groene lijn rood gemaakt (regel 131) 
6) coasterLifters 100 --> 350 (regel 123)
7) boompjes gekapt (regels 74 t/m 81 uitgeschakeld)
8) De middelste buis van de RollercoasterGeometry heeft een andere kleur door aanpassingen in RollerCoaster.js
 

 
<!DOCTYPE html> 

<html lang="en">
<head>
<title>three.js vr - roller coaster</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link type="text/css" rel="stylesheet" href="./styles/main2.css">
</head>
<body>
 
<script src="./examples/js/vr/HelioWebXRPolyfill.js"></script>
 <script type="module">
 import * as THREE from './build/three.module.js';
 
import {
RollerCoasterGeometry,
RollerCoasterShadowGeometry,
RollerCoasterLiftersGeometry,
TreesGeometry,
SkyGeometry
} from './examples/jsm/misc/RollerCoaster.js';
import { VRButton } from './examples/jsm/webxr/VRButton.js';
 
var renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.xr.enabled = true;
document.body.appendChild( renderer.domElement );
 
document.body.appendChild( VRButton.createButton( renderer, { referenceSpaceType: 'local' } ) ); 

var scene = new THREE.Scene();
 
//wolkenlucht als achtergrond
const loader = new THREE.TextureLoader();
const bgTexture = loader.load('./textures/cloud.jpg');
scene.background = bgTexture;
 
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( 50, window.innerWidth / window.innerHeight, 0.1, 500 );
train.add( camera );
 
// de omgeving
//1) het landschap
var geometry = new THREE.PlaneBufferGeometry( 500, 500, 15, 15 );
geometry.rotateX( - 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: 0xD6C932 } ); //een andere kleur aan het landschap gegeven
// color: 0x407000 } );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
 
//De boomjes een kleur gegeven default = groen
var geometry = new TreesGeometry( mesh );
var material = new THREE.MeshBasicMaterial(
{color: 0xfff010, //kleur van de boompje
//{color: 0xff3333,
 
side: THREE.DoubleSide, vertexColors: true } );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
 
//ipv de SkyGeometry een wolkenlucht als achtergrond
// 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: true
} );
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,   //rode lijn
//color: 0xFC0303, //groene lijn
 
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,} );
var mesh = new THREE.Mesh( geometry, material );
mesh.position.set( - 80, 10, - 70 );
mesh.rotation.x = Math.PI / 2;
scene.add( mesh );
 
//door mij toegevoegde mesh
var mesh = new THREE.Mesh( geometry, material );
mesh.position.set( - 8, 6, - 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,} );
var mesh = new THREE.Mesh( geometry, material );
mesh.position.set( 50, 2, 30 );
scene.add( mesh );
 
funfairs.push( mesh );
 
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() {
   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.setAnimationLoop( render );
     </script>
  </body>
</html>