JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.js"></script>
JavaScript
var scene, camera, renderer;
var objectNum = 20;
var sphereY = -30;
var cubeY = -20;
var meshMaterial1 = new THREE.MeshBasicMaterial({color: 0x7777ff});
var meshMaterial2 = new THREE.MeshBasicMaterial({color: 0x9933cc});
var meshMaterial3 = new THREE.MeshBasicMaterial({color: 0x99ff33});
var meshMaterial4 = new THREE.MeshBasicMaterial({color: 0x000000});
var meshMaterial5 = new THREE.MeshBasicMaterial({color: 0xff0000});
var materialList = [meshMaterial1, meshMaterial2, meshMaterial3, meshMaterial4, meshMaterial5];
var materialCount = 0;
init();
animate();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.x = -20;
camera.position.y = 50;
camera.position.z = 40;
camera.lookAt(new THREE.Vector3(10, 0, 0));
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
document.body.appendChild( renderer.domElement );
addObjectToScene();
var ambientLight = new THREE.AmbientLight(0x0c0c0c);
scene.add( ambientLight );
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40, 60, -10);
spotLight.castShadow = true;
scene.add( spotLight );
}
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
function removeObjectFromScene(){
for(var index =scene.children.length -1;index>0;index--) {
var removeTarget = scene.children[index];
if (removeTarget instanceof THREE.Mesh) {
scene.remove(removeTarget);
removeTarget.geometry.dispose();
removeTarget.material.dispose();
}
}
}
function addObjectToScene(){
var meshMaterial = materialList[ materialCount % 5 ];
materialCount++;
for ( var index = 0; index < objectNum; index ++ ) {
var sphereGeometry = new THREE.SphereGeometry(3, 20, 20);
var sphere = new THREE.Mesh(sphereGeometry,...