JSFiddle - React, Tailwind, and code Playground

by Frank van Puffelen

JavaScript

var camera, scene, renderer, geometry, material, mesh, frame, triangle;

init();
animate();

function init() {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 500;
    scene.add(camera);
    
    frame = 0;

    geometry = new THREE.CubeGeometry(200, 200, 200);
    material = new THREE.MeshNormalMaterial();

    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

var lineGeom = new THREE.Geometry();
lineGeom.vertices.push( new THREE.Vector3(-200,-200,0) );
lineGeom.vertices.push( new THREE.Vector3(200,-200,0) );
lineGeom.vertices.push( new THREE.Vector3(0,200,0) );
lineGeom.vertices.push( new THREE.Vector3(-200,-200,0) );
lineGeom.colors.push( new THREE.Color(0xff0000) );
lineGeom.colors.push( new THREE.Color(0x00ff00) );
lineGeom.colors.push( new THREE.Color(0x0000ff) );
lineGeom.colors.push( new THREE.Color(0xff0000) );
var lineMat = new THREE.LineBasicMaterial({
    linewidth: 3,
    vertexColors: true
});
triangle = new THREE.Line( lineGeom, lineMat );
scene.add(triangle);
    
    //renderer = new THREE.CanvasRenderer();
    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);

}

function animate() {
    frame++;

    requestAnimationFrame(animate);
    render();

}

function render() {
    //if (frame % 500 == 0) console.log(mesh);
    
    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;
    triangle.rotation.z -= 0.005;

    renderer.render(scene, camera);

}