Threejs - Basic Shaders

by black strings

HTML

<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>
<!--
uniforms - global like variables available in the vertex and frag shader
-->
<div id='shaderContainer'>

<div>
Sin runs from -1 to +1
cos runs from 1 - .5
</div>

<div id="vs-basic-red">
void main(){
 vec3 scale = vec3(4.0, 1.0, 1.0);
 gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
</div>

<div id="fs-basic-red">
void main(){
  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
</div>
</div>

CSS

/* fix mouse click offset errors when doing drags */
body {
  margin: 0;
}
div#shaderContainer div{
  display: none;
}

JavaScript

// a class encapsulting a math line and a actual line.
class Line {
	constructor(p1,p2){
    
    this.start = p1;
    this.end = p2;
    
  	this.line3 = new THREE.Line3(p1, p2);
    console.log(this.line3);
    
    // buffer geo way for new line
     var lineGeo = new THREE.BufferGeometry();
     var vertices = new Float32Array([
      p1.x, p1.y, p1.z,
      p2.x, p2.y, p2.z,
    ]);

    // itemSize = 3 because there are 3 values (components) per vertex
    lineGeo.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
    this.mesh = new THREE.Line(lineGeo, new THREE.LineBasicMaterial({color: this.color}));
    
    
    var normal = this.getVectorNormal();
    
    console.log(normal);
    
  }
  
  getVectorNormal(){
  	var normal = new THREE.Vector3();
    normal.subVectors(this.end.clone(), this.start.clone());
    var angle = THREE.Math.degToRad(90);
    normal.applyAxisAngle(new THREE.Vector3(0,0,1), angle);
    
    this.zeroOutNearZeroValues(normal);
    
    return normal;
  }
  
  zeroOutNearZeroValues(vec){
  	 var x = parseInt(vec.x.toFixed(3));
     var y = parseInt(vec.y.toFixed(3));
     var z = parseInt(vec.z.toFixed(3));
     vec.x = x === 0 ? 0 : vec.x;
     vec.y = y === 0 ? 0 : vec.y;
     vec.z = z === 0 ? 0 : vec.z;
  }
  
  getDirection(){
  	var direction = new THREE.Vector3();
    direction.subVectors(p2.clone(),p1.clone());
    return direction;
  }
  
  /// a real math lin3, while you can move it, it's not easily resetable
  // once moved, the new cordinates are its starting position
  // to reset, you'll have to create a new properties like a position to offset from
  setPosition(x=0,y=0,z=0){
  	this.line3.applyMatrix4(new THREE.Matrix4().makeTranslation(x,y,z));
    this.mesh.geometry.verticesNeedUpdate = true;
  }

}

class Utils {
	static createArc(rad = 5, seg = 36, thetaStart = 0, thetaEnd = 360){
  	var radius = rad;
    var segments = seg;
		debugger;
    var pointGeo = new THREE.Geometry();
    var...