JSFiddle - React, Tailwind, and code Playground

by chandlerprall

HTML

<script src="http://buildnewgames.com/assets/article/physics-libraries/three.js"></script>
<canvas id="viewport" width="600" height="600"></canvas>

JavaScript

var viewport = document.getElementById( 'viewport' ), // The canvas element we're going to use
renderer = new THREE.CanvasRenderer({ canvas: viewport }), // Create the renderer
scene = new THREE.Scene, // Create the scene
camera = new THREE.PerspectiveCamera( 35, 1, 1, 1000 );

renderer.setSize( viewport.clientWidth, viewport.clientHeight );

camera.position.set( -10, 30, -200 );
camera.lookAt( scene.position ); // Look at the center of the scene
scene.add( camera );

function addLights() {
    var ambientLight = new THREE.AmbientLight( 0x555555 );
    scene.add( ambientLight );

    var directionalLight = new THREE.DirectionalLight( 0xffffff );
    directionalLight.position.set( -.5, .5, -1.5 ).normalize();
    scene.add( directionalLight );
}

function buildScene() {

    var ramp_geometry= new THREE.CubeGeometry( 50, 2, 10 ),
        material_red = new THREE.MeshLambertMaterial({ color: 0xdd0000, overdraw: true }),
        material_green = new THREE.MeshLambertMaterial({ color: 0x00bb00, overdraw: true });
    
    var ramp_1 = new THREE.Mesh( ramp_geometry, material_red );
    ramp_1.position.set( -20, 25, 0 );
    ramp_1.rotation.z = -Math.PI / 28;
    scene.add( ramp_1 );
    
    var ramp_2 = new THREE.Mesh( ramp_geometry, material_red );
    ramp_2.position.set( 25, 5, 0 );
    ramp_2.rotation.z = Math.PI / 16;
    scene.add( ramp_2 );
    
    var floor = new THREE.Mesh(
        new THREE.PlaneGeometry( 100, 50 ),
        material_red
    );
    floor.position.y = -15;
    scene.add( floor );
}

addLights();
buildScene();
renderer.render( scene, camera );