HW6 測試

by j91157j91157

HTML

<div id="info">
Computer Graphics<br/>
Homework 5<br/>
GLSL<br/>
Note: shading and cooridnate system only apply to ShaderMaterial
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/dat.gui.min.js"></script>
<script id="myVertexShader" type="x-shader/x-vertex">
  uniform int shading;
  uniform int coordinate;
	varying vec3 color;			// vertex color (per-vertex shading)
  varying vec4 pos_p;			// fragment position (per-pixel shading)
  vec4 pos_v;							// vertex position (per-vertex shading)
	
  void perVertexShading() {
  	if (pos_v.x < 0.0) 
    	color = vec3 (1,1,1);
    else
    	color = vec3 (0,0,0);
  }
  
	void main() {
    if(coordinate == 0){					// coordinate system = object
    	pos_v = vec4(position, 1.0);
      gl_Position = projectionMatrix * modelViewMatrix * pos_v;
    }
    else if(coordinate == 1){			// coordinate system = world
    	pos_v = modelMatrix * vec4(position, 1.0);
      gl_Position = projectionMatrix * viewMatrix * pos_v;
    }
    else{													// coordinate system = eye
    	pos_v = modelViewMatrix * vec4(position, 1.0);
      gl_Position = projectionMatrix * pos_v;
    }
    
  	pos_p = pos_v;		 // pass the vertex position to fragment position
  	if (shading == 0)  // per-vertex shading
    	perVertexShading();
  }
</script>
<script id="myFragmentShader" type="x-shader/x-fragment">
	uniform int shading;
  varying vec3 color;		// vertex color (per-vertex shading)
  varying vec4 pos_p;		// fragment position (per-pixel shading)
  vec3 color_p;					// fragment color (per-pixel shading)
  
  void perPixelShading() {
  	if (pos_p.x < 0.0) 
    	color_p = vec3 (1,1,1);
    else
    	color_p = vec3 (0,0,0);
  }
  
	void main() {
  	if(shading == 1){			// per-pixel shading
    	perPixelShading();
    	gl_FragColor = vec4 (color_p, 1.0);
    }
   ...

CSS

#info {
  position: absolute;
  top: 2%;
  width: 100%;
  padding: 10px;
  text-align: left;
  color: #ffff00
}
#gui {
  position: absolute;
  top: 30px;
  right: 1%;
  height: 600px;
  //width: 100px;
}
#gui2 {
  position: absolute;
  top: 150px;
  left: 1%;
  height: 600px;
  //width: 100px;
}
body {
  overflow: hidden;
}

JavaScript

var scene, renderer, camera;
var controls, gcontrols, gcontrols2;
var originTeaport, aroundTeaport, plane, spotLignt, directionalLight, pointLight;
var slBall, slBallF, dlBall, dlBallF, plBall, plBallF;
var pTexture, shaderMaterial, planeSize = 1000;
var angle = 0, angle_sl = 0, angle_dl = 0, angle_pl = 0;
init();
animate();
function init() {
  var width = window.innerWidth;
  var height = window.innerHeight;
  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(width, height);
  renderer.setClearColor(0x888888);
  document.body.appendChild(renderer.domElement);
  window.addEventListener('resize', onWindowResize, false);
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 10000);
  camera.position.y = 200;
  camera.position.z = 200;
  camera.lookAt(new THREE.Vector3(0, 0, 0));
  controls = new THREE.OrbitControls(camera, renderer.domElement);
  
  var ambientLight = new THREE.AmbientLight(0x222222);
  scene.add(ambientLight);
////////////////////////////////////////////////////
	// gui-controls
	gcontrols = new function() {
    this.material_at = 'ShaderMaterial';
    this.shading_at = 'per-vertex';
    this.coordinate_system_at = 'object';
    this.material_ot = 'PhongMaterial';
    this.texture_p = true;
    this.wireframe_p = false;
    this.material_p = 'PhongMaterial';
    this.widthSegments_p = 1;
    this.heightSegments_p = 1;
  }
  gcontrols2 = new function() {
  	this.use_sl = true;
    this.round_sl = true;
		this.color_sl = '#ffffff';
		this.position_x_sl = 200;
		this.position_y_sl = 300;
		this.position_z_sl = 200;
    this.use_dl = false;
    this.round_dl = false;
		this.color_dl = '#ffffff';
		this.position_x_dl = 200;
		this.position_y_dl = 300;
		this.position_z_dl = 200;
    this.use_pl = false;
    this.round_pl = false;
		this.color_pl = '#ffffff';
		this.position_x_pl = 200;
		this.position_y_pl = 300;
		this.position_z_pl = 200;
  }
  
  var gui = new dat.GUI();
 ...