创建具有交互性的360度旋转图像

Question

我想在这里构建类似的东西> https://www.jamesallen.com/engagement-rings/solitaire/14k-gold-two-tone-22mm-comfort-fit-solitaire-engagement-ring-item-64340

我可以看到它正在使用react 360，但是我不确定该怎么做。 我可以使用360张全景照片，但是我不确定它们如何使图像旋转。 有没有人有关于如何做到这一点的建议。 谢谢

我尝试了这个，但这不是我想要的。

function init(bundle, parent, options = {}) {
  const r360 = new ReactInstance(bundle, parent, {
    // Add custom options here
    fullScreen: true,
    ...options,
  });

  // Render your app content to the default cylinder surface
  r360.renderToSurface(
    r360.createRoot('Hello360', { /* initial props */ }),
    r360.getDefaultSurface()
  );

  // Load the initial environment
  r360.compositor.setBackground(r360.getAssetURL('360_world.jpg'));
}

window.React360 = {init};```

Answer 1

我还没有使用过React 360，但是我用pisi制作的“ jQuery Reel js”插件做了非常相似的事情。我发现它非常直观且易于更改设置。