Question

  <!doctype html>

<html>
<head>
<title>My A-Frame Scene</title>
<script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
 <script src="https://rawgit.com/oscarmarinmiro/aframe-video-controls/master/dist/aframe-video-controls.min.js"></script>
</head>
<body>
<a-scene>
  <!-- The original example also has this 180 degree rotation, to appear to be going forward. -->
  <a-videosphere rotation="0 180 0" src="#video" 
                 play-on-window-click
                 play-on-vrdisplayactivate-or-enter-vr>
  </a-videosphere>
  <a-entity id="model" position="0 0 0" >

   <a-obj-model class="collidable" position="0 4.300 .55" rotation="0 0 0" scale="0.1 0.1 0.1"
                     src="#foil" mtl="#material"></a-obj-model>

  </a-entity>
  <!-- Define camera with zero user height, movement disabled and arrow key rotation added. -->
  <a-camera user-height="0" wasd-controls-enabled="false" arrow-key-rotation>
    <!-- Text element for display messaging.  Hide once video is playing. -->
    <a-entity id="msg" position="0 -0.3 -1.5" text="align:center; 
            width:3;
            wrapCount:100;
            color:red;
            value:Click window to make the video play, if needed."
            hide-once-playing="#video">
    </a-entity>
  </a-camera>      

  <!-- Wait for the video to load. -->
  <a-assets>
    <!-- Single source video. -->
    <video id="video" style="display:none" 
           autoplay loop crossorigin="anonymous" playsinline webkit-playsinline>
      <!-- MP4 video source. -->
      <source type="video/mp4"
           src="https://ucarecdn.com/fadab25d-0b3a-45f7-8ef5-85318e92a261/" />

    </video>
     <a-asset-item id="foil" src="textures/obj3/dummy.obj"></a-asset-item>
    <a-asset-item id="material" src="textures/obj3/dummy.mtl"></a-asset-item>
  </a-assets>
</a-scene>


</body>

</html>

我想在视频背景上显示一个对象。这是我的代码。视频背景显示。但我无法显示该对象。我想显示那个对象。但是没有出现对象。如何在视频背景上显示该对象？

Answer 1

我认为这可能是一个定位问题。您的相机位于z0位置，型号位于z.55，这意味着它位于相机后面。

这是您的场景的简化示例，也许它可能会有所帮助。注意我添加了相机的位置，并将obj放在-1z。

https://glitch.com/edit/#!/a-frame-video-and-object

<a-scene>
  <a-assets>
    <!-- Single source video. -->
    <video id="vid" autoplay loop="true" src="https://ucarecdn.com/fadab25d-0b3a-45f7-8ef5-85318e92a261/"></video>
    <a-asset-item id="obj" src="https://cdn.glitch.com/0555142f-1162-4efc-aaac-8aa6252ce975%2FrycT637If__model.obj?1517698528339"></a-asset-item>
    <a-asset-item id="material" src="https://cdn.glitch.com/0555142f-1162-4efc-aaac-8aa6252ce975%2FH1g96anXLG__materials.mtl?1517698527046"></a-asset-item>
  </a-assets>
  <a-camera user-height="0" wasd-controls-enabled="false" arrow-key-rotation position="0 1.6 1">
    <!-- Text element for display messaging.  Hide once video is playing. -->
    <a-entity id="msg" position="0 -0.3 -1.5" text="align:center; 
            width:3;
            wrapCount:100;
            color:red;
            value:Click window to make the video play, if needed."
            hide-once-playing="#video">
    </a-entity>
  </a-camera> 
  <a-videosphere rotation="0 180 0" src="#vid"></a-videosphere>
  <a-obj-model src="#obj" mtl="#material" scale="1.2 1.2 1.2" position="0 1 -1" rotation="0 65 0"></a-obj-model>
</a-scene>

在aframe中显示视频背景上的对象

1 个答案: