JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/utils/BufferGeometryUtils.js"></script>
JavaScript
let camera, scene, renderer;
const count = 90;
init();
animate();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set( - 10, 10, 25 );
camera.lookAt( scene.position );
//
const ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
scene.add( ambientLight );
const pointLight = new THREE.PointLight( 0xffffff, 0.8 );
camera.add( pointLight );
scene.add( camera );
//
scene.add( new THREE.AxesHelper( 5 ) );
//
const geometries = [];
const sphereMaterial = new THREE.MeshPhongMaterial( { color: 0xFFFF00 } );
const boxMaterial = new THREE.MeshPhongMaterial( { color: 0xFF0000 } );
const sphereGeometry = new THREE.SphereBufferGeometry( 1, 16, 16 );
const boxGeometry = new THREE.BoxBufferGeometry();
// boxes
for ( let i = 0; i < count; i ++ ) {
const geometry = boxGeometry.clone();
geometry.translate( i * 2, 0, 0 );
geometries.push( geometry );
}
const boxes = new THREE.Mesh( THREE.BufferGeometryUtils.mergeBufferGeometries( geometries ), boxMaterial );
scene.add( boxes );
// spheres
geometries.length = 0; // reset array
for ( let i = 0; i < count; i ++ ) {
const geometry = sphereGeometry.clone();
geometry.translate( i * 2, 0, 2 );
geometries.push( geometry );
}
const spheres = new THREE.Mesh( THREE.BufferGeometryUtils.mergeBufferGeometries( geometries ), sphereMaterial );
scene.add( spheres );
//
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const controls = new THREE.OrbitControls( camera, renderer.domElement );
}
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}