javascript - 场景中的工件 Three.js/editor

Question

我有一个问题...现在我正在尝试在 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();

Answer 1

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

尝试将 depthWrite: false 添加到您的 Material 配置中。