Положение камеры вызывает исчезновение объектов - PullRequest
Новая
       39

Положение камеры вызывает исчезновение объектов

0 голосов
/ 21 апреля 2020

Я занимаюсь разработкой приложения на стороне клиента Blazor, и мне нужно визуализировать 3D-сцену. У меня есть проблема, и я предполагаю, что она связана с материалом.

У меня есть состав параллелепипедов, один из которых полностью непрозрачный, а другие прозрачные.

В зависимости от угла наклона камеры, прозрачные полностью исчезают:

Пример, где все видно:

Example where everything is visible

Пример с двумя пропущенными:

Example with 2 missing

Пример со всеми недостающими:

Example with all missing

Код для прозрачных параллелепипедов 

var geometry = new THREE.CubeGeometry(item.xDimension * _scene.normalizer, item.yDimension * _scene.normalizer, item.zDimension * _scene.normalizer);

var material = new THREE.MeshBasicMaterial();

var box = new THREE.Mesh(geometry, material);

box.material.color = new THREE.Color("gray");
box.material.opacity = 0.8;
box.material.transparent = true;

Код для камеры: 

var camera = new THREE.PerspectiveCamera(60, width / height, 0.1, 100);
camera.position.set(1.3, 1.3, 1.3);
camera.lookAt(0, 0, 0);

Я использую OrbitControls и каждый размер объекта составляет от 0 до 1 (_scene.normalizer для этой цели)

Знаете ли вы почему это происходит?

Редактировать: Я обнаружил, что это проблема с функцией глубины материала. Вы знаете, что я должен использовать?

Спасибо,

1 Ответ

1 голос
/ 22 апреля 2020

Прозрачность сложна с WebGL, потому что прозрачный объект записывает данные в карту глубины, и затем средство визуализации предполагает, что последующие объекты за ним закрыты, поэтому пропускает их рисование. Этого можно избежать, играя с атрибутами материала .depthTest и .depthWrite ( см. Документы ): 

box.material.color = new THREE.Color("gray");
box.material.opacity = 0.8;
box.material.transparent = true;
box.material.depthWrite = false;
...