01: Basic VR
This post was published in 2016 and is kept here for reference. It may contain information that's outdated or inaccurate.
Kicking off Cardboctober I’ve decided to go with something very simple.
This is actually pretty much one of the JSCard demos that I created last November for my 20 Minutes into the Future with Google Cardboard and JavaScript talk.
I’m using Three.js (as I will be for pretty much all of the Cardboctober hacks), along with the StereoEffect.js and DeviceOrientationControls.js plugins to provide a VR experience.
So what does this do?
Not a lot actually, it’s just a spinning/bouncing red cube. If you view it through Google cardboard it will be stereoscopically 3D, and you will be able to look around.

Some caveats you’ll find with this very primitive 3D scene are that you can’t actually move from the fixed position that I’ve stuck the camera in, and the whole scene is oriented based on Cardinal North, so if you’re facing in the wrong direction you might not see the cube.
Cardboctober day 1
View this Cardboctober hack • View the source code on Github
View the other submissions for day 1 on the Cardboctober website.
Part of the "Cardboctober" series
- Announcing Cardboctober
- 01: Basic VR
- 02: Raycaster based look interaction
- 03: Even better gazed based look interaction
- 04: Skyboxes and generating meshes
- 05: Loading external models
- 06: VR Pairs Game
- 07: Cardboard hardware (cardware?)
- 08: Playing sounds
- 09: Speech recognition
- 10: HTML5 Video
- 11: Webaudio Beat Sequencer
- 12: AAAAH! Zombies
- 13: AAAAH! More Zombies
- 14: Debugging your Cardboard with Chrome
- 15: The Hierarchy of Needs in Quick Google Cardboard Hacks
- 16: Getting in and out of Fullscreen
- 17: Displaying Pertinent Information
- 18: Moving around in VR
- 19: Which way is North? Part 1
- 20: Which way is North? Part 2
- 21: One size doesn't fit all
- 22: Putting it all together
- 23: Planning Tetrominoes in VR
- 24: Basic Game Board
- 25: Creating and Moving Pieces
- 26: Rotating Pieces
- 27: Moving with gaze
- 28: Planning Revisited
- 29: Blocks out of the pram
- 30: Github Contributions
- 31: Something in the Shadows
Want to reply? I've hooked up Webmentions, so give it a go!