0

我创建一个模型视图标签并加载 3d gltf 对象。

现在我要用鼠标移动来旋转它。我怎样才能做到这一点？我的代码：

        <style>
            body {
                background-color: rgba(255, 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>
4

0 回答 0