I attempted to create an Octahedron shape, but the final result did not meet my expectations. I am unsure of the reason behind this. Instead, I now plan to draw a Dodecahedron. Any suggestions or advice on how to achieve this? Click here to view the outcome of the Octahedron.
Here is my code:
var mesh, renderer, scene, camera, controls;
init();
animate();
function init() {
// Setting up the renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Creating the scene
scene = new THREE.Scene();
// Setting up the camera
camera = new THREE.PerspectiveCamera(40, window.innerWidth /
window.innerHeight, 1, 10000);
camera.position.set(20, 20, 20);
// Adding controls for user interaction
controls = new THREE.OrbitControls(camera);
// Adding ambient light to the scene
scene.add(new THREE.AmbientLight(0x222222));
// Adding directional light
var light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(20, 20, 0);
scene.add(light);
// Adding axes as a visual guide
scene.add(new THREE.AxisHelper(20));
// Defining the geometry for the Polyhedron shape
var vertices = [
0.5,0,0, 0,0.3,0, -0.5,0,0, 0,-0.3,0, 0,0,0.3, 0,0,-0.3
];
var faces = [
0,1,4, 1,2,4, 2,3,4, 3,0,4, 0,1,5, 1,2,5, 2,3,5, 3,0,5
];
var geometry = new THREE.PolyhedronGeometry(vertices, faces, 5, 1);
// Defining material properties for the shape
var material = new THREE.MeshPhongMaterial({
color: 0x00ffff,
shading: THREE.FlatShading,
wireframe:true,
transparent: true,
opacity: 0.7,
});
// Creating the mesh object
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
}
function animate() {
requestAnimationFrame(animate);
// Updating controls for user interaction
renderer.render(scene, camera);
}