JSFiddle - React, Tailwind, and code Playground
HTML
<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/libs/dat.gui.min.js"></script>
JavaScript
var camera, scene, renderer;
var group;
var gui, cameraSwitchButton, guiOptions;
init();
animate();
function init() {
guiOptions = {
orthographicCamera: false
}
gui = new dat.GUI();
cameraSwitchButton = gui.add(guiOptions, 'orthographicCamera');
cameraSwitchButton.onChange(function (value) {
switchCamera(value);
});
camera = new THREE.PerspectiveCamera( 65, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z = 500;
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xaaaaaa );
group = new THREE.Group();
scene.add( group );
scene.add( new THREE.DirectionalLight() );
scene.add( new THREE.HemisphereLight() );
var geometry = new THREE.BoxBufferGeometry( 10, 10, 10 );
for ( var i = 0; i < 100; i ++ ) {
var material = new THREE.MeshLambertMaterial( {
color: Math.random() * 0xffffff
} );
var mesh = new THREE.Mesh( geometry, material );
mesh.position.x = Math.random() * 400 - 200;
mesh.position.y = Math.random() * 400 - 200;
mesh.position.z = Math.random() * 400 - 200;
mesh.rotation.x = Math.random();
mesh.rotation.y = Math.random();
mesh.rotation.z = Math.random();
mesh.scale.setScalar( Math.random() * 10 + 2 );
group.add( mesh );
}
renderer = new THREE.WebGLRenderer( { antialias: true, logarithmicDepthBuffer: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var controls = new THREE.OrbitControls( camera, renderer.domElement );
}
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}