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

Stack Overflow用户

提问于 2021-07-22 04:37:06

回答 1查看 494关注 0票数 0

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

现在我要用鼠标移动旋转它。我该怎么做？我的代码：

        <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>

javascript

model-viewer

回答 1

Stack Overflow用户

发布于 2022-06-13 09:45:20

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

在本例中：

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68479251

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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