我曾多次尝试使用 a-frame 将导入的对象 (.obj) 放置在虚拟场景中,但不了解其背后的逻辑,也没有找到任何有用的文档。
我创建了一个边长为 1 的立方体,将其居中并向上移动,使其位于 xy 平面的顶部,z 轴穿过其中心(代码如下)。
然而,在场景内部,立方体并没有放在我期望的位置。如果将其放置在位置 (-1 | 0.5 | -3),我希望第一个顶点位于 (-1 + (-0.5) | 0.5 + 0 | -3 + (-0.5) ) = (-1.5 | 0.5 | -3.5 ),我放了一条蓝线。但是,顶点位于 (-1.5 | 0.5 | -3 ) 处,即绿线所在的位置。
我忽略了什么?
对象立方体的代码:
# OBJ file
v -0.5 -0.5 0
v -0.5 -0.5 1
v -0.5 0.5 1
v -0.5 0.5 0
v 0.5 -0.5 0
v 0.5 0.5 0
v 0.5 0.5 1
v 0.5 -0.5 1
g 0-0-0-0
f 1 2 3 4
f 5 6 7 8
f 1 5 8 2
f 4 3 7 6
f 1 4 6 5
f 2 8 7 3
虚拟场景:
<html>
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-assets timeout="10000">
<a-asset-item id="object-cube1_centered" src="objects/1x1x1x_cube_centered.obj"></a-asset-item>
</a-assets>
<a-entity
line="start: -1 0.5 -3; end: -1 2.5 -3; color: red"
line__2 = "start: -1.5 0.5 -3.5; end: -1.5 2.5 -3.5; color: blue"
>
</a-entity>
<a-entity
obj-model="obj: #object-cube1_centered"
material="color: red"
position = "-1 0.5 -3"
>
<a-entity
line="start: 0 0 0; end: 0 3 0; color: black"
line__2 = "start: -0.5 0 0; end: -0.5 3 0; color: green"
>
</a-entity>
</a-entity>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
</a-scene>
</body>
</html>