Three.js
Three.js
https://threejs.org
Loads of examples, code and extensive documentation to get you
going and inspired, beyond the basics. Three.js is the leading library
of WebGL 3D.Three.js Online Docs
https://threejs.org/docs/#api/en/core/Geometry
The online docs are an invaluable resource for understanding
the ins and outs of the code. The link given here is to the section
on geometry, so you can jump straight to the extra options and
features if you need them.Blender
https://www.blender.org/
Blender is a free, open-source, 3D application with a built-in Three.
js exporter. When you need to go beyond simple geometries,
Blender is a great choice to start creating and exporting your own.Sketchfab
https://sketchfab.com
Not only does Sketchfab include an impressive library of models
that can be exported in a variety of formats that work great with
Three.js, the site also has some great articles on the topic of
3D geometry. If you need some quick models to test out in your
scene or are looking to purchase some premium assets, this is an
excellent resource.Essential resources
RESOURCESobjects[i].rotation.x += 0.005(i-10);
objects[i].rotation.y += 0.005(i-10);
}
renderer.render(scene, camera);
}
animate();
If you run your scene now, you should see your
rotating cubes.
STEP 7: CUSTOMISING GEOMETRY
Now that you have a working scene, you can delve
in and start customising the geometry you used.
We’ll do this with our box geometry, but you can do
this with any geometry you used from the built-in
options. Update your code where you had the line:
var geometry = new THREE.BoxGeometry( 1,1,1 ); to the
following code.
//Create an object
var geometry = new THREE.BoxGeometry( 1,1,1 );
//console.log(geometry);
geometry.vertices[0].y-=.5;
geometry.vertices[2].y+=.5;
geometry.vertices[4].x+=.5;
geometry.normalize();
geometry.computeFaceNormals();
What we are doing is using the built-in geometry
as usual but then targeting some of the vertices to
modify them. In this case you move the vertex at
position 0 down .5 units, the position 2 vertex up .5,
and the vertex at position 4 out along the x-axis .5
units. This will give the result of an angular-looking
cube. Try it out and experiment with the vertices to
see how they look.
After you update the vertices always be sure to
normalise the geometry (to help make scaling much