JSFiddle - React, Tailwind, and code Playground
HTML
<script type="module">
import * as THREE from '//raw.githack.com/mrdoob/three.js/dev/build/three.module.js';
import Stats from '//raw.githack.com/mrdoob/three.js/dev/examples/jsm/libs/stats.module.js';
var camera, scene, renderer, stats;
var mesh;
var amount = 10;
var count = Math.pow( amount, 3 );
var dummy = new THREE.Object3D();
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set( 9, 9, 9 );
camera.lookAt( 0, 0, 0 );
scene = new THREE.Scene();
var geometry = new THREE.BoxBufferGeometry();
var urls = [ "posx.jpg", "negx.jpg", "posy.jpg", "negy.jpg", "posz.jpg", "negz.jpg" ];
var texture = new THREE.CubeTextureLoader().setPath( 'https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/textures/cube/Bridge2/' ).load( urls );
texture.format = THREE.RGBFormat;
texture.mapping = THREE.CubeReflectionMapping;
texture.encoding = THREE.sRGBEncoding;
var material = new THREE.MeshStandardMaterial( { roughness: 0, envMap: texture });
// check overdraw
// var material = new THREE.MeshBasicMaterial( { color: 0xff0000, opacity: 0.1, transparent: true } );
mesh = new THREE.InstancedMesh( geometry, material, count );
scene.add( mesh );
var light = new THREE.DirectionalLight();
light.position.set( 0, 1, 0 );
scene.add( light );
//
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//
stats = new Stats();
document.body.appendChild( stats.dom );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
//
function animate() {
...