JSFiddle - React, Tailwind, and code Playground

by YOUNY zhu

HTML

<script src="http://mrdoob.github.io/three.js/build/three.min.js"></script>
<script src="http://mrdoob.github.io/three.js/examples/js/controls/TrackballControls.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, 1, 1000);
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 500;
var renderer = new THREE.WebGLRenderer({
    antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
//renderer.sortObjects = false;
document.body.appendChild(renderer.domElement);

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

var material = new THREE.MeshBasicMaterial({
    transparent: true,
    side: THREE.DoubleSide,
    fog: false,
    color: 0x00FF00,
    opacity: 0.2
});

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


var material = new THREE.MeshBasicMaterial({
    transparent: true,
    side: THREE.DoubleSide,
    fog: false,
    color: 0x00FF00,
    opacity: 0.3
});

var cubeGeometry = new THREE.PlaneGeometry(100, 100, 1, 1);
var cubeMesh = new THREE.Mesh(cubeGeometry, material);
cubeMesh.rotation.x = Math.PI / 2.0;
scene.add(cubeMesh);

var controls = new THREE.TrackballControls(camera, renderer.domElement);
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 3.0;
controls.panSpeed = 3.0;
controls.noZoom = false;
controls.noPan = false;
controls.noRotate = false;
controls.staticMoving = false;
controls.dynamicDampingFactor = 0.3;
controls.keys = [65, 83, 68]; // [rotateKey, zoomKey, panKey]

function render() {
    controls.update();

    camera.lookAt(scene.position);
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}
render();