JSFiddle - React, Tailwind, and code Playground

by dhbenson

HTML

<script src="http://mrdoob.github.com/three.js/build/three.min.js"></script>

CSS

body {
    margin: 0px;
    overflow: hidden;
    background-color: black;
}

JavaScript

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 100, 1000000);
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 100;
var renderer = new THREE.WebGLRenderer({
    antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var light = new THREE.AmbientLight(0xFFFFFF);
scene.add(light);





THREE.ImageUtils.loadCompressedTexture("https://dl.dropboxusercontent.com/u/10194257/ams_profile_v2_256.dds", new THREE.UVMapping(), function (texture) {


    var material = new THREE.MeshLambertMaterial({
        transparent: false,
        side: THREE.DoubleSide,
        color: 0xFFFFFF,
        opacity: 1.0,
        map: texture
    });




    var planeGeometry = new THREE.PlaneGeometry(100, 100, 1, 1);
    var planeMesh = new THREE.Mesh(planeGeometry, material);
    scene.add(planeMesh);

});



function render() {
    var time = Date.now() * 0.5;
    camera.position.x = Math.sin(time / 1000) * 150;
    camera.position.y = -100;
    camera.position.z = Math.cos(time / 1000) * 150;
    camera.lookAt(scene.position);
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}
render();

window.camera = camera