JSFiddle - React, Tailwind, and code Playground

by Ehsan Ziya

JavaScript

var renderer, scene, camera;
var mesh, material, geometry;
var cubes = [];
var context = new webkitAudioContext();


function setup() {
    renderer = new THREE.CanvasRenderer();
    renderer.setSize(700, 200);
    document.body.appendChild(renderer.domElement);
    camera = new THREE.PerspectiveCamera(20, 700 / 200, 1, 1000);
    camera.position.z = 500;
    scene = new THREE.Scene();
    geometry = new THREE.CubeGeometry(100, 100, 100);
    console.log(geometry.faces);
    for (var i = 0; i < geometry.faces.length; i++) {
        var hex = Math.random() * 0x000000;
        geometry.faces[i].color.setHex(hex);
        geometry.faces[i].color.setHex(hex);

    }
    geometry.faces[4].color.setHex(Math.random() * 0xFFFFFF);
    material = new THREE.MeshBasicMaterial({
        vertexColors: THREE.FaceColors,
        overdraw: 0.5
    });


    var mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
    cubes.push(mesh);
}
function draw() {

    requestAnimationFrame(draw);
    cubes[0].rotation.y = Date.now() * 0.002;

    renderer.render(scene, camera);
}

setup();
draw();