RenaudRohlinger

90tech Welcome

Animating the 90Tech's logo

A Pen by Renaud ROHLINGER on CodePen.

License.

RenaudRohlinger

var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer();
var camera = new THREE.PerspectiveCamera(45, 0, 1, 2000);
var mesh = null;

// basic stuff
function initThree () {
  renderer.setPixelRatio(window.devicePixelRatio || 1);
  renderer.setClearColor(0x161216);
  camera.position.y = 0;

RenaudRohlinger

function resize () {
  renderer.height = window.innerHeight;
  renderer.width = window.innerWidth;
  renderer.setSize(renderer.width, renderer.height);
  camera.aspect = renderer.width / renderer.height;
  camera.updateProjectionMatrix();
}

RenaudRohlinger

function render() {
  renderer.render( scene, camera );
}

function animate() {
  // render the 3D scene
  render();
  requestAnimationFrame( animate );
}

RenaudRohlinger

var mesh = null;
var dummy = new THREE.Object3D();
var sectionWidth = 200;

function addInstancedMesh() {
  // An InstancedMesh of 4 cubes
  mesh = new THREE.InstancedMesh(new THREE.BoxBufferGeometry(50,50,50), new THREE.MeshNormalMaterial(), 4);
  scene.add(mesh);
  setInstancedMeshPositions(mesh);
}

RenaudRohlinger

function loopFunction() {
  var distance = Math.round(camera.position.x / sectionWidth)
  if (distance !== this.loopSectionPosition) {
    loopSectionPosition = distance
    setInstancedMeshPositions(mesh, loopSectionPosition)
  }
}

function render() {
  // move the camera

RenaudRohlinger

function setInstancedMeshPositions(mesh, section) {
  for ( var i = 0; i < mesh.count; i ++ ) {
    var xStaticPosition = -sectionWidth * (i - 1);
		var xSectionPosition = sectionWidth * section;
		var x = xStaticPosition + xSectionPosition;
		dummy.position.set(x, 0, 0);
		dummy.updateMatrix();
    mesh.setMatrixAt( i, dummy.matrix );
  }
  mesh.instanceMatrix.needsUpdate = true;

RenaudRohlinger

function setInstancedMeshPositions(mesh, section) {
  for ( var i = 0; i < mesh.count; i ++ ) {
    var xStaticPosition = -sectionWidth * (i - 1);
		var xSectionPosition = sectionWidth * section;
		var x = xStaticPosition + xSectionPosition;
		dummy.position.set(x, 0, 0);
		dummy.updateMatrix();
    mesh.setMatrixAt( i, dummy.matrix );
  }
  mesh.instanceMatrix.needsUpdate = true;

RenaudRohlinger

function setInstancedMeshPositions(mesh, section) {
  for ( var i = 0; i < mesh.count; i ++ ) {
    var xStaticPosition = -sectionWidth * (i - 1);
		var xSectionPosition = sectionWidth * section;
		var x = xStaticPosition + xSectionPosition;
		dummy.position.set(x, 0, 0);
		dummy.updateMatrix();
    mesh.setMatrixAt( i, dummy.matrix );
  }
  mesh.instanceMatrix.needsUpdate = true;

RenaudRohlinger

const getMUIDIndex = (muid: string) => muid === 'muid'

el.material.defines = Object.assign(el.material.defines || {}, {
  muid: el.material.id
})
      
gl.info.programs?.forEach(program => {
  const cacheKeySplited = program.cacheKey.split(',')
  console.log(cacheKeySplited[cacheKeySplited.findIndex(getMUIDIndex) + 1]) // will get the material id in the program
});