问题描述
现在我要通过鼠标移动来旋转它。我怎样才能做到这一点? 我的代码:
<style>
body {
background-color: rgba(255,255,0.5);
}
#model {
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<model-viewer camera-orbit="0deg 0deg" class="a" id="model" orientation="45deg 45deg 0" auto-rotate src="static/models/scene.gltf" loading="eager"></model-viewer><script>
document.addEventListener('mousemove',parallax);
function parallax (e) {
this.querySelectorAll('#model').forEach(layer => {
const speed = 2;
const x = (window.innerWidth - e.pageX*speed)/100
const y = (window.innerHeight - e.pageY*speed)/100
layer.style.transform = `translateX(${x}px) translateY(${y}px)`
});
}
</script>
</body>
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)