Development

  1. Remix this project by pushing the Remix button. This will copy everything into your own project.

  1. The code to edit is in index.html. It is a boilerplate HTML file with the JavaScript library for A-Frame added. The first code we'll add is the main A-Frame component. This sets up all the rendering and VR capabilities.

    <a-scene></a-scene>
    
  2. The next thing we'll add is a plane for the floor. This uses the <a-entity> tag inside the <a-scene> tag. The geometry component is used to add 3D shapes to the entity. Let's rotate the plane to turn it from a vertical surface to one which lies along the ground.

    <a-entity geometry="primitive:plane;height:500;width:500" position="5 -2.48 -5" rotation="-90 0 0"></a-entity>
    
  3. We can change how the plane looks by using the material attribute, material="color:#00a5ae;roughness:1". The color can be any HTML color including names like lavenderblush and skyblue or even using hexcodes like #abcedf

    Your <a-entity> should now look like this:

    <a-entity geometry="primitive:plane;height:500;width:500" position="5 -2.48 -5" rotation="-90 0 0" material="color:#00a5ae;roughness:1"></a-entity>
    
  4. The intention is to use the plane to represent water and to make an island using a cube, so we're going to add an additional element for the land.

    <a-entity geometry="primitive:box;depth:20;height:20;width:20" shadow="cast:false;receive:true;" position="4 -9.94 0.80" material="color:#449b5b;roughness:1"></a-entity>
    
  5. For the light, we can use the <a-light> element. We can set the color to whatever we would like.

    <a-light light="type:ambient;intensity:0.2;color:skyblue"></a-light>
    <a-light position="-1 18 -14" light="color:#ffe6ba;castShadow:true;shadowCameraNear:1;shadowCameraTop:10;shadowCameraBottom:-10;shadowCameraLeft:-20;shadowMapHeight:1024;shadowMapWidth:1024;shadowBias:0.1;shadowCameraRight:10;penumbra:1">
    <a-sphere material="shader:flat;color:white;"></a-sphere>
    
  6. For the sky, we can use the element. The sky element is a giant inside-out sphere. We can set the color to whatever we would like. In this case, we can pick a nice sunset color (or whatever you prefer).

    <a-sky color="#ffc368"></a-sky>
    
  7. We can also import 3D models to the scene. Here, we are using a lighthouse model. You can add it to the scene like this:

    <a-assets>
        <!-- Model from Google Poly https://poly.google.com/view/eOEwsOqdcHl by Alex “SAFFY” Safayan -->
        <a-asset-item id="lighthouse-obj" src="https://cdn.glitch.com/e8b5d783-bf86-4104-9d3b-92edbcf0eb86%2Fmodel-triangulated.obj?1536741656667"></a-asset-item>
        <a-asset-item id="lighthouse-mtl" src="https://cdn.glitch.com/e8b5d783-bf86-4104-9d3b-92edbcf0eb86%2Fmaterials.mtl?1536741988245"></a-asset-item>
    </a-assets>
    
    <a-entity obj-model="obj:#lighthouse-obj;mtl:#lighthouse-mtl" position="10.12 7.50 -5.38" scale="10 10 10"></a-entity>
    
    • <a-assetslt; and <a-asset-itemlt; are used to import and store 3D models.

    • obj-model="obj:#lighthouse-obj;mtl:#lighthouse-mtl" makes the <a-entity> use those assets.

    You have now completed your lighthouse island scene!

  8. It's best to try this out in a Gear VR headset. However, even you don't have any, you can preview and run your code by clicking Show and press the small icon that appears in the browser to view the VR World. If you have a VR headset, you may follow the next steps.

  9. Open up the Samsung Internet browser (labelled Internet) on the phone. Take a look at the URL for your project (the one that loaded up in the separate tab when you pressed Show). Type in this URL in the Samsung Internet URL bar.

  10. Now put the smartphone in a Gear VR headset. Once you put the headset on, you should see the same scene inside a window in Virtual Reality.

  11. Tap on the trackpad on the side of the headset to click on the goggles icon in the bottom-right corner. This will make the scene fill the whole 360 degree environment. Take a look around and enjoy your WebVR experience!


You're done!

Congratulations! You have successfully achieved the goal of this Code Lab activity. Now, you can create a VR environment on Samsung Internet by yourself!