JSFiddle - React, Tailwind, and code Playground
HTML
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/[email protected]/build/three.module.js",
"three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
}
}
</script>
JavaScript
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// init
// Create a camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
const scene = new THREE.Scene();
// Create a geometry
const geometry = new THREE.PlaneGeometry(0.1, 0.1);
// Create a material
const material = new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe: true });
// Create an instance of InstancedMesh
const instancedMesh = new THREE.InstancedMesh(geometry, material, 100000);
scene.add(instancedMesh);
// Set the desired width and height of the grid
const gridWidth = 1000;
const gridHeight = 100;
// Compute offsets to center the grid
const offsetX = -(gridWidth * 0.1) / 2;
const offsetY = -(gridHeight * 0.1) / 2;
// Set positions for the instances
const dummy = new THREE.Object3D();
for (let x = 0; x < gridWidth; x++) {
for (let y = 0; y < gridHeight; y++) {
dummy.position.set(x * 0.1 + offsetX, y * 0.1 + offsetY, 0);
dummy.updateMatrix();
instancedMesh.setMatrixAt(x * gridHeight + y, dummy.matrix);
}
}
const renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animation );
document.body.appendChild( renderer.domElement );
const controls = new OrbitControls( camera, renderer.domElement );
// animation
function animation( time ) {
//controls.update();
renderer.render( scene, camera );
}
window.onresize = () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}