manniru
7/22/2018 - 3:28 PM

A-FRAME OBJ, MTL AND GLTF SIMPLE DEMO

A-FRAME OBJ, MTL AND GLTF SIMPLE DEMO

<html>

<head>
    <script src="js/aframe.min.js"></script>
    <!-- <script src="https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js"></script> -->
</head>

<body>
    <a-scene>
        <a-assets>
            <!-- <img id="skyTexture" src="360/360_0670_stitched_injected.JPG"> -->

            <!-- <img id="boxTexture" src="tree_bed_venge.jpeg"> -->
            <!-- <img id="groundTexture" src="images/floor.jpg"> -->

            <a-asset-item id="home1-obj" src="home/home3.obj"></a-asset-item>
            <a-asset-item id="home1-mtl" src="home/home3.mtl"></a-asset-item>

            <img id="texture" src="images/texure.jpeg">


        </a-assets>

        <a-entity position='50 50 30' rotation="-50 0 -10"><a-camera></a-camera>
          <a-animation attribute="rotation" to="-50 360 -10" dur="50000" repeat="indefinite"></a-animation>
          <a-animation attribute="position" to="50 90 30"  dur="8000" repeat="indefinite" direction="alternate"></a-animation>

        </a-entity>

        <!-- <a-entity position='50 50 30' rotation="0 90 0"><a-camera></a-camera>
          <a-animation attribute="rotation" to="0 360 0" dur="10000" repeat="indefinite"></a-animation>


        </a-entity> -->
        <!-- <a-box color="red"></a-box> -->
        <!-- <a-entity id="box" geometry="primitive: box" material="color: red"></a-entity> -->
        <!-- <a-box color="red" rotation="0 45 45" scale="1 1 1" ></a-box> -->
        <!-- <a-box position="0 2 0" rotation="0 45 45" scale="2 4 2"><a-sphere position="1 0 3"></a-sphere></a-box> -->
        <!-- <a-box color="red" position="0 2 -5" rotation="0 45 45" scale="1 1 1"></a-box> -->

        <!-- <a-entity environment="preset: forest; dressingAmount: 500"></a-entity> -->
        <!-- <a-box position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box> -->

        <!-- <a-entity gltf-model="#tree" scale="0.01 0.01 0.01"></a-entity> -->
        <!-- <a-obj-model position="0 1 -5" src="#chair-obj" mtl="#chair-mtl" scale="0.005 0.005 0.005"></a-obj-model> -->



        <!-- <a-obj-model position="2 1 -5" src="#bench-obj" mtl="#bench-mtl" scale="0.01 0.01 0.01" rotation="0 45 45"></a-obj-model> -->
        <!-- <a-obj-model position="3 -1 -1" src="#bed-obj" mtl="#bed-mtl" scale="0.01 0.01 0.01" rotation="0 0 0"></a-obj-model> -->

        <a-obj-model position="1 -1 -10" src="#home1-obj" mtl="#home1-mtl" scale="0.1 0.1 0.1" rotation="0 0 0"></a-obj-model>

        <a-box color="#FFFFFF" width="1" height="1" depth="1"
                   position="10 10 5"
                   rotation="45 45 45"
                   scale="5 5 5"
                   src="#texture"
                   >
                <a-animation attribute="rotation" repeat="indefinite" to="0 360 0"></a-animation>
            </a-box>
        <!-- <a-sky src="#skyTexture"></a-sky> -->
    </a-scene>
</body>

</html>
<html>

<head>
    <script src="js/aframe.min.js"></script>
</head>

<body>
    <a-scene>
        <a-assets>


            <a-asset-item id="home1-obj" src="home/home3.obj"></a-asset-item>
            <a-asset-item id="home1-mtl" src="home/home3.mtl"></a-asset-item>
            <a-asset-item id="earth_ball" src="gltf/earth_ball/earth_ball.gltf"></a-asset-item>


            <img id="texture" src="images/texure.jpeg">

            <item id="plane" src="gltf/tree.glb"></item>
            


        </a-assets>

        <a-entity position='50 50 30' rotation="-50 0 -10"><a-camera></a-camera>
          <a-animation attribute="rotation" to="-50 360 -10" dur="50000" repeat="indefinite"></a-animation>
          <a-animation attribute="position" to="50 90 30"  dur="8000" repeat="indefinite" direction="alternate"></a-animation>

        </a-entity>


        <!-- <a-obj-model position="1 -1 -10" src="#home1-obj" mtl="#home1-mtl" scale="0.1 0.1 0.1" rotation="0 0 0"></a-obj-model> -->
        <!-- <a-entity id="plane" gltf-model="gltf: #plane" position="11 11 6"></a-entity> -->
        <a-entity id="earth_ball" gltf-model="#earth_ball"></a-entity>



        <a-box color="#FFFFFF" width="1" height="1" depth="1"
                   position="10 10 5"
                   rotation="45 45 45"
                   scale="5 5 5"
                   src="#texture"
                   >
                <a-animation attribute="rotation" repeat="indefinite" to="0 360 0"></a-animation>
            </a-box>
        <!-- <a-sky src="#skyTexture"></a-sky> -->
    </a-scene>
</body>

</html>