2015-01-28 3 views
2

Я искал какое-то время, чтобы получить 3d-модель, которую мы построили в SketchUp, чтобы она отображалась на веб-странице. Я нашел three.js и увидел, что я могу экспортировать его в .dae и использовать ColladaLoader для его загрузки. К сожалению, я пока не смог ничего показать на моем черном холсте. (Используя последний three.js от главного отделения, последний Chrome, последняя OS X.)SketchUp -> Canvas

Вот суть моего кода (вдохновленный 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 

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

ответ

0

Вы считаете, что загрузили свою модель в 3D warehouse, а затем воспользуйтесь Код для вставки, чтобы отобразить его на вашей собственной веб-странице?

Он предлагает как миниатюр вида и 3D-просмотр с зумом, панорамированием и вращают варианты.

enter image description here

1

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