Артефакты в сцене three.js/editor

У меня проблема... Сейчас пытаюсь запустить сцену в three.js/editor и у меня образуются артефакты в виде квадратных плоскостей (при анимации). Если я использую обычный three.js, а не редактор - таких проблем нет... В чем может быть проблема, ведь код тот же?

На что это похоже:

Код из редактора:

let cloudParticles = [];

function init() {
    camera.position.z = 1;
    camera.rotation.x = 1.16;
    camera.rotation.y = -0.12;
    camera.rotation.z = 0.27;

    let ambient = new THREE.AmbientLight(0x555555);
    scene.add(ambient);

    let orangeLight = new THREE.PointLight(0xcc6600, 50, 450, 1.7);
    orangeLight.position.set(200, 300, 100);
    scene.add(orangeLight);
    let redLight = new THREE.PointLight(0xd8547e, 50, 450, 1.7);
    redLight.position.set(100, 300, 100);
    scene.add(redLight);
    let blueLight = new THREE.PointLight(0x3677ac, 50, 450, 1.7);
    blueLight.position.set(300, 300, 200);
    scene.add(blueLight);

    renderer.setSize(window.innerWidth, window.innerHeight);
    scene.fog = new THREE.FogExp2(0x000, 0.001);
    renderer.setClearColor(scene.fog.color);

    let loader = new THREE.TextureLoader();
    loader.load("https://lh3.googleusercontent.com/fife/ABSRlIqJR2ZrAReJs75iIIXGvDZgXFkEXYbx-cbNo1nMQKSv78cRcQhLDDgLjJfjcr3UFEtfAhiDG8JhPo55QTnGMF_v0ByABvmPDkgqXFsFrdcQF2bTdfAK5ur9gEknzSjKwIeiOFaffjfrK9-ihNaCYSeLzUhABcs485M6Hnz38Ub-al9UCZEVDwJLi3VHGYLiTt8V3chcfmRE7VuICvJ7BhND548fcg1yHkyIqBqN9LKkL3NEjHmqPiUL80cU5uX8Ewhztmp9bcXJ-_auCE-ndA3rrrqhPqCw33-ftR-YiIcq24tS2ofRyhIMnSDHAWwoa7rc_5p_Khz7iRVr10GAjV-MxbpLGJS0PzmonKLdW7VHKNJrcNSpPRu8BrG_ylIksb-FKI066vyKk58Ejc1uVgF6JpOsy9EoPr3Um2enBi611ICQBMmZDi9eP-qyWNI2Yv11_69SiQqErpxRc_V77BYyCrHqjIi-afOg6J_QdAlgUkSSQ8bUU2BLVvdmOwhZw7KNIStOi3HeWuilv4Gh0Gf0qLMUNzxbIBWY95PiPfFyNxfMDnHX8lcRO19d2ZSddvbK4RFl8Y8JjxUzBTzyHJXJPPlD7_fsvRM0RJcLQJY0LvPdxJKS_kGl3CJXkm2Ftg93VJjRGZqMZoA_7husvIIKNHsEXXc6f5EbWZ63pGkzXRigh3mO3dgtmXWRt2txvXHVF1eIZOkW68kLr3pQHITBrfNn9Ql6wIQ=w1135-h937-ft", function(texture) {
        cloudGeometry = new THREE.PlaneBufferGeometry(500, 500);
        cloudMaterial = new THREE.MeshLambertMaterial({
            map: texture,
            transparent: true,
        });

        for (let p = 0; p < 50; p++) {
            let cloud = new THREE.Mesh(cloudGeometry, cloudMaterial);
            cloud.position.set(
                Math.random() * 800 - 400,
                500,
                Math.random() * 500 - 500
            );
            cloud.rotation.x = 1.16;
            cloud.rotation.y = -0.12;
            cloud.rotation.z = Math.random() * 2 * Math.PI;
            cloud.material.opacity = 0.55;
            cloudParticles.push(cloud);
            scene.add(cloud);
        }
    });

    render();
}

function render() {
    cloudParticles.forEach(p => {
        p.rotation.z -= 0.001;
    });
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}

init();
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
0
91
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий
cloudMaterial = new THREE.MeshLambertMaterial({
    map: texture,
    transparent: true,
});

Попробуйте добавить depthWrite: false к конфигурации вашего материала.

Другие вопросы по теме