Question

这里的初学者到a-frame，已经完成了教程场景，我现在正在设置我的第一个使用.obj模型。

使用远程服务器，感觉就像这是重要的信息。

我已经看到有关模型没有出现的问题，但是我的模型显示已损坏，我不知道从哪里开始修复它。

这是它在windows 3D builder中的外观：

这就是它在我的项目中的样子（在粉红色的平面上支持对比）：

这是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>

Answer 1

您可能必须将材料的侧面类型设置为removeAllViews()。 ~~使用A-Frame，您应该能够在AEntity上使用以下DOM属性更改类型：THREE.DoubleSide。~~

如果不是这种情况，您应该使用场景元素的片段更新帖子。

编辑：

如图所示，我的模型部分渲染不正确。 THREEjs中的模型加载器读取模型中的所有网格并将它们绑定到分组对象。要解决此问题，您必须将网格物体的一侧设置为DoubleSided。幸运的是，在A-Frame中，material="side: double"组件在模型成功加载时发出一个事件，我们在DOM元素上为发出的事件obj-model添加一个监听器，并附加一个返回一个自定义的回调。客户发送对模型组的引用。查询AEntity，我已将model-loaded附加到我的身上。

modelEl

运行上面的脚本后，我的模型和一些纹理加载已得到修复。

需要考虑的是挖掘创建自定义组件以及修改或扩展obj模型组件以防止必须查询可能具有相同问题的每个模型。如果这些都不起作用，我相信你的wavefront obj导出设置可能有问题。

EDIT2：

关于我的评论，这是A-Frame中固定的obj文件的结果：

为方便起见，您可以在此处找到MTL和OBJ文件：

obj file

mtl file

A-Frame .obj模型显示但破碎

1 个答案: