SketchUp -> Холст

Я долго искал, как сделать так, чтобы созданная нами в SketchUp 3D-модель отображалась на веб-странице. Я нашел файл three.js и увидел, что его можно экспортировать в .dae и использовать ColladaLoader для его загрузки. К сожалению, мне пока не удалось ничего отобразить на моем черном холсте. (Используя последнюю версию three.js из ветки master, последнюю версию 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);
  }

Вот что отображается в консоли при использовании ColladaLoader из репозитория three.js:

https://s3.amazonaws.com/screenshots.equityeats.com/rh1zz.png (инструменты разработчика зависают, поэтому я не могу копировать/вставлять)

Я просмотрел открытые проблемы для 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

Любая помощь/направление очень ценится.


person Miles    schedule 28.01.2015    source источник


Ответы (2)


Рассматривали ли вы возможность загрузить свою модель в 3D-хранилище, а затем использовать функцию Встроить для показать его на своей веб-странице?

Он предлагает как миниатюру, так и 3D-просмотр с параметрами масштабирования, панорамирования и поворота.

введите здесь описание изображения

person Jens    schedule 02.02.2015

Я согласен с решением 3D Warehouse. Кроме того, Sketchfab — отличный веб-сайт/сервис/инструмент для этого. Вы можете загружать свои модели SketchUp на их веб-сайт и даже добавлять аннотации, которые становятся своего рода сценами. Вы также можете встроить 3D-модель Sketchfab в публикацию на Facebook!

person katyakean    schedule 08.05.2015