Currently, I am in the process of working on 3D models for a project using three.js.
The model I am creating is a combination of basic geometries that come together to form a defense tower.
Specifically, I have 2 Boxes and 3 Cylinders that make up the structure.
Boxes:
var base = new THREE.Mesh(new THREE.BoxGeometry(7, 0.2, 7), new THREE.MeshPhongMaterial({color: 0xff000f}));
var head = new THREE.Mesh(new THREE.BoxGeometry(3, 1, 2.5), new THREE.MeshPhongMaterial({color: 0xaaffff}));
Cylinders:
var body = new THREE.Mesh(new THREE.CylinderGeometry(0.5, 0.5, 5, 20), new THREE.MeshPhongMaterial({color: 0xffffff}));
var leftCannon = new THREE.Mesh(new THREE.CylinderGeometry(0.35, 0.35, 4, 20), new THREE.MeshPhongMaterial({color: 0xffffff}));
var rightCannon = new THREE.Mesh(new THREE.CylinderGeometry(0.35, 0.35, 4, 20), new THREE.MeshPhongMaterial({color: 0xffffff}));
Please note that the colors of the materials are temporary.
Originally, I planned to add each mesh separately to the scene:
scene.add(base);
scene.add(body);
scene.add(head);
scene.add(leftCannon);
scene.add(rightCannon);
However, I believe there must be a more efficient way to do this, one that allows for more meshes without compromising performance.
I am considering using a container to hold all the geometries and adding a single object to the scene instead of multiple.
My goal is to have a unique material for each mesh (such as a metallic finish for the cannons and a dark color for the base) while still being able to manipulate each mesh independently (currently, the tower's head moves with mouse dragging and using WASD keys).