JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://threejs.org/build/three.min.js"></script>
<div id="WebGLCanvas" style="text-align:center;">
</div>
CSS
canvas{
position:fixed;
top:0;
left:0;
}
JavaScript
var width = 800;
var height = 600;
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75,width/height,1,10000);
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xFFFFFF,1);
renderer.setSize(width,height);
$('#WebGLCanvas').append(renderer.domElement);
var geometry = new THREE.BoxGeometry(500, 260, 800, 25, 40, 13);
var material = new THREE.MeshBasicMaterial({color: 0xfffff, wireframe: true});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 300;
camera.position.y = 100;
camera.position.x = 150;
camera.lookAt(scene.position);
//--------------------------------------------------------------------------
//
//--------------------------------------------------------------------------
function addGroundPane(){
var planeGeo = new THREE.PlaneGeometry(2000,2000,100,100);
var planeMat = new THREE.MeshLambertMaterial({color:0x00F0F0});
var plane = new THREE.Mesh(planeGeo,planeMat);
plane.rotation.x = -Math.PI/2;
plane.position.y = -120;
plane.receiveShadow = true;
scene.add(plane);
}
addGroundPane();
//--------------------------------------------------------------------------
//ADD A LIGHT
//--------------------------------------------------------------------------
var light = new THREE.SpotLight(0xFFFFFF);
light.position.set(0,130,0);
light.target.position.set(400,-130,0);
scene.add(light);
function enableShadows(){
renderer.shadowMapEnabled = true;
light.castShadow = true;
cube.castShadow = true;
cube.receiveShadow = true;
}
function render() {
...