JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/TrackballControls.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/libs/stats.min.js"></script>
JavaScript
var scene, camera, renderer, ambient, stats;
init();
animate();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 50;
ambient = new THREE.AmbientLight(0xcccccc);
scene.add(ambient);
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0xeeeeee);
document.body.appendChild( renderer.domElement );
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0';
stats.domElement.style.left = '0';
document.body.appendChild(stats.domElement);
controls = new THREE.TrackballControls(camera, renderer.domElement);
controls.addEventListener('change', render);
createModel();
render();
}
function createModel(){
var singleGeometry = new THREE.BoxGeometry(0.5, 0.5, 0.5);
var mergedGeometry = new THREE.Geometry();
for (var x = 0; x < 100; x++) {
for (var y = 0; y < 100; y++) {
var posVector = new THREE.Vector3(x, y, 0);
var posMatrix = new THREE.Matrix4();
posMatrix.setPosition(posVector);
mergedGeometry.merge(singleGeometry, posMatrix, 0);
}
}
/*
r71, r72 - good performance with MeshBasicMaterial (~60 fps)
*/
//var material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
/*
r71 - good performance with MeshFaceMaterial (~60 fps)
r72 - low performance with MeshFaceMaterial (~3 fps)
*/
var material = new THREE.MeshFaceMaterial([
new THREE.MeshBasicMaterial({ color: 0xff0000 }),
new THREE.MeshBasicMaterial({ color: 0xffff00 }),
new THREE.MeshBasicMaterial({ color: 0x00ff00 }),
new THREE.MeshBasicMaterial({ color: 0x00ffff }),
new THREE.MeshBasicMaterial({ color: 0x0000ff }),
new...