Adding Sound and 3D Media

We discuss possibilities for adding audio, video and 3d models on beamer and revealjs slides.

Adding Sound Media

To add HTML5 embeddings, such as audios, one can do with <audio> tag. This is not visible on beamer.

<audio controls="1">
  <source src="https://www.soundhelix.com/examples/mp3/
                                SoundHelix-Song-1.mp3"
          data-external="1" type="audio/mpeg">
  </source>
</audio>

3D embedding on PDFs

For multimedia and Beamer, it is recommended the media9 LaTeX package (old movie15 package).

Not that maximum version of Adobe Player supported is 9.4.1: - ftp://ftp.adobe.com/pub/adobe/reader/unix/9.x/9.4.1/enu/ (after 9.5 it will not work!).

This also requires flash-player. Sometimes it crashes with beamer, thus it’s certainly not a solid technology for the future.

On next slide, you will see a 3D dice, as long as you have Adobe 9.4.1 and Flash.

3D embedding example on Beamer

An example for dice.u3d.

\includemedia[
    label=diceB,
    width=0.3\textheight,height=0.3\textheight,
    activate=pageopen,deactivate=pageclose,
    3Dviews=3Dviews.txt,
]{}{dice.u3d}

Thanks the many advices on Internet, such as: https://tex.stackexchange.com/questions/228989/beamer-class-and-u3d-views?noredirect=1.

3D as an image

Beamer PDF: acroread beamer-3-media.pdf

This also requires a .u3d model, which can be generated by MeshLab. See Linux version: MeshLab AppImage.

Atom-only 3D

This will only appear on Atom.

Thanks a lot to this three.js tutorial.

To see this example on Atom, execute make run or any local server to http://localhost:8081, due to CORS.

Atom-only 3D (source-code)

<!-- BEGIN COMMENT -->
<canvas id="mycanvas1" width="500px"></canvas>
<label class="switch"><input type="checkbox" id="enable_canvas_c1"><span class="slider round"></span></label>
<script type="module">
import {createRenderCanvas} from 'http://localhost:8081/my3dobject.js';
window.createcanvas = createRenderCanvas;
</script>
\```javascript {cmd=true}
window.createcanvas("mycanvas1", "enable_canvas_c1", "http://localhost:8081/windmill.obj");
\```
<!-- END COMMENT -->

Again, thanks a lot to this three.js tutorial, which have been compressed in this helper script my3dobject.js, for object model windmill.obj.

See: https://threejsfundamentals.org/threejs/lessons/threejs-load-obj.html.

JS-only 3D

This will not appear on beamer, only on revealjs.

Try more formats

Feel free to try other plot formats and technologies.

Learning more

Please contribute with us if you find more nice things!