ShaderMaterial #0

HelloWorld

by jmcjc5u

HTML

<div id="info">GLSL Exercises</div>
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script id="myVertexShader" type="x-shader/x-vertex">
  //varying vec3 mycolor;
  varying vec4 myEyePos;
  
  void main() { 
  // input: position (vec3, object coordinate) 
  // uv (vec2, texture coordinate) 
  // output: gl_Position (vec4) clip coordinate 
  myEyePos = modelViewMatrix* vec4(position, 1.0);
/*  
	if (myEyePos.x > 0.0) {
  	mycolor = vec3 (1,0,0);
  } else {
  	mycolor = vec3 (0,1,0);
  }
*/  
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 
  }
</script>
<script id="myFragmentShader" type="x-shader/x-fragment">
  uniform vec3 color; 
 	//varying vec3 mycolor;
  varying vec4 myEyePos;
  
 void main() { 
  // output: gl_FragColor (vec4, rgba) 
  
  vec3 myColor;
  if (myEyePos.x > 0.0) 
     myColor = vec3 (1.0,0.0,0.0);
  else
     myColor = vec3 (0.,1.,0.);
  gl_FragColor = vec4( myColor, 1.0);
  }
</script>

CSS

body {
  background-color: #fff;
  color: #111;
  margin: 0px;
  overflow: hidden;
  font-family: Monospace;
  font-size: 10px;
  position: absolute;
}

#info {
  position: absolute;
  top: 0px;
  width: 100%;
  padding: 5px;
  text-align: center;
  color: #ffff00
}

JavaScript

var clock = new THREE.Clock();
var scene, renderer, camera;
var mesh;

var meshMaterial;

init();
animate();

function init() {
  var width = window.innerWidth;
  var height = window.innerHeight;

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(width, height);
  document.body.appendChild(renderer.domElement);
  renderer.setClearColor(0x888888);

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 10000);
  camera.position.y = 160;
  camera.position.z = 400;
  camera.lookAt(new THREE.Vector3(0, 0, 0));

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

  var gridXZ = new THREE.GridHelper(200, 20, 'red', 'white');
  scene.add(gridXZ);

  var pointLight = new THREE.PointLight(0xffffff);
  pointLight.position.set(0, 300, 200);
  scene.add(pointLight);

  meshMaterial = new THREE.ShaderMaterial({
    //wireframe: true,
    uniforms: {
      'color': {
        type: 'v3',
        value: new THREE.Vector3(0, 1, 0)
      }
    },
    vertexShader: document.getElementById('myVertexShader').textContent,
    fragmentShader: document.getElementById('myFragmentShader').textContent
  });
  /*  
    meshMaterial = new THREE.ShaderMaterial({
      uniforms: {
        'color': {
          type: 'v3',
          value: new THREE.Vector3(1, 1, 0)
        }
      },
      vertexShader: [
        "void main() {",
        "   gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);",
        "}"
      ].join("\n"),
      fragmentShader: [
        "uniform vec3 color;",
        "void main() {",
        "    gl_FragColor = vec4(color, 1.0);",
        "}"
      ].join("\n")
    });
  */
  mesh = new THREE.Mesh(new THREE.TorusKnotGeometry(10, 3, 100, 16), meshMaterial);
  scene.add(mesh);

  window.addEventListener('resize', onWindowResize, false);
}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
 ...