Exercise 3: Adding 3D Models

A-Frame allows use to import 3D Models into our environment. The models for your environment can be build from scratch in a modeling program like Blender, Maya or you could use an existing model in the following formats: glft, obj

Where to Find Models

Places to find 3D models include:

Download this ant model and forest background for this example.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Exercise-3</title>
    <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
</head>

<body>
    <a-scene>
        <a-assets>
            <a-asset-item id="trex" src="../images/trex.obj"></a-asset-item>
            <img id="forest" crossorigin="anonymous" src="../images/forest.jpg">
        </a-assets>
        <a-sky id="image-360" radius="10" src="#forest"></a-sky>
        <a-plane position="0 -6 0" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane>
        <a-entity obj-model="obj: #trex;" scale="0.008 0.008 0.008" position="-3 -4 -5" material="color: brown" rotatation=""></a-entity>
    </a-scene>
</body>

</html>

Leave a Reply

Your email address will not be published. Required fields are marked *