Share your repls and programming experiences

← Back to all posts
WIREMESH ANIMATION
ViyonGamercoder (1)

var colorone=colour1.value;
var colortwo=colour2.value;
function newCube(wires=1,height=1,width=height,depth=height){
const geometry = new THREE.CubeGeometry(height,depth,width,wires,wires,wires);
const material = new THREE.ShaderMaterial({
uniforms: {
color1: {
value: new THREE.Color(colorone)
},
color2: {
value: new THREE.Color(colortwo)
}
},
vertexShader: `
varying vec2 vUv;

void main() {
  vUv = uv;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
}

, fragmentShader:
uniform vec3 color1;
uniform vec3 color2;

varying vec2 vUv;

void main() {
  
  gl_FragColor = vec4(mix(color1, color2, vUv.y), 1.0);
}

`,
wireframe: true,
wireframeLinewidth:0.01

});
return(new THREE.Mesh( geometry, material ));
}
function newText(text="G fuel"){
const loader = new THREE.FontLoader();const font = loader.load(
'font.json',

// onLoad callback
function ( font ) {
	// do something with the font
	scene.add( font );
},

// onProgress callback
function ( xhr ) {
	console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
},

// onError callback
function ( err ) {
	console.log( 'An error happened' );
}

);
const geometry = new THREE.TextGeometry( text, {
font: font,
size: 80,
height: 5,
curveSegments: 12,
bevelEnabled: true,
bevelThickness: 10,
bevelSize: 8,
bevelOffset: 0,
bevelSegments: 5
});
const material = new THREE.ShaderMaterial({
uniforms: {
color1: {
value: new THREE.Color(colorone)
},
color2: {
value: new THREE.Color(colortwo)
}
},
vertexShader: `
varying vec2 vUv;

void main() {
  vUv = uv;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
}

, fragmentShader:
uniform vec3 color1;
uniform vec3 color2;

varying vec2 vUv;

void main() {
  
  gl_FragColor = vec4(mix(color1, color2, vUv.y), 1.0);
}

`,
wireframe: true,
wireframeLinewidth:0.01

});
return(new THREE.Mesh( geometry, material ));
}
function newIcosahedron(radius){
const geometry = new THREE.IcosahedronGeometry(radius);
const material = new THREE.ShaderMaterial({
uniforms: {
color1: {
value: new THREE.Color(colorone)
},
color2: {
value: new THREE.Color(colortwo)
}
},
vertexShader: `
varying vec2 vUv;

void main() {
  vUv = uv;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
}

, fragmentShader:
uniform vec3 color1;
uniform vec3 color2;

varying vec2 vUv;

void main() {
  
  gl_FragColor = vec4(mix(color1, color2, vUv.y), 1.0);
}

`,
wireframe: true,
wireframeLinewidth:0.01

});
return(new THREE.Mesh( geometry, material ));
}
function newOctahedron(radius){
const geometry = new THREE.OctahedronGeometry(radius);
const material = new THREE.ShaderMaterial({
uniforms: {
color1: {
value: new THREE.Color(colorone)
},
color2: {
value: new THREE.Color(colortwo)
}
},
vertexShader: `
varying vec2 vUv;

void main() {
  vUv = uv;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
}

, fragmentShader:
uniform vec3 color1;
uniform vec3 color2;

varying vec2 vUv;

void main() {
  
  gl_FragColor = vec4(mix(color1, color2, vUv.y), 1.0);
}

`,
wireframe: true,
wireframeLinewidth:0.01

});
return(new THREE.Mesh( geometry, material ));
}
function newSphere(wires,radius=1, widthSegments=wires, heightSegments=wires){
const geometry = new THREE.SphereGeometry( radius,widthSegments, heightSegments );
const material = new THREE.ShaderMaterial({
uniforms: {
color1: {
value: new THREE.Color(colorone)
},
color2: {
value: new THREE.Color(colortwo)
}
},
vertexShader: `
varying vec2 vUv;

void main() {
  vUv = uv;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
}

, fragmentShader:
uniform vec3 color1;
uniform vec3 color2;

varying vec2 vUv;

void main() {
  
  gl_FragColor = vec4(mix(color1, color2, vUv.y), 1.0);
}

`,
wireframe: true,
wireframeLinewidth:0.01

});
return(new THREE.Mesh( geometry, material ));
}
function newTorus(wires,radius=1,tube=2, radialSegments=wires10, tubularSegments=wires20){
const geometry = new THREE.TorusGeometry(radius, tube , radialSegments, tubularSegments);
const material = new THREE.ShaderMaterial({
uniforms: {
color1: {
value: new THREE.Color(colorone)
},
color2: {
value: new THREE.Color(colortwo)
}
},
vertexShader: `
varying vec2 vUv;

void main() {
  vUv = uv;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
}

, fragmentShader:
uniform vec3 color1;
uniform vec3 color2;

varying vec2 vUv;

void main() {
  
  gl_FragColor = vec4(mix(color1, color2, vUv.y), 1.0);
}

`,
wireframe: true,
wireframeLinewidth:0.01

});
return(new THREE.Mesh( geometry, material ));
}
function newPlane(wires,height=1,width=height,depth=wires,widthSegments=wires,heightSegments=widthSegments){
const geometry = new THREE.PlaneGeometry( width, height, widthSegments,heightSegments );
const material = new THREE.ShaderMaterial({
uniforms: {
color1: {
value: new THREE.Color(colorone)
},
color2: {
value: new THREE.Color(colortwo)
}
},
vertexShader: `
varying vec2 vUv;

void main() {
  vUv = uv;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
}

, fragmentShader:
uniform vec3 color1;
uniform vec3 color2;

varying vec2 vUv;

void main() {
  
  gl_FragColor = vec4(mix(color1, color2, vUv.y), 1.0);
}

`,
wireframe: true,
wireframeLinewidth:0.01

});
return(new THREE.Mesh( geometry, material ));
}
function newKnot(wires,radius=1, tube=0.5, tubularSegments=wires10, radialSegments=wires5, p=7, q=5){
const geometry = new THREE.TorusKnotGeometry( radius , tube , tubularSegments , radialSegments , p , q );
const material = new THREE.ShaderMaterial({
uniforms: {
color1: {
value: new THREE.Color(colorone)
},
color2: {
value: new THREE.Color(colortwo)
}
},
vertexShader: `
varying vec2 vUv;

void main() {
  vUv = uv;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
}

, fragmentShader:
uniform vec3 color1;
uniform vec3 color2;

varying vec2 vUv;

void main() {
  
  gl_FragColor = vec4(mix(color1, color2, vUv.y), 1.0);
}

`,
wireframe: true,
wireframeLinewidth:0.01

});
return(new THREE.Mesh( geometry, material ));
}

  function position(object,xpos=0,ypos=0,zpos=0){
    object.position.x=xpos;
    object.position.y=ypos;
    object.position.z=zpos;
  }
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
  var speed=0.1;
  var gravity=0.05;
  const renderer = new THREE.WebGLRenderer({ canvas: canvass});
  renderer.setSize( window.innerWidth*1.1, window.innerHeight*1.1);
  camera.position.z = 9;
  function move(ob,x=0,y=0,z=0){
    for(i in ob){
      ob[i].position.y+=-Math.random()/10;
      ob[i].position.x+=x;
      ob[i].position.z+=z;
      ob[i].rotation.x+=Math.random()/5;
      ob[i].rotation.y+=Math.random()/5;
      ob[i].rotation.z+=Math.random()/5;
      // console.log(i)
      // i.material.uniforms.color1.value = new THREE.Color(colorone);
      // i.material.uniforms.color2.value = new THREE.Color(colortwo);
    }
  }
  var li=[];
  var colours=[0x220033,0x00ffff]
  function spawnBlocks(){
    if (shape.value==1){
      var s=newIcosahedron(1);
      li.push(s);
      // amount.min=0;
      // amount.max=0;
    }else if (shape.value==2){
      var s=newSphere(amount.value,1);
      li.push(s);
      amount.min=10;
      amount.max=20;
    }else if (shape.value==3){
      var s=newPlane(amount.value,2);
      li.push(s);
      amount.min=10;
      amount.max=20;
    }else if(shape.value==4){
      var s=newOctahedron(1);
      li.push(s);
      amount.min=0;
      amount.max=0;
    } else if(shape.value==5){
      var s=newTorus(amount.value,0.5,0.2);
      li.push(s);
      amount.min=1;
      amount.max=2;
    } else if(shape.value==6){
      var s=newKnot(amount.value,0.5,0.2);
      li.push(s);
      amount.min=0;
      amount.max=0;
    }else{
      var s=newCube(amount.value,1);
      li.push(s);
      amount.min=1;
      amount.max=10;
    }
    // console.log(li);
    scene.add(s);
    position(s,randfloat(Math.floor(-window.innerWidth/10)-2,Math.floor(window.innerWidth/10)-2),7);
  }
  function randint(min, max) {
     return Math.floor(Math.random() * (max - min) ) + min;
  }
  function randfloat(min, max) {
     return Math.random() * (max - min) + min;
  }
  a=newCube(0x000000,10);
  scene.add(a);
  function animate() {
    colorone=colour1.value;
    colortwo=colour2.value;
    document.getElementById("colour1").style.borderColor=colorone;
    document.getElementById("colour2").style.borderColor=colortwo;
    document.getElementById("one").style.backgroundImage="linear-gradient(to right,"+colorone+","+colortwo+")";
    document.getElementById("shape").style.backgroundImage="linear-gradient(to right,"+colorone+","+colortwo+")";
    document.getElementById("option").style.backgroundImage="linear-gradient(to right,"+colorone+","+colortwo+")";
    document.getElementById("amount").style.backgroundImage="linear-gradient(to right,"+colorone+","+colortwo+")"
    spawnBlocks();
    a.rotation.x+=1;
    a.material.uniforms.color1.value = new THREE.Color(colorone);
    a.rotation.y+=0.1;
    a.material.uniforms.color2.value = new THREE.Color(colortwo);
    move(li,0,-gravity);
      requestAnimationFrame( animate );
      renderer.render( scene, camera );
  }
  animate();