如何在模型查看器中使用代码旋转模型？

Question

我创建一个模型视图标签并加载 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>

Answer 1

据我所知，您应该在代码中将“相机控件”添加到正文部分。

在这个例子中：

 <body> <model-viewer src="static/models/scene.gltf" camera-controls ></model-viewer> </body>

如何在模型查看器中使用代码旋转模型？

问题描述

1 个解决方案

解决方案1
0 2022-06-13 09:45:20

如何在模型查看器中使用代码旋转模型？

问题描述

1 个解决方案

解决方案1 0 2022-06-13 09:45:20

解决方案1
0 2022-06-13 09:45:20