Tag Archives: ThreeJS

Bringing VR to the Web with Google Cardboard and ThreeJS

via Bringing VR to the Web with Google Cardboard and Three.js.

Virtual reality is coming. You know that as a developer – you want in. The Oculus Rift, Gear VR, HTC Vive and more are making waves, yet many developers don’t realise just how much potential there is in the simplest of them all – Google Cardboard.

I’ve been doing a series of IoT related articles here at SitePoint, exploring connecting web APIs to almost anything. So far I’ve covered web APIs and the Unity game engine, the Jawbone Up API and Node.js and displaying web API data on an Arduino LCD via Node.js. In this article, I wanted to bring web APIs into the virtual reality world in a way that will allow JavaScript developers to get started easily. Google Cardboard and Three.js is the perfect first leap into this. It also means your users don’t have to install anything specific and you won’t need to spend hundreds of dollars on a VR headset. Just get a compatible smartphone, slip it into a cardboard headset and you’re ready to go.

Visualizing a Twitter Stream in VR with ThreeJS and Node

via Visualizing a Twitter Stream in VR with Three.js and Node.

Twitter is a wonderful and information rich beast. I wanted to combine some of the powers of visualization, Three.js and its VR capabilities with Socket.IO and Node to create a pretty world of particles generated via a Twitter stream.

I’ve previously discussed all the basics of developing virtual reality web experiences in the SitePoint article Bringing VR to the Web with Google Cardboard and Three.js, so if you are new to this whole idea – read that one first and come back. This demo uses the same foundations.

The demo we will be building will watch a live Twitter stream for a keyword. When one is tweeted out whilst it is watching the stream, it will bring up a “tower” of shining particles that represent how long the tweet was. This demo in particular will look for mentions of the word “pizza”. Why pizza you ask? I was looking for a term which was not mentioned as frequently as “bieber” but more frequently than “boxcar racing hyenas”. In short, the best terms are ones which are relatively frequent enough that they’ll appear whilst you are watching, but not so frequent that they come through at many hundreds a second. Pizza is one of them.

Introducing Four: It’s WebGL, but Easier

via Introducing Four: It’s WebGL, but Easier.

WebGL has been around for a few years now and we have watched it mature into the reliable and widely supported graphics technology it is today. With big companies like Google, Mozilla, and Microsoft advocating for its use, it’s hard not being curious about it.

Since its specifications were finalized in 2011, it has gained a lot of attraction. With the help of frameworks like ThreeJS, BabylonJS and Play Canvas, this area has become less daunting. Thanks to them it’s much easier to pick up, but it still requires a good learning effort as it is a different discipline altogether.

This article will briefly introduce you to what WebGL is and then I’ll cover Four, a framework I created to help developers delve quickly into the WebGL world. In case you want to see what Four and WebGL can do for you, take a look at this simple demo I built.

3D Map Library Roundup

via 3D Map Library Roundup.

This is a quick roundup about WebGL map libraries. Since IOS is supporting WebGL and the browser support is getting better in general, it becomes a relevant technology for map applications too. Stepless zooming, tilting or rotating are features that almost all of the libraries can do. If the map is rendered on the fly and doesn’t rely on images, you can also change its styles and show and hide certain features on demand.

If you are missing a certain library just leave a comment or contact me via twitter.

How to Make a Smartphone Controlled 3D Web Game

via How to Make a Smartphone Controlled 3D Web Game | CSS-Tricks.

In this tutorial I’ll explain an approach on how to connect your smartphone to a 3D web game. We’ll be making a car which you can control by tilting your phone (using the phone’s accelerometer). We’ll use the JavaScript library three.js for working with WebGL as well as WebSockets through the socket.io library and a few other web technologies.

ThreeJS: Working with Cameras

via Three.js – Working with Cameras.

Our lessons on webgl are continuing. Today we review Threejs cameras. Threejs library provides two different cameras: orthographic camera (OrthographicCamera) and perspective camera (PerspectiveCamera). The best way to understand the difference between these cameras – try every one of them with your own eyes.

Cross platform, touch optimized 2D & 3D visualization

Cross platform, touch optimized 2D & 3D visualization made with HTML5 Canvas, WebGL and ThreeJS.