You can ride all attractions in the park : ) Have fun! VR — experimental mode
A Pen by Sascha Sigl on CodePen.
<div id="container"></div> | |
<div id="info"> | |
<div class="mode"> | |
<div class="action" id="vr_mode"><span>vr mode <br/>(Split Screen + Device Orientation)</span></div> | |
<div class="action" id="desktop_mode"><span>desktop mode</span></div> | |
</div> | |
<div class="attraction"> | |
<div class="action" id="rollercoaster"><span>rollercoaster</span></div> | |
<div class="action" id="ferris_wheel"><span>ferris wheel</span></div> | |
<div class="action" id="monster"><span>monster</span></div> | |
<div class="action" id="explore"><span>explore</span></div> | |
</div> | |
</div> |
You can ride all attractions in the park : ) Have fun! VR — experimental mode
A Pen by Sascha Sigl on CodePen.
var container; | |
var camera, scene, controls; | |
var raycaster = new THREE.Raycaster(); | |
var renderer; | |
var clock = new THREE.Clock(); | |
var time = 0; | |
var duration = 100; | |
var keyframes = 4; | |
var interpolation = duration / keyframes; | |
var currentKeyframe = 0; | |
var lastKeyframe = 0; | |
var animOffset = 1; | |
var radius = 600; | |
var theta = 0; | |
var effect; | |
var prevTime = Date.now(); | |
var helper; | |
var konfSystem, sec_konfSystem; | |
// custom global variables | |
var postprocessing = { | |
enabled: true | |
}; | |
var velocity = {}; | |
var rad_wagon, rad; | |
var track; | |
var wagons; | |
var monster; | |
//Helper Track | |
var tangent = new THREE.Vector3(); | |
var axis = new THREE.Vector3(); | |
var up = new THREE.Vector3(0, 1, 0); | |
var gras; | |
var animation; | |
var fake_light; | |
var base_url = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/61062/" | |
var å = { | |
rad: { | |
enabled: false | |
}, | |
explore: { | |
enabled: false | |
}, | |
monster: { | |
enabled: false | |
}, | |
track: { | |
enabled: false, | |
speed: 0.0005, | |
counter: 0, | |
lookAt: .00001 | |
}, | |
mouse: { | |
x: 0, | |
y: 0, | |
z: .5 | |
}, | |
mode: { | |
desktop: true, | |
vr: false, | |
orientation: false | |
}, | |
postprocessing: { | |
enabled: true | |
}, | |
paused: false, | |
state: { | |
}, | |
scene: { | |
}, | |
model: { | |
track: base_url + 'track.json', | |
rad: base_url + 'rad.json', | |
rad_ground: base_url + 'rad_ground.json', | |
rad_wagon: base_url + 'rad_wagon.json', | |
monster: base_url + 'monster.json', | |
monster_ground: base_url + 'monster_ground.json', | |
park: base_url + 'park.json', | |
cloud: base_url + 'cloud.json' | |
}, | |
loaded: { | |
} | |
} | |
// Meh..___________________________________________ LOAD IMAGES CROSS | |
var smoke_image = document.getElementById('texture_smoke'); | |
var smoke_texture = new THREE.Texture(smoke_image); | |
smoke_texture.needsUpdate = true; | |
//___________________________________________ | |
var materialDepth; | |
var sunPosition = new THREE.Vector3(100, 0, -100); | |
var screenSpacePosition = new THREE.Vector3(); | |
var bgColor = 0x000000; | |
var sunColor = 0x222222; | |
var orbitRadius = 20; | |
var postprocessing = { | |
enabled: true | |
}; | |
//___________________________________________ HELPER | |
function randNum(min, max, bool) { | |
var num = Math.random() * max + min; | |
if (bool || bool === "undefined") { | |
num *= Math.floor(Math.random() * 2) == 1 ? 1 : -1; | |
} | |
return num; | |
} | |
function centerPoint(pointA, pointB, percentage) { | |
var dir = pointB.clone().sub(pointA); | |
var len = dir.length(); | |
dir = dir.normalize().multiplyScalar(len * percentage); | |
return pointA.clone().add(dir); | |
} | |
function first_controls(controls) { | |
if (controls.name !== 'first') { | |
controls = null; | |
controls = new THREE.FlyControls(camera); | |
controls.movementSpeed = 1000; | |
controls.domElement = renderer.domElement; | |
controls.rollSpeed = Math.PI / 24; | |
controls.autoForward = true; | |
controls.dragToLook = false; | |
} | |
return controls; | |
} | |
function orbit_controls(controls) { | |
controls = null; | |
scene.add(camera); | |
controls = new THREE.OrbitControls(camera); | |
controls.damping = 0.2; | |
controls.name = 'orbit'; | |
controls.autoRotate = false; | |
controls.addEventListener('change', render); | |
camera.lookAt(new THREE.Vector3(0, 0, 0)); | |
controls.target = new THREE.Vector3(0, 0, 0); | |
return controls; | |
}; | |
function vr_controls(controls) { | |
å.mode.vr = true; | |
å.mode.desktop = false; | |
var split_check = typeof controls.connect === 'function'; | |
scene.add(camera); | |
if (split_check) { | |
controls.connect(); | |
} else { | |
controls = null; | |
controls = new THREE.DeviceOrientationControls(camera); | |
controls.connect(); | |
controls.name = 'vr'; | |
if (!å.mode.desktop) { | |
effect = new THREE.StereoEffect(renderer); | |
controls.name = 'vr'; | |
effect.eyeSeparation = 2; | |
effect.setSize(window.innerWidth, window.innerHeight); | |
} | |
camera.lookAt(new THREE.Vector3(0, 0, 0)); | |
} | |
return controls; | |
} | |
function pointInCircle(point, target, radius) { | |
var distsq = (point.x - target.x) * (point.x - target.x) + (point.y - target.y) * (point.y - target.y) + (point.z - target.z) * (point.z - target.z); | |
// returns bool , distance to target origin | |
return [distsq <= radius * radius * radius, distsq]; | |
} | |
//___________________________________________ KICK IT OFF | |
init(); | |
animate(); | |
//___________________________________________ INIT | |
function init() { | |
//if(Modernizr.touch){ | |
// å.mode.vr = true; | |
// å.mode.desktop = false; | |
//} | |
container = document.getElementById('container'); | |
//__________________________________ Camera | |
camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, .1, 100000); | |
camera.position.x = -46; // 0 | |
camera.position.y = 45; // 0.5 | |
camera.position.z = -130; // 6.3 | |
camera.move_direction = 1; | |
camera.posSpeed = 0.002; | |
scene = new THREE.Scene(); | |
scene.fog = new THREE.FogExp2(0xFFCA73, 0.003); | |
camera.update = function(time) { | |
if (typeof track !== "undefined" && å.track.enabled) { | |
if (å.track.counter < 1) { | |
å.track.counter += å.track.speed; | |
} else { | |
å.track.counter = 0; | |
} | |
if (å.track.lookAt <= 1) { | |
å.track.lookAt += å.track.speed; | |
} else { | |
å.track.lookAt = 0; | |
} | |
if (å.track.counter > 1) { | |
å.track.counter = 1 | |
} | |
if (å.track.lookAt > 1) { | |
å.track.lookAt = 1 | |
} | |
var position_l = track.getPointAt(å.track.counter); | |
var position_r = track_r.getPointAt(å.track.counter); | |
var lookAt_position_l = track.getPointAt(å.track.lookAt); | |
var lookAt_position_r = track_r.getPointAt(å.track.lookAt); | |
var camera_position = centerPoint(position_l, position_r, .5); | |
var lookAt_position = centerPoint(lookAt_position_l, lookAt_position_r, .5); | |
this.position.copy(camera_position); | |
if (!å.mode.vr) { | |
tangent = track.getTangentAt(å.track.lookAt).normalize(); | |
axis.crossVectors(up, tangent).normalize(); | |
var radians = Math.acos(up.dot(tangent)); | |
this.quaternion.setFromAxisAngle(axis, radians); | |
this.lookAt(lookAt_position); | |
} | |
} | |
//__________________ Rad | |
if (typeof wagons !== "undefined" && å.rad.enabled) { | |
if (this.position.x == 0 && this.position.y == 0 && this.position.z == 0) { | |
this.position.set(0, 0, 0); | |
this.lookAt(new THREE.Vector3(1, 0, 0)); | |
} | |
if (!å.mode.vr && controls.name !== 'orbit') { | |
controls = orbit_controls(controls); | |
this.position.set(0, -6, 6); | |
} | |
if (this.position.x == 0 && this.position.y == 0 && this.position.z == 0) { | |
this.position.set(0, 0, 6); | |
this.lookAt(new THREE.Vector3(2, 0, 0)) | |
} | |
controls.noZoom = true; | |
controls.maxDistance = 0.02; | |
wagons.children[0].add(camera); | |
} | |
//__________________ Monster | |
if (typeof monster !== "undefined" && å.monster.enabled) { | |
if (!å.mode.vr && controls.name !== 'orbit') { | |
controls = orbit_controls(controls); | |
} | |
if (this.position.x == 0 && this.position.y == 0 && this.position.z == 0) { | |
this.position.set(-5, -18, 0.1); | |
} | |
controls.target = new THREE.Vector3(-5, -18, 0); | |
controls.noZoom = true; | |
controls.maxDistance = 0.01; | |
monster.add(camera); | |
} | |
if (å.rad.enabled) { | |
} | |
//__________________ Explore | |
if (å.explore.enabled) { | |
} | |
} | |
scene.add(camera); | |
// ___________________________________________RENDERER | |
renderer = new THREE.WebGLRenderer({ | |
antialias: true, | |
transparent: true, | |
alpha: true | |
}); | |
renderer.setPixelRatio(window.devicePixelRatio); | |
renderer.setSize(window.innerWidth, window.innerHeight); | |
container.appendChild(renderer.domElement); | |
renderer.shadowMapEnabled = true; | |
renderer.gamma | |
//___________________________________________ CONTROLS | |
if (å.mode.desktop) { | |
controls = orbit_controls(controls); | |
} | |
if (å.mode.vr) { | |
controls = vr_controls(controls); | |
} | |
//___________________________________________ FAKE LIGHT | |
var ambient = new THREE.AmbientLight(0x333333); | |
scene.add(ambient); | |
//___________________________________________ Light | |
light = new THREE.SpotLight(0xF5A96B, 10, 200, Math.PI / 2); | |
light.position.set(0, 150, 0).multiplyScalar(1); | |
light.castShadow = true; | |
light.shadowMapWidth = 1024 * 2; | |
light.shadowMapHeight = 1024 * 2; | |
scene.add(light); | |
front_light = new THREE.SpotLight(0xF5A96B, 2, 200, Math.PI / 2); | |
front_light.position.set(-46, 45, -150).multiplyScalar(1); | |
scene.add(front_light); | |
//___________________________________________ Fake Light | |
fake_light = new THREE.SpotLight(0x45D2EA, 1, 1, Math.PI / 2); | |
fake_light.position.set(0, 300, -150).multiplyScalar(1); | |
fake_light.castShadow = true; | |
fake_light.shadowMapWidth = 1024; | |
fake_light.shadowMapHeight = 1024; | |
var d = 3500; | |
fake_light.shadowCameraLeft = -d; | |
fake_light.shadowCameraRight = d; | |
fake_light.shadowCameraTop = d; | |
fake_light.shadowCameraBottom = -d; | |
fake_light.shadowCameraNear = 0.01; | |
scene.add(fake_light); | |
var pointLight = new THREE.PointLight(0xffffff, .1); | |
//___________________________________________ FLARE | |
var loader = new THREE.JSONLoader(); | |
//___________________________________________ BALL | |
var modifier = new THREE.SubdivisionModifier(2); | |
loader.load(å.model.track, function(geometry) { | |
var spline_geometry = []; | |
var spline_geometry_r = []; | |
geometry.vertices.forEach(function(p, index) { | |
if (index % 2 == 0) { | |
spline_geometry.push(p); | |
} else { | |
spline_geometry_r.push(p); | |
} | |
}); | |
spline_geometry[spline_geometry.length - 1] = spline_geometry[0]; | |
spline_geometry_r[spline_geometry_r.length - 1] = spline_geometry_r[0]; | |
track = new THREE.SplineCurve3(spline_geometry); | |
track_r = new THREE.SplineCurve3(spline_geometry_r); | |
var radius = .2; | |
var segments = 6; | |
var circleGeometry = new THREE.CircleGeometry(radius, segments); | |
var extrudeSettings = { | |
steps: 1000, | |
bevelEnabled: false, | |
extrudePath: track | |
}; | |
var extrudeSettings_r = { | |
steps: 1000, | |
bevelEnabled: false, | |
extrudePath: track_r | |
}; | |
draw_feets(spline_geometry); | |
draw_feets(spline_geometry_r); | |
draw_inbetween_line([spline_geometry, spline_geometry_r]); | |
var shape = new THREE.Shape(circleGeometry.vertices); | |
var track_geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings); | |
var track_geometry_r = new THREE.ExtrudeGeometry(shape, extrudeSettings_r); | |
var track_material = new THREE.MeshLambertMaterial({ | |
color: 0xb00000, | |
wireframe: false | |
}); | |
var real_track_geo = new THREE.Geometry(); | |
var extrude_Track = new THREE.Mesh(track_geometry, track_material); | |
var extrude_Track_r = new THREE.Mesh(track_geometry_r, track_material); | |
extrude_Track.castShadow = true; | |
extrude_Track.receiveShadow = true; | |
extrude_Track_r.castShadow = true; | |
extrude_Track_r.receiveShadow = true; | |
scene.add(extrude_Track); | |
scene.add(extrude_Track_r); | |
}) | |
function draw_inbetween_line(positions) { | |
var material = new THREE.LineBasicMaterial({ | |
color: 0xb00000, | |
linewidth: 2 | |
}); | |
positions[0].forEach(function(pos, index) { | |
var line_geometry = new THREE.Geometry(); | |
var between_p = centerPoint(pos, positions[1][index], 0.5); | |
line_geometry.vertices.push( | |
new THREE.Vector3(pos.x, pos.y, pos.z), | |
new THREE.Vector3(between_p.x, between_p.y - .1, between_p.z), | |
new THREE.Vector3(positions[1][index].x, positions[1][index].y, positions[1][index].z) | |
); | |
var line = new THREE.Line(line_geometry, material); | |
scene.add(line); | |
}) | |
} | |
function draw_feets(positions) { | |
var material = new THREE.LineBasicMaterial({ | |
color: 0x0D2339, | |
linewidth: 2 | |
}); | |
positions.forEach(function(pos, index) { | |
var line_geometry = new THREE.Geometry(); | |
line_geometry.vertices.push( | |
new THREE.Vector3(pos.x, pos.y, pos.z), | |
new THREE.Vector3(pos.x, -10, pos.z) | |
); | |
var line = new THREE.Line(line_geometry, material); | |
scene.add(line); | |
}); | |
} | |
//___________________________________________ RAD | |
///rad_ground.json | |
loader.load(å.model.rad_ground, function(geometry, material) { | |
material.forEach(function(mat, index) { | |
mat.shading = THREE.FlatShading; | |
}); | |
var coaster_ground_m = new THREE.MeshFaceMaterial(material); | |
rad_ground = new THREE.Mesh(geometry, coaster_ground_m); | |
rad_ground.position.y = -3; | |
rad_ground.position.x = 27.25; | |
rad_ground.position.z = 16.5; | |
rad_ground.rotation.y = 45 * Math.PI / 180; | |
rad_ground.receiveShadow = true; | |
rad_ground.castShadow = true; | |
scene.add(rad_ground); | |
}); | |
loader.load(å.model.rad, function(geometry, material) { | |
material.forEach(function(mat, index) { | |
mat.shading = THREE.FlatShading; | |
}); | |
var coaster_m = new THREE.MeshFaceMaterial(material); | |
// PLANE with Canvas textureFlare3 | |
geometry.mergeVertices(); | |
geometry.computeFaceNormals(); | |
geometry.computeVertexNormals(); | |
modifier.modify(geometry); | |
rad = new THREE.Mesh(geometry, coaster_m); | |
rad.position.y = 17; | |
rad.position.x = 30; | |
rad.position.z = 20; | |
rad.rotation.y = 45 * Math.PI / 180; | |
rad.update = function(time) { | |
this.rotation.z += .01; | |
} | |
rad.castShadow = true; | |
rad.receiveShadow = true; | |
scene.add(rad); | |
}); | |
loader.load(å.model.rad_wagon, function(geometry) { | |
var wagon_m = new THREE.MeshLambertMaterial({ | |
color: 0xffffff, | |
shading: THREE.FlatShading, | |
side: THREE.DoubeSided | |
}) | |
wagons = new THREE.Object3D(); | |
for (var i = 0; i < 20; i++) { | |
rad_wagon = new THREE.Mesh(geometry, wagon_m); | |
rad_wagon.position.x = Math.sin(i) * 15.5; | |
rad_wagon.position.y = Math.cos(i) * 15.5; | |
rad_wagon.position.z = 0; | |
rad_wagon.update = function(time) { | |
this.rotation.z -= .01; | |
} | |
wagons.add(rad_wagon); | |
} | |
wagons.position.y = 17; | |
wagons.position.x = 30; | |
wagons.position.z = 20; | |
wagons.rotation.y = 45 * Math.PI / 180; | |
wagons.update = function(time) { | |
this.rotation.z += .01; | |
} | |
wagons.castShadow = true; | |
wagons.receiveShadow = true; | |
scene.add(wagons); | |
//-26 1 -13 | |
}); | |
//___________________________________________ Monster | |
loader.load(å.model.monster, function(geometry, material) { | |
material.forEach(function(mat, index) { | |
mat.shading = THREE.FlatShading; | |
}); | |
var monster_m = new THREE.MeshFaceMaterial(material); | |
monster = new THREE.Mesh(geometry, monster_m); | |
monster.position.y = 22; | |
monster.position.x = 35; | |
monster.position.z = -23; | |
monster.rotation.y = 0 * Math.PI / 180; | |
monster.rotSpeed = 0.01; | |
monster.direction = 1; | |
monster.receiveShadow = true; | |
monster.castShadow = true; | |
monster.update = function(time) { | |
if (this.rotation.x > 1.8 || this.rotation.x < -1.8) { | |
this.direction *= (-1); | |
} | |
this.rotation.x += .01 * this.direction * (1.9 - Math.abs(this.rotation.x)); | |
this.rotation.y += .01; | |
} | |
scene.add(monster); | |
}); | |
//___________________________________________ Monster Ground | |
loader.load(å.model.monster_ground, function(geometry, material) { | |
material.forEach(function(mat, index) { | |
mat.shading = THREE.FlatShading; | |
}); | |
var monster_ground_m = new THREE.MeshFaceMaterial(material); | |
monster_ground = new THREE.Mesh(geometry, monster_ground_m); | |
monster_ground.position.y = -2; | |
monster_ground.position.x = 35; | |
monster_ground.position.z = -23; | |
monster_ground.rotation.y = 90 * Math.PI / 180; | |
//monster_ground.castShadow = true; | |
monster_ground.receiveShadow = true; | |
scene.add(monster_ground); | |
}); | |
//___________________________________________ GROUND | |
loader.load(å.model.park, function(geometry, material) { | |
material.forEach(function(mat, index) { | |
mat.shading = THREE.FlatShading; | |
}); | |
var material = new THREE.MeshFaceMaterial(material); | |
console.log(material); | |
//var coaster_m = new THREE.MeshPhongMaterial({ | |
// color : 0xffffff, | |
// side: THREE.DoubleSide, | |
// shading: THREE.FlatShading | |
//}); | |
ground = new THREE.Mesh(geometry, material); | |
ground.rotation.y = 205 * Math.PI / 180; | |
ground.position.y = -4.5; | |
ground.position.z = 23; | |
ground.castShadow = true; | |
ground.receiveShadow = true; | |
scene.add(ground); | |
}); | |
loader.load(å.model.cloud, function(geometry) { | |
var cloud_mat = new THREE.MeshBasicMaterial({ | |
color: 0xffffff, | |
}) | |
var clouds = []; | |
var clouds_obj = new THREE.Object3D(); | |
for (var c = 0; c < 50; c++) { | |
clouds[c] = new THREE.Mesh(geometry, cloud_mat); | |
clouds[c].rotation.y = 205 * c * Math.PI / 180; | |
clouds[c].position.y = 60 + Math.sin(c) * randNum(0, 20, true); | |
clouds[c].position.x = Math.sin(c) * randNum(0, 500, true); | |
clouds[c].position.z = Math.cos(c) * randNum(0, 500, true); | |
clouds[c].castShadow = true; | |
clouds[c].receiveShadow = true; | |
clouds_obj.add(clouds[c]); | |
} | |
scene.add(clouds_obj); | |
}); | |
//___________________________________________ Dust | |
var dust = new THREE.Geometry(); | |
var dMaterial = new THREE.PointCloudMaterial({ | |
color: 0xffffff, | |
size: 0.2, | |
transparent: true, | |
opacity: .25, | |
}); | |
for (var i = 0; i < 1000; i++) { | |
var x = randNum(0, 100, true); | |
var y = randNum(0, 100, true); | |
var z = randNum(0, 100, true); | |
dust.vertices.push(new THREE.Vector3(x, y, z)); | |
} | |
var particleSystem_1 = new THREE.PointCloud(dust, dMaterial); | |
scene.add(particleSystem_1); | |
//___________________________________________ Konfetti | |
var konf = new THREE.Geometry(); | |
var kMaterial = new THREE.PointCloudMaterial({ | |
//color: 0xff0000, | |
size: 1, | |
transparent: true, | |
opacity: 1, | |
vertexColors: true | |
}); | |
var colors = []; | |
var color_array = [0x4285F4, 0x34A853, , 0xFBBC05, 0xEA4335, 0xffffff]; | |
var turbulence = [] | |
for (var i = 0; i < 500; i++) { | |
var x = randNum(0, 0.05, true); | |
var y = randNum(0.1, 0.25, false); | |
var z = randNum(0, 0.05, true); | |
konf.vertices.push(new THREE.Vector3(0, 0, 0)); | |
turbulence.push(new THREE.Vector3(x, y, z)); | |
//; | |
colors.push(new THREE.Color(color_array[Math.floor(Math.random() * color_array.length)])); | |
} | |
konfSystem = new THREE.PointCloud(konf, kMaterial); | |
konfSystem.turbulence = turbulence | |
console.log(konfSystem); | |
konfSystem.geometry.colors = colors; | |
konfSystem.geometry.colorsNeedUpdate = true; | |
konfSystem.position.set(-40, 0, -55); | |
konfSystem.update = function(time) { | |
var that = this; | |
this.geometry.vertices.forEach(function(p, index) { | |
p.x += that.turbulence[index].x; | |
p.y += that.turbulence[index].y; | |
p.z += that.turbulence[index].z; | |
var radius_checker = pointInCircle({ | |
x: 0, | |
y: 0, | |
z: 0 | |
}, p, randNum(9, 15)); | |
//console.log(radius_checker); | |
if (!radius_checker[0]) { | |
p.x = 0; | |
p.y = 0; | |
p.z = 0; | |
} | |
}); | |
this.geometry.verticesNeedUpdate = true; | |
} | |
sec_konfSystem = konfSystem.clone(); | |
sec_konfSystem.position.set(0, 0, -75); | |
scene.add(konfSystem); | |
scene.add(sec_konfSystem); | |
//___________________________________________SEA | |
sea_geometry = new THREE.PlaneGeometry(55, 55, 32, 32); | |
sea_material = new THREE.MeshPhongMaterial({ | |
color: 0x0000ff, | |
transparent: true, | |
opacity: .85, | |
shininess: 10, | |
// shading: THREE.FlatShading, | |
// side : THREE.DoubleSide | |
}); | |
for (var i = 0; i < sea_geometry.vertices.length; i++) { | |
sea_geometry.vertices[i].z = Math.random() * 1; | |
} | |
sea = new THREE.Mesh(sea_geometry, sea_material); | |
sea.rotation.x = -Math.PI / 2; | |
sea.position.x = -12; | |
sea.position.y = -7; | |
sea.visible = false; | |
sea.receiveShadow = true; | |
//sea.castShadow = true; | |
scene.add(sea); | |
} // end of init | |
// __________________________________ Events | |
var info = document.getElementById('info'); | |
var action_vr = document.getElementById('vr_mode'); | |
var action_desktop = document.getElementById('desktop_mode'); | |
var action_rollercoaster = document.getElementById('rollercoaster'); | |
var action_rad = document.getElementById('ferris_wheel'); | |
var action_monster = document.getElementById('monster'); | |
var action_explore = document.getElementById('explore'); | |
info.addEventListener('mouseover', function(event) { | |
controls.enabled = false; | |
}); | |
info.addEventListener('mouseout', function(event) { | |
controls.enabled = true; | |
}); | |
function check_Camera(camera) { | |
if (camera.parent.type !== 'Scene') { | |
camera.clone(); | |
THREE.SceneUtils.detach(camera, camera.parent, scene); | |
scene.add(camera); | |
controls.update(); | |
camera.position.set(0, 0, 0); | |
} | |
} | |
action_rollercoaster.addEventListener('click', function(event) { | |
camera.position.set(0, 0, 0); | |
å.track.enabled = true; | |
å.monster.enabled = false; | |
å.rad.enabled = false; | |
check_Camera(camera) | |
//controls.update(); | |
}); | |
action_monster.addEventListener('click', function(event) { | |
camera.position.set(0, 0, 0); | |
å.track.enabled = false; | |
å.monster.enabled = true; | |
å.rad.enabled = false; | |
check_Camera(camera) | |
}); | |
action_rad.addEventListener('click', function(event) { | |
camera.position.set(0, 0, 0); | |
å.track.enabled = false; | |
å.monster.enabled = false; | |
å.rad.enabled = true; | |
check_Camera(camera) | |
//controls.update(); | |
}); | |
action_explore.addEventListener('click', function(event) { | |
camera.position.set(0, 0, 0); | |
å.track.enabled = false; | |
å.monster.enabled = false; | |
å.rad.enabled = false; | |
å.explore.enabled = false; | |
check_Camera(camera); | |
camera.position.set(0, 0, 10); | |
camera.lookAt(new THREE.Vector3(0, 0, 1)); | |
if (!å.mode.vr) { | |
controls = orbit_controls(camera); | |
} | |
//controls.update(); | |
}); | |
//___________________________________________ | |
action_desktop.addEventListener('click', function(event) { | |
å.mode.vr = false; | |
å.mode.desktop = true; | |
å.mode.orientation = false; | |
// | |
controls = orbit_controls(controls); | |
onWindowResize(); | |
controls.enabled = true; | |
}); | |
action_vr.addEventListener('click', function(event) { | |
å.mode.orientation = true; | |
controls = vr_controls(controls); | |
}); | |
window.addEventListener('resize', onWindowResize, false); | |
//___________________________________________ click | |
function onWindowResize() { | |
camera.aspect = window.innerWidth / window.innerHeight; | |
camera.updateProjectionMatrix(); | |
if (å.mode.desktop) { | |
renderer.setSize(window.innerWidth, window.innerHeight); | |
} | |
if (å.mode.vr) { | |
effect.setSize(window.innerWidth, window.innerHeight); | |
} | |
} | |
//___________________________________________ RENDER | |
function animate() { | |
requestAnimationFrame(animate); | |
render(); | |
} | |
var current = 0; | |
function render(time) { | |
var delta = .75 * clock.getDelta(); | |
if (helper !== undefined) { | |
helper.update(); | |
} | |
konfSystem.update(time); | |
if (typeof rad !== "undefined") { | |
rad.update(time); | |
//rad_wagon.update(time); | |
wagons.update(time); | |
wagons.children.forEach(function(wagon, index) { | |
wagon.update(time); | |
}); | |
monster.update(time); | |
sea.visible =true; | |
} | |
if (å.mode.desktop) { | |
renderer.render(scene, camera); | |
} | |
if (å.mode.orientation) { | |
effect.render(scene, camera); | |
} | |
// update skinning | |
if (å.mode.desktop || !å.mode.orientation) { | |
camera.update(time); | |
} else { | |
var delta = clock.getDelta(); | |
controls.update(delta); | |
} | |
} |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script> | |
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/61062/orbit_controls.js"></script> | |
<script src="http://threejs.org/examples/js/controls/FlyControls.js"></script> | |
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/61062/Subdivision_Modifier.js"></script> | |
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/61062/stereo_effect.js"></script> | |
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/61062/DeviceControls.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.20/require.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> |
*{ | |
margin:0; | |
padding:0; | |
box-sizing:border-box; | |
} | |
html,body{ | |
width:100%; | |
height:100%; | |
min-width: 100%; | |
min-height: 100%; | |
background-color: #fff; | |
font-family: 'Lato', sans-serif; | |
} | |
body{ | |
font-size:80%; | |
font-weight:lighter; | |
//cursor:none; | |
background:radial-gradient(#5ED0F6 0%, #4285F4 100%); | |
} | |
//_________________________________________ Note for touch | |
body{ | |
background: radial-gradient(#5ED0F6 0%, #4285F4 100%); | |
overflow:hidden; | |
} | |
canvas { | |
filter: drop-shadow(0 0 3em rgba(0,0,0,1)); | |
} | |
img{ | |
position:absolute; | |
display:none; | |
} | |
.mode{ | |
height:110px; | |
position:relative; | |
} | |
.attraction{ | |
height:220px; | |
position:relative; | |
} | |
div#info { | |
position: absolute; | |
width:50px; | |
height:100%; | |
right: 0; | |
z-index: 999; | |
top: 0; | |
color: #fff; | |
&:after{ | |
content:''; | |
display:block; | |
clear:both; | |
} | |
} | |
div.action { | |
background-color:rgba(0,0,0,.8); | |
position:absolute; | |
right:0; | |
width:50px; | |
height:50px; | |
cursor:pointer; | |
border-radius: 25px 0 0 25px; | |
transition-duration:.25s; | |
opacity:.75; | |
span{ | |
position:absolute; | |
width:150px; | |
height:2em; | |
left:50px; | |
top:0; | |
} | |
&:before{ | |
content:''; | |
display:block; | |
width:50px; | |
height:50px; | |
background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/61062/iconset.png); | |
background-size:100%; | |
} | |
&:hover{ | |
width:200px; | |
opacity:1; | |
} | |
} | |
@for $i from 1 through 6{ | |
.action:nth-child(#{$i}){ | |
$off : $i * 55px; | |
top:-50px + $off; | |
} | |
} | |
$colors : #4285F4,#EA4335,#34A853,#FBBC05,#cccccc,#eeeeee; | |
@for $i from 1 through 4{ | |
.attraction .action:nth-child(#{$i}){ | |
background-color:nth($colors, $i); | |
} | |
} | |
#vr_mode:before{ | |
background-position:0 300px; | |
} | |
#desktop_mode:before{ | |
background-position:0 250px; | |
} | |
#rollercoaster:before{ | |
background-position:0 200px; | |
} | |
#ferris_wheel:before{ | |
background-position:0 150px; | |
// background-position:0 100px; | |
} | |
#monster:before{ | |
background-position:0 100px; | |
//background-position:0 50px; | |
} | |
#explore:before{ | |
background-position:0 50px; | |
} | |
.mode{ | |
.action{ | |
border-radius:0; | |
} | |
#desktop_mode{ | |
line-height:50px; | |
} | |
} | |
.attraction{ | |
bottom:50px; | |
position:absolute; | |
right:0; | |
span{ | |
text-transform:uppercase; | |
line-height:50px; | |
padding-left:5px; | |
} | |
} |