Voxel Skills
MagicaVoxel Tutorials
(run it by executing the MagicaVoxel application file)
Quick Intro to MagicaVoxel
There are so many 3D design apps such as MagicaVoxel, TinkerCAD and Blender. These programs can swap files if you use a common file type like .obj, glTF and .glb.
Task 1)
Watch '01 Intro Video' and '02 Camera Controls'. Familiarize yourself with Zoom, Rotate and moving around the space etc.
Task 2)
Watch video '03 Brush Basics' and practice, make sure you have briefly used all of the following parts of the UI with this buttons Cheat Sheet.
Basic Skills CHEAT SHEET:
Mouse wheel to zoom,
right click to rotate the frame around,
middle mouse hold to move the frame,
Attach to add something,
erase to remove something,
paint to change the colour of something.
L for Line for individual dots.
C for Centre, circle and square with hole.
V for voxel, 3d shapes of spheres and cubes, change the size.
F for Face, increase the depth of a face.
B for box, creating a rectangle to size.
Task 3) Converting Models
Before you download your MagicaVoxel files,
1) Save a .VOX master file in your Documents / 10DTEC / 'Voxel files' (.vox is equivalent to a layered PSD.)
2) Export the model mesh as an .OBJ object geometry and .MTL material texture files into an 'assets' folder.
3) Examine the export files. Find / Open up a sample model and export it as an OBJ. Open these 3 files (.obj / .mtl and .png) in a text editor Notepad++ and see how these are a list of xyz data and a reference their dependent files.
Convert to GLB
Convert the OBJ & MTL into a single to .GLB file (universal like a JPG for 3D):
Download to home
the .glb files into your Home Drive's / 10DTEC / 'GLB assets' / folder.
If you download a .glTF model from SketchFab.com you can convert it to .glb here: https://glb-packer.glitch.me/ )
Upload to Glitch 'assets'
Upload the GLB files to Glitch.com
Drag and drop the .GLB files into your Glitch 'assets' folder.
Use the Models
Try to use these the .GLB file in your webVR with the code.:
<a-scene>
<a-gltf-model id="horse" position="0 0 -3" rotation="0 100 0" src="URL"> </a-gltf-model>
</a-scene>
See: https://aframe.io/docs/0.9.0/components/obj-model.html#sidebar
Use .OBJ with .MTL
If you want to use both .OBJ & .MTL files together, then use this code (Note there is more information in the Presentation above about editing the .OBJ file's code so it looks in the right place for the .MTL file):
<a-scene>
<a-assets>
<a-asset-item id="tree-obj" src="/path/to/tree.obj"></a-asset-item>
<a-asset-item id="tree-mtl" src="/path/to/tree.mtl"></a-asset-item>
</a-assets>
<a-entity obj-model="obj: #tree-obj; mtl: #tree-mtl"></a-entity>
</a-scene>
Task 3) Example of a Knight and a Sheep
For Example: https://glitch.com/~mharrison-hello-v0
<a-gltf-model
id="knight"
position="-2 0 -3"
rotation="0 45 0"
size="3 3 3"
src="https://cdn.glitch.com/d1dc4696-7813-4016-805b-90b40393ea2f%2Fchr_knight2.glb?v=1597183105085"
>
</a-gltf-model>
<a-gltf-model
id="sheep"
size="0.5 0.5 0.5"
position="0 0 -3"
rotation="0 100 0"
src="https://cdn.glitch.com/0fc2d138-1979-4b80-8bae-51eb67b7ccb9%2Fsheep.glb?1544159918188">
</a-gltf-model>
Task 4) Environment Design: Build Trees
Watch Video 04 Voxel Tree. and the video below to build your own range of trees:
Task 5) Character Design: Build 4 Limbed Creatures
Watch Video 5 and video below: Build a humanoid and a pet.
Task 6) Make & Paint a model
Watch the video below to appreciate the importance of scale of the smallest detail. Adjust the XYZ scale of your 3D space.
Watch video '06 Colour Palette Part 1' and '06 Colour Palette Part 2'
Make and paint your own Voxel Unicorn or 3D Nyan Cat.
The original Nyan Cat
Task 7) Create Environments
Design an area with buildings, features like roads or rivers and trees.
Watch the short videos:
Task 8) Make Renders of your models
Watch the video below for inspiration. Click the Render tab. Save the Renderings (with lighting effects) as flat images (PNG or JPG) and publish on your Progress Blog.
Task 9) Combine everything you've made into the same Glitch.com webVR.
Upload all of your models. Add them to the <a-scene>.
Use scale, rotate and position properties to adjust them to make them fit together well.