嵌入 Canvas 自转的 3D 模型

Question

我们如何准确地自动旋转嵌入 canvas 中的 3D 模型。

请在下面找到实现的代码：

HTML:

        <canvas id="cv1" width=264 height=264>
                It seems you are using an outdated browser that does not support canvas :-(
        </canvas>

JavaScript:

        <script type="text/javascript" src="jsc3d.js"></script>
        <script type="text/javascript" src="jsc3d.touch.js"></script>
        <script type="text/javascript">
            var viewer = new JSC3D.Viewer(document.getElementById('cv1'));
            viewer.setParameter('SceneUrl',         'Cupid Heart.obj');
            viewer.setParameter('ModelColor',       '#6F4E37');
            viewer.setParameter('BackgroundColor1', '#D2B48C');
            viewer.setParameter('BackgroundColor2', '#964B00');
            viewer.setParameter('RenderMode',       'flat');
            viewer.init();
            viewer.update();
        </script>

我检查了许多其他帖子，但它不起作用。非常感谢您的帮助。

更新：

可以CSS修复吗？

Answer 1

有新版本的 JSC3D，它具有您要求的所有功能。加载模型的旋转直接集成在 JSC3D 原型中。

您只需要在查看器初始化时设置参数 "SceneRotation" 和 "AutorotateSpeed"。

回购： https://github.com/deblocker/jsc3d.v2/tree/master/jsc3dv2

嵌入 Canvas 自转的 3D 模型

3D model embedded in Canvas autorotation

javascript

css

canvas

jsc3d