JSFiddle - React, Tailwind, and code Playground

by Yoshiharu Kamata

JavaScript

window.addEventListener("DOMContentLoaded", function(){


    var viewAngle = 80;
    var width  = window.innerWidth;
    var height = window.innerHeight;
    var near   = 1;
    var far    = 1000;
    
    // renderer (canvas)
    var renderer = new THREE.CanvasRenderer();
    renderer.setSize( width, height );
    document.body.appendChild( renderer.domElement );

    // create a scene
    var scene = new THREE.Scene();

    // set a camera
    var aspect = width / height;
    var camera = new THREE.PerspectiveCamera( viewAngle, aspect, near, far );
    camera.position.z = 500;
    scene.add( camera );

    var geometry = new THREE.CubeGeometry(200, 200, 200);
    var material = new THREE.MeshLambertMaterial( { color: 0x660000 } );
    var cubeMesh = new THREE.Mesh( geometry, material);
    scene.add( cubeMesh );

    // set a directional light
    var directionalLight = new THREE.DirectionalLight( 0xffffff, 5 );
    directionalLight.position.z = 3;
    scene.add( directionalLight );

//    cubeMesh.rotation.x = 30 * Math.PI / 180;
//    cubeMesh.rotation.y = 30 * Math.PI / 180;
//    cubeMesh.rotation.z = 30 * Math.PI / 180;

//    renderer.render( scene, camera );

window.addEventListener('mousemove', function (e) {
        var mouseX = e.clientX;
        var mouseY = e.clientY;
        cubeMesh.rotation.x = mouseY * 0.05;
        cubeMesh.rotation.y = mouseX * 0.05;
        
        renderer.render( scene, camera );
    }, false);

}, false);