gardentrio.blogg.se - Toweb tutoriel

This switches the way compatible browsers will interact with the scene. If we do have a device which supports the DeviceOrientation spec (our Google Chrome mobile browser), then we take our the controls variable which previously had our OrbitControls object, and replace it with our DeviceOrientationControls object. Every Three.js visualisation needs a scene because that is where every other element is placed.

Our init() function begins by setting up our scene variable as a Three.js Scene object.

In our JavaScript, we set up our initial global variables and call an init() function that will kick everything off.

helvetiker_ – A font that we’ll be using within Three.js for our text.

OrbitControls.js – Allows us to control the scene by dragging it around with our mouse or via touch events, in those cases when DeviceOrientation events aren’t available (usually just when you’re testing on your computer).

It follows the W3 DeviceOrientation Event specification.

DeviceOrientationControls.js – Provides Three.js with the ability to tell where our device is facing and where it moves to.

StereoEffect.js – Allows us to turn a regular Three.js display into one that is split into two, giving the illusion of depth (an “off-axis stereoscopic effect”) for our VR experience.

– The main minified library for Three.js.

These modules enable the functionality we want. We start by adding Three.js and a few key modules that also come with Three.js. If you haven’t used it before, there’s a bit of a learning curve but I’ll try to explain most things as we go. Our whole demo will be running on Three.js, a fantastic 3D JavaScript library that makes rendering 3D in the browser much simpler to grasp.