将三个.js复合对象添加到A-Frame中，导致子对象意外闪烁

Posted 2021-05-03

我正在为我最初使用threejs创建的网络应用添加增强现实体验

我有一个复合对象（这是一个具有多个网格的Object3D实例）。但是将它放入A-Frame会产生意外的闪烁，如下图所示

带有threejs的原始web应用程序的 Pic在下面给出了我有三个.js代码，如下所示

scene = new THREE.Scene();
mainObj = new THREE.Object3D();
scene.add(mainObj);
renderer = new THREE.WebGLRenderer({alpha: true, antialias: true});
renderer.sortObjects = false
container = document.getElementById("canvas-container");
width = $(container).innerWidth();
height = $(container).innerHeight();
renderer.setSize(width, height);
container.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(75, width / height, 10, 2000);
camera.position.set(0, 67, 100);
controls = new THREE.OrbitControls( camera , container);
controls.dampingFactor = 0.2;
controls.enableDamping = true;
controls.target.set( 0, 10, -20 );
controls.maxPolarAngle = (Math.PI/2) - 0.05;
controls.maxDistance = 800;
controls.minDistance = 2;
controls.target.set(0, buildingConfig.h/2, buildingConfig.l/-2)
controls.enableKeys = false;
controls.update();
scene.add(camera);
light = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.7);
light.position.set(1, 10000, 1);
light.castShadow = true
scene.add( light );
renderer.render(scene, camera);
// logic to add child meshes to mainObj

我改为将其包含在A-Frame中。

<script type="text/javascript">
  initmodels();
  AFRAME.registerComponent('e1', {
    init:function(){
      this.el.setObject3D('building', mainObj);
    }
  });
</script>

<a-scene e1>

</a-scene>

我想这个问题与场景或渲染器有关。任何人都可以帮助我在A-Frame中设置适当的场景或渲染器

答案

这看起来像z战斗。 three.js版本是否在与您的aframe版本不同的系统上运行？

不同的平台具有不同的z缓冲区精度。可能需要您更改几何图形以补偿有限的分辨率。

此外，我不知道AR.s，但三个渲染器有一个“logarithmicDepthBuffer”选项，可以提高你的z缓冲区的分辨率，但可能有一些副作用。

另一答案

我有完全相同的问题。经过一些试验和错误后，我能够解决它

1. 添加了最近版本的aframe
2. 添加<a-scene embedded artoolkit='sourceType: webcam;' renderer='logarithmicDepthBuffer: true;'>
3. 添加<a-marker-camera camera="far:100000; near:0.01" >
4. 主要原因是灯光，取下所有灯光，只将半球灯光添加到场景中，然后在其他灯光下即兴发挥。

希望这也能解决你的问题。