Threejs - Instance Geometry

by black strings

HTML

<div id='hide'>
  <div>To scale sine or cosine, multiply it by 1.0 or higher</div>
  <div>If you put sin and cos next to each other, at the right distance, they create a zipper effect</div>
</div>

CSS

/* fix mouse click offset errors when doing drags */
body {
  margin: 0;
}

div#hide div {
  display: none;
}

JavaScript

import * as THREE from "https://unpkg.com/[email protected]/build/three.module.js";
import { OrbitControls } from "https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js";

var scene, renderer, camera;
var cube;
var controls;

var umbrellaMesh;
var objs = [];

init();
lightSetup();
animate();



function init() {
  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  var width = window.innerWidth;
  var height = window.innerHeight;
  renderer.setSize(width, height);
  document.body.appendChild(renderer.domElement);

  scene = new THREE.Scene();

  var gridXZ = new THREE.GridHelper(1000, 100);
  scene.add(gridXZ);

  var axes = new THREE.AxesHelper(1000);
  scene.add(axes);
  
  var g = new THREE.SphereGeometry(30, 30, 30);
  var m = new THREE.Mesh(g, new THREE.MeshBasicMaterial({color: 0xff0000}));
  m.position.copy(new THREE.Vector3(50, 50, 50));
  scene.add(m);
  
  var sGeo = new THREE.PlaneGeometry(12, 12);
  var sqMesh = new THREE.Mesh(sGeo);
  m.add(sqMesh);
  
  
  camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
  camera.position.y = 200;
  camera.position.z = 200;
  camera.lookAt(new THREE.Vector3(0, 0, 0));

  controls = new OrbitControls(camera, renderer.domElement);
  
  

  lightSetup();
  const geoBase = new THREE.PlaneBufferGeometry(6, 6, 6, 6);
  const geo = new THREE.InstancedBufferGeometry();
  /*geo.instanceCount = 100;
  geo.index = geoBase.index; 
  
  geo.setAttribute('position', geoBase.getAttribute('position'));
  geo.setAttribute('uv', geoBase.getAttribute('uv'));
  geo.setAttribute('normal', geoBase.getAttribute('normal'));
   */
  geo.index = geoBase.index;
	geo.attributes.position = geoBase.attributes.position;
	geo.attributes.uv = geoBase.attributes.uv;
	geo.attributes.normal = geoBase.attributes.normal;
 
  //updates
  geo.computeBoundingSphere();
  //geo.computeVertexNormals();
  //geo.verticesNeedUpdate = true;
  
  const uniforms = {time: {value: 0}};
  const vs = `
  	uniform float time;
   ...