Saturday, July 2, 2016

Three.js and Blender

I have been experimenting with Blender, following a tutorial to create a capital ship for a sci fi 3D game. Also, I have been following tutorials on using Three.js to display 3d scenes in the browser using WebGL/HTML5. So far, I have the object I have created importing into the Three.js scene, but without textures. Three.js is still in early development and does not have full texture loading support for JSON object format. https://github.com/DiginessForever/randomCode/tree/master/Javascript/threeJSplayground I also have the MakeHuman Blender plugin installed. It does not offer sliders to change attributes / only offers the default male/female models. I need to learn how to do rigging for animation in game. ---------------- Earlier explorations with Three.js and surveying voxel.js docs / code (22 May 2016): So I'm almost to the same point this guy is at (minus the attaching a bunch of blocks together and removing all hidden vertices). How cool would it be to have a minecraft-like game in the browser running from javascript? I probably have a lot to learn from this community - haven't used Node.js yet, but have heard quite a bit about it. Not sure how I feel yet about their package control with npm, browserify, and beefy, with it downloading the latest version every time you reload the page. Seems inefficient / wasteful and makes a lot of assumptions about availability of the servers in order to work. http://voxeljs.com/ Note: If I understand correctly, a voxel is a 3D cube. Don't let it confuse you when he talks about triangles / not using those yet - the 3D cube is made up of 6 square faces, each of which is two triangles, each triangle being 3 vertices. I have a bit more to learn about the model file formats - have found them a bit confusing because they have redundant information (probably to enable better sorting / indexability). It took me a bit of playing with code (in three.js) to be able to change the color of the square faces. I had to load images into an array, then create the mesh (3D object with textures applied) by giving it that image array. Here's my latest code: https://github.com/DiginessForever/ Just grab threeJSplayground2.html, three.min.js, and THREEx.KeyboardState.js and put them all in the same folder and open the html file in your browser. I do need to figure out why it's not working for me on my laptop in Firefox while it worked on another computer in IE. (With the inclusion of that THREEx.KeyboardState.js, handling the keyboard is a simple if statement for each key, then put the action you want to happen inside the if.) Next thing for me to experiment with is making "chunks" (basically set up a parent 3D cube and start adding a bunch of child cubes). Each chunk in Minecraft is a bunch of cubes, 16x16x however far up and down your world goes. Not sure exactly how MC handles hidden cubes. I also need to minimize the size of the images I'm putting on the voxels - loading is too slow with the image sizes I'm using now. Other than that - terrain and skyboxes (auto terrain generation, and making the skybox look good by stretching its image properly). http://voxelmetaverse.com/ http://humaan.com/web-3d-graphics-using-three-js/ ---------- 5 March 2016: I've hacked my way through the first coherent WebGL tutorial I could find. I've simplified the code there and it's easier to look at. Got my first triangle and square in the browser -- Had to look through the comments for hints on problems with the code, there's two lines that have to change for it to work: http://learningwebgl.com/blog/?p=28

No comments:

Post a Comment