Добавление составного объекта three.js в A-Frame вызывает неожиданное мерцание дочерних объектов - PullRequest
0 голосов
/ 08 мая 2018

Я добавляю опыт дополненной реальности в свое веб-приложение, изначально созданное с использованием threejs

У меня есть составной объект (который является экземпляром Object3D с несколькими сетками). но помещая его в A-Frame, дает неожиданные мерцания, показанные ниже

flickering image Картинка оригинального веб-приложения с ThreeJS приведена ниже three.js app У меня есть код three.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

Ответы [ 2 ]

0 голосов
/ 14 апреля 2019

У меня была точно такая же проблема. После нескольких проб и ошибок я смог это исправить

  1. Добавлена ​​последняя версия aframe

  2. Добавить <a-scene embedded artoolkit='sourceType: webcam;' renderer='logarithmicDepthBuffer: true;'>

  3. Добавить <a-marker-camera camera="far:100000; near:0.01" >
  4. Основной причиной был свет, уберите все огни и добавьте в сцену только свет полусферы, а потом импровизируйте на другие огни.

Надеюсь, это решит и вашу проблему.

0 голосов
/ 10 мая 2018

Это похоже на Z-бой Версия three.js работает в другой системе, нежели ваша версия aframe?

Разные платформы имеют разную точность z-буфера. Может потребоваться внести изменения в геометрию, чтобы компенсировать ограниченное разрешение.

Кроме того, я не знаю об AR.s, но у ТРИ рендера есть опция «logarithmicDepthBuffer», которая может увеличить разрешение вашего z-буфера в ближнем масштабе, но может иметь некоторые побочные эффекты.

...