JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container">
</div>
<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/objects/Reflector.js"></script>
JavaScript
// scene size
var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;
// camera
var VIEW_ANGLE = 45;
var ASPECT = WIDTH / HEIGHT;
var NEAR = 1;
var FAR = 500;
var camera, scene, renderer;
var cameraControls;
var sphereGroup, smallSphere;
init();
animate();
function init() {
var container = document.getElementById( 'container' );
// renderer
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( WIDTH, HEIGHT );
container.appendChild( renderer.domElement );
// scene
scene = new THREE.Scene();
// camera
camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR );
camera.position.set( 0, 75, 160 );
cameraControls = new THREE.OrbitControls( camera, renderer.domElement );
cameraControls.target.set( 0, 40, 0 );
cameraControls.maxDistance = 400;
cameraControls.minDistance = 10;
cameraControls.update();
var planeGeo = new THREE.PlaneBufferGeometry( 100.1, 100.1 );
// reflectors/mirrors
var geometry = new THREE.CircleBufferGeometry( 40, 64 );
var groundMirror = new THREE.Reflector( geometry, {
clipBias: 0.003,
textureWidth: WIDTH * window.devicePixelRatio,
textureHeight: HEIGHT * window.devicePixelRatio,
color: 0x777777,
recursion: 10
} );
groundMirror.position.y = 0.5;
groundMirror.rotateX( - Math.PI / 2 );
scene.add( groundMirror );
var geometry = new THREE.PlaneBufferGeometry( 100, 100 );
var verticalMirror = new THREE.Reflector( geometry, {
clipBias: 0.003,
textureWidth: WIDTH * window.devicePixelRatio,
textureHeight: HEIGHT * window.devicePixelRatio,
color: 0x889999,
recursion: 10
} );
verticalMirror.position.y = 50;
verticalMirror.position.z = -50;
scene.add( verticalMirror );
var geometry1 = new THREE.PlaneBufferGeometry( 100, 100 );
var verticalMirror1 = new THREE.Reflector( geometry1, {
clipBias: 0.003,
textureWidth: WIDTH * window.devicePixelRatio,
textureHeight: HEIGHT *...