hw6

by 蔡 育曄

HTML

<div id="info">
  hw6 Basic GLSL <br>
  
  <select id='coords'>
    <option value="obj" selected>Object Coordinate</option>
    <option value="world">World Coordinate </option>
  </select>
  
  <select id='shading'>
  <option value='perVertex' selected> Per Vertex</option>
  <option value='perPixel'> Per Pixel </option>
  </select>

</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://code.jquery.com/jquery-2.1.4.min.js"></script>


<!--<script id="myVertexShader" type="x-shader/x-vertex">
  uniform int shading;
  uniform int coordinate;
  varying vec3 color;
	
  void perVertexShading(vec3 objpos, vec3 worldpos) {
    if (coordinate == 0) {
  	  if (objpos.x > 0.0) 
    	color = vec3 (1,1,1);
      else
    	color = vec3 (0,0,0);
    } else if (coordinate == 1) {
  	  if (worldpos.x > 0.0) 
    	color = vec3 (1,1,1);
      else
    	color = vec3 (0,0,0);    	
    }
  }

  // your homework
  void perPixelShading() {
   
  }
  
  void main() {
	gl_Position = projectionMatrix* modelViewMatrix * vec4( position, 1.0);
    vec4 worldpos = modelMatrix * vec4 (position, 1.0);
     
  	if (shading == 0)  // per-vertex shading
    	perVertexShading(position, worldpos.xyz);
    else
    	perPixelShading();
  }
</script>

<script id="myFragmentShader" type="x-shader/x-fragment">
  varying vec3 color;
	void main() {
		gl_FragColor = vec4 (color, 1.0);
	}
</script>-->

CSS

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

body {
  overflow: hidden;
}

JavaScript

$('#coords').change( function() {
	console.log ( $(this).val() );
	let objType = $(this).val();
	if (objType === 'obj') {
		teapotMaterial.uniforms.coordinate.value = 0;
	} else if (objType === 'world') {
		teapotMaterial.uniforms.coordinate.value = 1;
	}
});

var scene, renderer, camera;
var controls;
var movingTeapot;
var angle = 0;
var teapotMaterial;

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);

  scene = new THREE.Scene();

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

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

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

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

  /////////////////////////////////////////////////////////////////


  /*teapotMaterial = new THREE.ShaderMaterial({
    uniforms: {
      lightpos: {type:'v3', value: new THREE.Vector3(0, 30, 20) },
	  shading: {type:'i', value: 0},
      coordinate: {type:'i', value: 0},
	},
    vertexShader: document.getElementById('myVertexShader').textContent,
    fragmentShader: document.getElementById('myFragmentShader').textContent
  });

  var jsonLoader = new THREE.JSONLoader();
  
  //var url = "teapot.json";
  var url = 'https://raw.githubusercontent.com/jyunming-chen/tutsplus/master/models/teapot.json';
  jsonLoader.load(url, function(geometry, materials) {
    //var material = new THREE.MeshFaceMaterial(materials);
    jsonModel = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial());
    
    let theTeapot =...