APPROACH

• Unpack, Blender .OBJ, .MTL and texture images along with checker.png to the same level in one folder. • Ensure .OBJ & .MTL filenames are the same with no spaces. o Note this name; we'll call it <name>. • Create a .XAR file as <name>.xar. • Create a support folder with name, <name>_xar_files. • Copy the unpacked Blender files into this folder. • Ensure the THREE Placeholder appear once in your design. Create a CANVAS Placeholder and put the following code into its Body: <canvas style='width: 100%; height: 100%; display: block;'></canvas> <script> var name = '<name>'; document.getElementsByTagName('canvas')[0].id = name; </script> • Place a copy of the SCENE Placeholder with the CANVAS Placeholder. • Only every have one SCENE Placeholder and one CANVAS Placeholder on a given page. • You should never have to alter THREE or THREE. • You should only have to open CANVAS Placeholder. • to change the var name (change <name>) to match your .OBJ/.MTL/.XAR files.