Блог

У меня проблема… Теперь я пытаюсь запустить сцену в 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();
 

 cloudMaterial = new THREE.MeshLambertMaterial({
    map: texture,
    transparent: true,
});
 

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