Modelo .obj de quadro A exibido mas quebrado

Question

May 10, 2017, 02:17 PM

Modelo .obj de quadro A exibido mas quebrado

Total de iniciantes para um quadro aqui, passaram pelas cenas do tutorial e agora estou configurando meu primeiro uso de modelos .obj.

Usando um servidor remoto, sinta-se como informações importantes.

Eu já vi perguntas sobre os modelos não aparecerem, mas o meu está mostrando quebrado e não sei por onde começar a corrigi-lo.

É assim que parece no Windows 3D Builder:

E é assim que fica no meu projeto (apoiado no plano rosa para contraste):

Aqui está o html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Pokemon Stadium</title>
    <link href="css/main.css" rel="stylesheet">
    <script src="https://aframe.io/releases/0.4.0/aframe.min.js"></script>
    <script src="js/main.js"></script>
</head>
<body>


<!-- Scene -->
<a-scene onLoad="">
    <!------------------------------------------------ Assets --------------------------------------------------------->
    <a-assets>
        <a-asset-item id="stadium-obj" src="assets/models/stadium/Pokemon+Stadium.obj"></a-asset-item>
        <a-asset-item id="stadium-mtl" src="assets/models/stadium/Pokemon+Stadium.mtl"></a-asset-item>
        <a-asset-item id="ivy-obj" src="assets/models/ivysaur/Pokemon.obj"></a-asset-item>
        <a-asset-item id="ivy-mtl" src="assets/models/ivysaur/Pokemon.mtl"></a-asset-item>
    </a-assets>


    <!------------------------------------------------- Scene --------------------------------------------------------->
    <!-- Skybox -->
    <a-sky color="#279DF4"></a-sky>


    <!-- Abyss -->
    <a-plane scale="1000 1000" position="0 -10 0" color="#212121" rotation="-90 0 0" material="shader: flat"></a-plane>


    <!-- Stadium -->
    <a-entity obj-model="obj: #stadium-obj; mtl: #stadium-mtl" position="0 0 -30" scale="0.05 0.05 0.05" material="side: double"></a-entity>

    <!-- Bulbasaur -->
    <a-entity obj-model="obj: #ivy-obj; mtl: #ivy-mtl" position="15 10 0" scale="1 1 1" rotation="0 90 0"></a-entity>


    <!-- Camera + cursor -->
    <a-entity camera look-controls position="10 12 0" rotation="-23 -90 0">
        <a-cursor id="cursor"
                  animation__click="property: scale; startEvents: click; from: 0.1 0.1 0.1; to: 1 1 1; dur: 150"
                  animation__fusing="property: fusing; startEvents: fusing; from: 1 1 1; to: 0.1 0.1 0.1; dur: 1500"
                  event-set__1="_event: mouseenter; color: springgreen"
                  event-set__2="_event: mouseleave; color: black"
                  fuse="true"
                  raycaster="objects: .link"></a-cursor>
    </a-entity>
</a-scene>
</body>
</html>