如何在两张图片或两层之间放置模型

问题描述

所以我对网络增强现实有点陌生，我正在练习制作类似 Roomvo 的地毯演示。 (https://www.roomvo.com/my/rugdemohomepage)

我为此使用了three.js，并且已经准备好模型和转换控件。我需要做的就是将这个模型放在两张图片或图像层之间，或者…… 那就是我被困在的地方。我可以将scene.background 设置为地板图片的纹理，但我不知道如何处理front layer。

我试过使用精灵和平面（这些的问题是它们在 3d 空间中）或用 CSS 加载前层（但这会将图像放在所有东西的前面，你不能做任何事情与页面或与之交互）。

这是我的代码的一部分

<script>
    function init() {
        renderer = new THREE.Webglrenderer({ alpha: true });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth,window.innerHeight);
        document.body.appendChild(renderer.domElement);

        const aspect = window.innerWidth / window.innerHeight;

        cameraPersp = new THREE.PerspectiveCamera(50,aspect,0.01,30000);
        currentCamera = cameraPersp;

        currentCamera.position.set(0,0);
        currentCamera.lookAt(0,0);

        scene = new THREE.Scene();
        const texture = new THREE.TextureLoader().load('back.jpg');
        scene.background = texture;
        scene.renderOrder = 1;

        var map = new THREE.TextureLoader().load("trans-front.png");
        var material = new THREE.SpriteMaterial({ map: map,color: 0xffffff });
        var sprite = new THREE.Sprite(material);
        sprite.scale.set(5 * 1.25,5);
        sprite.position.set(0,-3.5);
        sprite.zIndex = 900;
        scene.add(sprite);
        sprite.renderOrder = 900;

        const light = new THREE.AmbientLight(0xffffff,1);
        light.position.set(0,0);
        scene.add(light);

        control = new TransformControls(currentCamera,renderer.domElement);
        control.addEventListener('change',render);

        const loader1 = new GLTFLoader();
        loader1.load('rug.glb',function (rug) {
            rug.scene.traverse(function (child) {
            });
            control.attach(rug.scene);
            rug.scene.scale.set(16,3,16);
            rug.scene.rotation.set(-0.1,0);
            rug.scene.position.set(-3,-2,-6);
            rug.scene.zIndex = 1;
            scene.add(rug.scene);
            rug.scene.renderOrder = 2;
            render();
        });
        control.showY = false;
        scene.add(control);
        window.addEventListener('resize',onWindowResize);
        window.addEventListener('keydown',function (event) {
            switch (event.keyCode) {
                case 81: // Q
                    control.setSpace(control.space === "local" ? "world" : "local");
                    break;
                case 87: // W
                    control.setMode("translate");
                    //control.showY = false;
                    control.showZ = true;
                    control.showX = true;
                    break;
                case 69: // E
                    control.setMode("rotate");
                    control.showY = true;
                    control.showZ = false;
                    control.showX = false;
                    break;
                case 82: // R
                    control.setMode("scale");
                    control.showY = false;
                    control.showZ = true;
                    control.showX = true;
                    break;
            }
        });
        window.addEventListener('keyup',function (event) {
            switch (event.keyCode) {
                case 16: // Shift
                    control.setTranslationSnap(null);
                    control.setRotationSnap(null);
                    control.setScaleSnap(null);
                    break;
            }
        });
    }
    function onWindowResize() {
        const aspect = window.innerWidth / window.innerHeight;
        cameraPersp.aspect = aspect;
        cameraPersp.updateProjectionMatrix();
        renderer.setSize(window.innerWidth,window.innerHeight);
        render();
    }
    function render() {
        renderer.render(scene,currentCamera);

    }
</script>

那我能怎么办？我应该为此使用three.js吗？

非常感谢您的帮助和感谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）