Interactive 3D Viewer

Our Interactive 3D Viewer allows students to explore models, environments or animations in 3D virtual space within their Canvas course.

• The models and environment are customizable.

• It allows students to pan, zoom and rotate the model / scene / animation in any direction using their mouse.

Controls

• Rotate: left click and drag

• Zoom: scroll click and drag up and down… or use scroll wheel

• Pan: right click and drag

Examples

• Brain

• Earth and Moon Labeled

• Interactive 3D viewers embedded in Canvas (Multimedia Team Canvas / Sandbox)

• More Open Source Examples

Potential Applications

• Anatomy Review

Server

• worked with Michail Rudyi <michailrudyi@boisestate.edu> to setup server

• Linux

• 3.10.0-1160.42.2.el7.x86_64 GNU/Linux

• Red Hat Enterprise Linux Server release 7.9 (Maipo)

• eCampus server reboots monthly in early hours on a Friday (worked with Grayson Walker <graysonwalker@boisestate.edu>)

Linux Commands

You will need to use Linux Commands to navigate, upload files, view files, etc. on the server. Some common commands are as follows…

• where am I?: pwd

• list files (list storage): ls

• navigate to root directory: cd

• navigate to parent directory: cd ..

• navigate to a specific directory: cd /folder/folder

• navigate to eCampus interactive 3D viewer directory: cd /var/www/html/threejs/examples

• make new directory: mkdir FolderName

• remove file: rm filename.ext

• copy file: cp FileNameToCopy.txt newFileName.txt

• move file to parent folder: mv testfile.txt ..

Procedure

To upload a file to the server, you must first connect to the VPN, then scp the file to your profile on the server. Then sudo copy the file from your profile to the appropriate directory on the server. (see steps below)

Use GlobalProtect to connect to VPN

• https://www.boisestate.edu/oit-network/vpn-services/ for download links and instructions

• Start > All Programs > Palo Alto Networks > GlobalProtect >

• Portal address: vpn.boisestate.edu

• Connect

• Enter Boise State username and password, confirm via Duo, and leave Welcome window open.

SCP (secure copy) files to your profile on the server

• Copy file(s) you’d like to upload to your desktop

• Open shell window: Start > search > type “shell” > click “Command Prompt App”

• type "scp" followed by a space

• copy and paste file location

• Add slash \

• copy and paste filename

• add a space and type the address of your profile on the server: YOURUSERNAME@ecamp-lxp-01.boisestate.edu:/home/YOURUSERNAME/

• final command should look something like this:
  scp C:\Users\YourUserName\Desktop\FileName.html YOURUSERNAME@ecamp-lxp-01.boisestate.edu:/home/YOURUSERNAME/

• hit enter

• when prompted, enter password

• (note: If it doesn’t work, make sure you didn’t make any typos, and make sure you're still connected to the VPN via GlobalProtect. Sometimes it randomly kicks you off.)

Connect to Server

• Open PuTTY on a Windows Machine, to connect with server.
  To install PuTTY, visit www.chiark.greenend.org.uk/~sgtatham/putty

• Start > PuTTY > PuTTY

• host: ecamp-lxp-01.boisestate.edu

• port 22

• SSH

• Open

• When a secure SSH connection is established, a new shell session will start. Then you can manipulate the server by typing Linux commands.

• username: Your Boise State username and password (If you need access let me know: DanielRogers959@BoiseState.edu)

• Type in your password and hit Enter. (You will not see what you're typing)

Important Directories on Server

• Interactive 3D viewer html files: /var/www/html/threejs/examples

• 3D models: /var/www/html/threejs/examples/models

SUDO (Super User DO) copy file from your profile to the appropriate directory

• Using the PuTTY shell session, use the following code to copy html files to the “examples” directory…
  sudo cp FileName.html /var/www/html/threejs/examples

• Or use the following code to copy models to the “models” directory…
  sudo cp ModelFileName /var/www/html/threejs/examples/models

Test Interactive 3D Viewer

• Open the following URL in your browser… (Replace “FileName.html” with the html file you’d like to test.)
  https://ecampusmedia.boisestate.edu/threejs/examples/FileName.html

Embed in Canvas using iframe

• Side note: a webpage must be https to embed it into an https website. Fortunately, we have installed an SSL certificate for our server space, which grants html files within it https status, and allows them to be embedded into our https Canvas website.

• Insert the following code into Canvas Course page:
  <p>

      <iframe src="https://ecampusmedia.boisestate.edu/threejs/examples/bsu_brain.html " width="1920" height="1080"></iframe>

  </p>

• Change dimensions proportionately for desired size...

  <iframe src="https://ecampusmedia.boisestate.edu/threejs/examples/bsu_brain.html " width="958" height="563"></iframe>

Embed in a Confluence Article

• insert > view more > (scroll down) > Iframe > paste URL, use dimensions 750 x 422