JSFiddle - React, Tailwind, and code Playground
by Burkhard GS
HTML
<script src="https://raw.github.com/mrdoob/three.js/master/build/three.min.js"></script>
JavaScript
renderer = new THREE.CanvasRenderer();
// SWITCH HERE
// renderer = new THREE.WebGLRenderer();
var container, stats;
var camera, scene, renderer;
var cube, plane;
var targetRotation = 0;
var targetRotationOnMouseDown = 0;
var mouseX = 0;
var mouseXOnMouseDown = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.y = 150;
camera.position.z = 500;
scene = new THREE.Scene();
// Cube
var geometry = new THREE.CubeGeometry( 300, 300, 300 );
for ( var i = 0; i < geometry.faces.length; i ++ ) {
// geometry.faces[ i ].color.setHex( Math.random() * 0xffffff );
}
var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x00ee00, wireframe: true, transparent: true, opacity: .5 } );
cube = new THREE.Mesh( geometry, wireframeMaterial );
cube.position.y = 150;
scene.add( cube );
cube.rotation.x = .615;
cube.rotation.y = .785;
// Render
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight...