SketchUp -> Canvas

Question

我一直在寻找如何让我们在 SketchUp 中构建的 3d 模型显示在网页上。我找到 three.js 并看到我可以将它导出到 .dae 并使用 ColladaLoader 加载它。不幸的是，我还没有能够在我的黑色 canvas 上显示任何内容。（使用master分支最新的three.js，最新的Chrome，最新的OS X。）

这是我的代码的要点（灵感来自 http://jsfiddle.net/f17Lz5ux/）：

  var camera, scene, renderer, my_model;

  init();

  function init() {
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 1000;

    scene = new THREE.Scene();

    var loader = new ColladaLoader2();
    //var loader = new THREE.ColladaLoader();

    loader.load('3d-model.dae', function(result) {
      my_model = result.scene;
      scene.add(prequel);
      animate();
    });

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);

    jQuery("#canvas").append(renderer.domElement);
    //document.body.appendChild(renderer.domElement);
  }

  function animate() {
    requestAnimationFrame(animate);

    my_model.rotation.x += 0.01;
    my_model.rotation.y += 0.02;

    renderer.render(scene, camera);
  }

以下是使用 three.js 存储库中的 ColladaLoader 时控制台中显示的内容：

https://s3.amazonaws.com/screenshots.equityeats.com/rh1zz.png（开发工具冻结所以我不能copy/paste）

我搜索了 three.js 的开放问题并找到了 https://github.com/rmx/threejs-collada，但这也不起作用。以下是使用该 collada 加载器时控制台中显示的内容：

ColladaLoader2 WARNING: Skipped element <asset>/<contributor>. Element is legal, but not handled by this loader.
ColladaLoader.js?body=1:7138 ColladaLoader2 WARNING: Skipped element <asset>/<created>. Element is legal, but not handled by this loader.
ColladaLoader.js?body=1:7138 ColladaLoader2 WARNING: Skipped element <asset>/<modified>. Element is legal, but not handled by this loader.
8ColladaLoader.js?body=1:7138 ColladaLoader2 WARNING: Skipped unknown element <library_visual_scenes>/<visual_scene>/<node>/<node>/<node>/<instance_node>.
76ColladaLoader.js?body=1:7138 ColladaLoader2 WARNING: Skipped unknown element <library_visual_scenes>/<visual_scene>/<node>/<node>/<instance_node>.
1112ColladaLoader.js?body=1:7138 ColladaLoader2 ERROR: Geometry primitive type lines not supported.
ColladaLoader.js?body=1:7138 ColladaLoader2 WARNING: Skipped unknown element <library_nodes>.
ColladaLoader.js?body=1:6103 Uncaught TypeError: undefined is not a function

非常感谢help/direction。

Answer 1

您是否考虑过将您的模型上传到 3D warehouse，然后使用 Embed 功能在您自己的网页上显示它？

它同时提供 缩略图 视图和 3D 查看器，带有缩放、平移和旋转选项。

Answer 2

我同意 3D 模型库解决方案。此外，Sketchfab 非常适合 website/service/tool。您可以将您的 SketchUp 模型上传到他们的网站，甚至可以添加注释，这些注释会变成场景之类的。您还可以将 Sketchfab 3D 模型嵌入到 Facebook post!

SketchUp -> Canvas

SketchUp -> Canvas

javascript

canvas

three.js

sketchup