JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.min.js"></script>
<script src="http://stemkoski.github.io/Three.js/js/OrbitControls.js"></script>
<!--img alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAABACAYAAAB7jnWuAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3goYCyohFKqDuQAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAiElEQVRo3u3Zuw3AIAyE4SOi9j5M4JlZiwVIRZMoLynIFP9VLizdV0DlVErpCsym4GQzkyS11m4Xx97fSWNw936FMDPVWtNUwBViZvkJcETMLl/iEQIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIB6xzNQu7G7p7l+Iup/mpeOTtHr/ga3bGKzLSeKqQUwAAAABJRU5ErkJggg==" /-->
<canvas id="canvas"></canvas>
CSS
#canvas {
width: 600px;
height: 500px;
}
JavaScript
console.clear();
var controls, renderer, scene, camera;
init();
animate();
function init() {
var canvas = document.getElementById("canvas");
//Scene
scene = new THREE.Scene();
//Camera
var width = canvas.clientWidth, height = canvas.clientHeight;
var angle = 45, aspect = width / height, near = 0.1, far = 20000;
camera = new THREE.PerspectiveCamera(angle, aspect, near, far);
scene.add(camera);
camera.position.set(-6, 4, 7);
camera.lookAt(scene.position);
//Renderer
renderer = new THREE.WebGLRenderer({
antialias: true,
canvas: canvas
});
renderer.setSize(width, height);
//Controls
controls = new THREE.OrbitControls(camera, renderer.domElement);
//Cage
var cageTexture = THREE.ImageUtils.loadTexture("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAABACAYAAAB7jnWuAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3goYCyohFKqDuQAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAiElEQVRo3u3Zuw3AIAyE4SOi9j5M4JlZiwVIRZMoLynIFP9VLizdV0DlVErpCsym4GQzkyS11m4Xx97fSWNw936FMDPVWtNUwBViZvkJcETMLl/iEQIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIB6xzNQu7G7p7l+Iup/mpeOTtHr/ga3bGKzLSeKqQUwAAAABJRU5ErkJggg==");
cageTexture.wrapS = THREE.RepeatWrapping;
cageTexture.wrapT = THREE.RepeatWrapping;
cageTexture.repeat.set(10, 1);
//Order to add materials: x+,x-,y+,y-,z+,z-
var cageFaces = [
new THREE.MeshBasicMaterial({transparent: true, map: cageTexture, side: THREE.DoubleSide}),
new THREE.MeshBasicMaterial({transparent: true, map: cageTexture, side: THREE.DoubleSide}),
new THREE.MeshBasicMaterial({transparent: true, opacity: 0, side: THREE.DoubleSide}),
new THREE.MeshBasicMaterial({color: "gray", side: THREE.DoubleSide}),
new THREE.MeshBasicMaterial({transparent: true, map: cageTexture, side: THREE.DoubleSide}),
new THREE.MeshBasicMaterial({transparent: true, map: cageTexture, side: THREE.DoubleSide})
];
var...