Skip to main content
P
pjphotos
Inspiring
November 29, 2016
Answered

Embedding STL/VRML file in Captivate

  • November 29, 2016
  • 3 replies
  • 1970 views

Hi -

I would like to embed a 3d image into my course, and allow the user to rotate/zoom the render.  There are a number of ways to do this in a webpage, namely three.js/webGL.

What is the best way to build this?  My thoughts:

1) I suppose you can add custom js/css somewhere and then name the element appropriately

2) Use the JavaScript feature within Captivate (not sure how to populate the result in a specific smart object?)

3) build a widget to do this

4) some AnimateCC workaround? 

5) build in custom page on separate server and use iframe/web feature

6) build in custom page on local directory and use iframe/web feature?

Any thoughts on which way is the best way forward?

    This topic has been closed for replies.
    Correct answer pjphotos

    I found a workable solution:

    1) Convert your object to OBJ - that means you will have two files, .OBJ and .MTL

    2) Build a small webpage using three.js, objloader.js, mtlloader.js and the associated index.html file (see this page: https://manu.ninja/webgl-3d-model-viewer-using-three-js  for a starting point - I only made a few tweaks from there),

    3) Test your object, make sure you like the view/colors/settings

    4) ZIP the entire directory of that page into a ZIP File

    5) In Captivate, OBJECTS->WEB->ADDRESS-> Click on the FOLDER icon next to the box, and select your ZIP File.

    6) Resize and position as needed.  Be sure to have AUTO LOAD checked.

    NOTE: This will not preview in the viewer, nor in the local playing of your content in Chrome (you have to use Firefox or Safari).  The SCORM package will, however, play the file.

    With the right settings, you can rotate, orbit, zoom, and drag the object within the course.  You can even set it to begin rotating on load!

    From there - you can honestly imbed anything like this that is pure css/js/html...

    3 replies

    P
    pjphotosAuthorCorrect answer
    Inspiring
    November 29, 2016

    I found a workable solution:

    1) Convert your object to OBJ - that means you will have two files, .OBJ and .MTL

    2) Build a small webpage using three.js, objloader.js, mtlloader.js and the associated index.html file (see this page: https://manu.ninja/webgl-3d-model-viewer-using-three-js  for a starting point - I only made a few tweaks from there),

    3) Test your object, make sure you like the view/colors/settings

    4) ZIP the entire directory of that page into a ZIP File

    5) In Captivate, OBJECTS->WEB->ADDRESS-> Click on the FOLDER icon next to the box, and select your ZIP File.

    6) Resize and position as needed.  Be sure to have AUTO LOAD checked.

    NOTE: This will not preview in the viewer, nor in the local playing of your content in Chrome (you have to use Firefox or Safari).  The SCORM package will, however, play the file.

    With the right settings, you can rotate, orbit, zoom, and drag the object within the course.  You can even set it to begin rotating on load!

    From there - you can honestly imbed anything like this that is pure css/js/html...

    P
    pjphotosAuthor
    Inspiring
    November 29, 2016

    Ok - so I converted the STL file to OBJ file (which isn't hard but annoying) and made a three.js page on my own server.  I embedded the page and it works quite well (Although previewing the content doesn't seem possible, nor is it visible in SWF form).

    But the user can rotate and size the object in 3D and the interface is quite clean.  I need to check to make sure embedding 4 or 5 of them doesn't choke the preloader.

    BDuckWorks
    BDuckWorks
    Inspiring
    November 29, 2016

    In any event, I'd encourage you to document your approach and share your results!

    IMHO, the approach should be driven by the needs of the customer and learners, that said: there's also considerations to be made for deploy-ability, maintainability and your skillset.

    If you have the 3D code working, I'd recommend that you take a Lean approach and build the course within Cp in such a way that links to the existing content, such as 5). (Building it locally as in (6), only makes sense for a short term demo!)

    4) Sounds like a workable option if you don't have the time, skills, or other resources needed to build a full-blown 3D scene.

    Once the scene is deployed, if you need to refactor, to share with other projects, then 1) comes into play.

    To me, 1), 2) and 3) sound like heavy lifting, I would leave those approaches for others who are more skilled in these tools.

    P
    pjphotosAuthor
    Inspiring
    November 29, 2016

    There are a million STL files out there for free, and they don't really require much work to render.  It provides a great interactive tool to be able to flip them around.  Since it isn't 3-D Scenes as much as single objects, the 3D part is really quite simple.

    There are certainly scripts out there to imbed into a webpage, for example, that will allow you to simply embed the file.  It is thought that HTML6 will allow certain filetypes like obj or stl to play natively, since it is so easy to render.

    By the way, when I said 'host locally', I meant that the html page is imbedded in the package but added later.

    S
    StevePixel
    Inspiring
    November 29, 2016

    I would go with option 5. You would have to ensure that the learner's browser could handle the object.

    Cheers,

    Steve 

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices