Ada Rose Cannon
Jul 10, 2017 · 3 min read

Using Google’s Blocks with A-Frame to make exciting scenes!

Google has recently launched blocks, blocks is a user friendly tool for 3D modelling, items made in blocks are added to a repository under a Creative Commons license.

Here is how to use these models in A-Frame:

1. Go to the objects page of blocks: https://vr.google.com/objects

2. Find an object you like

3. Download Object

4. Extract files and put them in your project

I am using https://glitch.com to build my project so I will add them to the assets folder of Glitch.

5. Use them

Make an <a-assets> tag if it does not already exist.

To that add <a-asset-item> for the material an obj.

Use obj-model="obj: #obj; mtl: #mtl” to add the object to an <a-entity> In the scene.

<a-assets>
<a-asset-item id="mtl" src="./materials.mtl"></a-asset-item>
<a-asset-item id="obj" src="./model.obj"></a-asset-item>
</a-assets>

<a-entity obj-model="obj: #obj; mtl: #mtl;"></a-entity>

6. Oh dear it is tiny and in the floor at our feet.

7. Make it bigger, move it up and in front of the camera.

I added position and scale to make it 5x bigger and positioned two units up and 5 units away from the camera.

<a-entity obj-model="obj: #obj; mtl: #mtl;" position="0 2 -5" scale="5 5 5"></a-entity>

Final Code for this demo:

<!DOCTYPE html>
<html lang="en">
<head>
<title>AFrame Demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/feiss/aframe-environment-component/ad57b15d/dist/aframe-environment-component.min.js"></script>
</head>
<body>
<a-scene>

<a-assets>
<a-asset-item id="mtl" src="https://cdn.glitch.com/b57e6f01-0eed-4775-bd9a-9951d1f0c7ab%2Fmaterials.mtl?1499698177296"></a-asset-item>
<a-asset-item id="obj" src="https://cdn.glitch.com/b57e6f01-0eed-4775-bd9a-9951d1f0c7ab%2Fmodel.obj?1499698177926"></a-asset-item>
</a-assets>

<a-entity obj-model="obj: #obj; mtl: #mtl;" shadow="receive: false;" position="0 2 -5" scale="5 5 5"></a-entity>

<a-entity environment="shadow: true; shadowSize: 10; preset:default;" ></a-entity>
</a-scene>
</body>
</html>

Samsung Internet Developers

Writings from the Samsung Internet Developer Relations Team. For more info see our disclaimer: https://samsunginter.net/about-blog

Ada Rose Cannon

Written by

Co-chair of the W3C Immersive Web Working Group, Developer Advocate for Samsung.

Samsung Internet Developers

Writings from the Samsung Internet Developer Relations Team. For more info see our disclaimer: https://samsunginter.net/about-blog

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade