如何解决如何在两张图片或两层之间放置模型
所以我对网络增强现实有点陌生,我正在练习制作类似 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 举报,一经查实,本站将立刻删除。