Car Showcase in VR – Collada Objects in WebVR
Collada Objects in WebVR – Car Showcase in VR
In this tutorial, we’ll learn how to add collada objects in WebVR to create a car showcase in VR. We’ll load a collada object of a car and place it on a floor to complete our demo.
This is part of #DaysInVR series. View All VR Projects. Yesterday we learnt how to add use custom geometry to add birds in VR. To we’ll see how to add collada objects in webvr to create a car showroom.
Join 6000+ Students
Upgrade your programming skills to include Virtual Reality. A premium step-by-step training course to get you building real world Virtual Reality apps and website components. You’ll have access to 40+ WebVR & Unity lessons along with their source code.
Start Learning Now
Adding collada object
To add the collada object, we have to use ColladaLoader
. We’ll scale the object to the desired size and then position the object infront of the camera.
1 2 3 4 5 6 7 8 9 10 11 12 |
var dae; var loader = new THREE.ColladaLoader(); loader.options.convertUpAxis = true; loader.load('bmw.dae', function(collada) { dae = collada.scene; dae.scale.x = dae.scale.y = dae.scale.z = 0.09; dae.position.set(0, controls.userHeight - 8, -16) dae.updateMatrix(); scene.add(dae); }); |
To rotate the car, we’ll manipulate the position of the object
. We’ll add the following code in animate
function.
1 2 3 4 5 |
var timer = Date.now() * 0.0005; dae.rotation.y = Math.cos( timer ) * 3; dae.updateMatrix(); |
Adding floor using Plane Geometry
We’ll use PlaneGeometry
to create a floor for our car. We’ll then apply the hardwood floor texture to create a material using MeshStandardMaterial.
1 2 3 4 5 6 7 8 9 |
var floorGeometry = new THREE.PlaneBufferGeometry( 20, 20 ); var floorMesh = new THREE.Mesh( floorGeometry, floorMat ); floorMesh.position.y = -6.3; floorMesh.position.z = -11 floorMesh.receiveShadow = true; floorMesh.rotation.x = -Math.PI / 2.0; scene.add( floorMesh ); |
We have to create our floorMesh
and position the floor below the car.
If you need help with setting up VRControls
and VREffect
, refer to the 360 photos in VR tutorial.
Its your turn
Load your own object to the and showcase it in VR. Once you have created your version, don’t forget to share them in the comments below.
Download Source Code
Kickstart VR development by downloading source code for this project. You’ll have instant access to source code and asset files. You can use them in your personal or commercial projects.
Leave a Reply