too simple shader

test

by Negan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r81/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script id="vertexShader" type="x-shader/x-vertex">
attribute vec3 offset;
attribute vec4 color;
varying vec4 vColor;
varying vec3 vNormal;
void main() {
  vColor = color;
  vNormal = normalMatrix * vec3(normal);
  gl_Position = /*((sineTime+1.)/2.0+0.2)*/projectionMatrix *
                modelViewMatrix *
                vec4(position*1.0+/*((sineTime+1.)/2.0+0.2)*/offset,1.0);
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
	varying vec4 vColor;
    varying vec3 vNormal;

	void main() {  
	  float di = 0.4*dot(vNormal,normalize(vec3(1.,1.,0.)))+0.4*dot(vNormal,normalize(vec3(1.,0.,1.)));
	  di = di+0.2;
	  vec4 vColor2= vColor*vec4(1.0,1.,1.,0.2)*di;
	  gl_FragColor = vColor2; //vec4(vec3(1.0,0.0,1.0), 0.5);  // adjust the alpha
	}
</script>
    <div id="div3d" tabindex="-1">
    </div>

JavaScript

//
// **************** SCENE ***************
//
var scene = new THREE.Scene();

//

// **************** CAMERA ***************
//
var wwid = window.innerWidth;
var whei = window.innerHeight;
var camera = new THREE.PerspectiveCamera(75, wwid / whei, 0.1, 100);
camera.position.y = -1.0;
camera.position.z = 0.7;
camera.position.x = 0.5;
camera.lookAt(0.5, 0.5, 0);

//
// **************** RENDERER ***************
//
var renderer = new THREE.WebGLRenderer({ /*alpha: true,*/
  antialias: true
});
renderer.setSize(wwid, whei);
renderer.setClearColor("#000", 1);
$("#div3d").empty(); // remove possible old canvase
document.getElementById("div3d").appendChild(renderer.domElement);

//
// **************** PLANE ***************
//
var geometrybf = new THREE.BoxGeometry(1, 1, 0.04);
var materialbf = new THREE.MeshStandardMaterial({
  color: 0xf27,
  transparent: true,
  opacity: 0.8
});
var cube = new THREE.Mesh(geometrybf, materialbf);
console.log(cube);
cube.position.set(0.5, 0.5, -0.1);
scene.add(cube);

  //
	// **************** MOUSE CONTROL ***************
	//
	controls = new THREE.OrbitControls(camera, renderer.domElement);
	controls.target.z = 0.5; // center is now 0.5,0.5,0.5
  controls.target = new THREE.Vector3(0.5,0.5,0.5);
	controls.enableDamping = false;
	controls.dampingFactor = 0.25;
	controls.enableZoom = true;
  controls.enableKeys = false; // enabled on enter
	//
	// **************** LIGHTS ***************
	//
	var light = new THREE.AmbientLight(0x404040); // soft white light
	scene.add(light);

	// create point light #1
	var pointLight =
		new THREE.PointLight(0xFFFFFF);

	// set its position
	pointLight.position.x = 1;
	pointLight.position.y = 1;
	pointLight.position.z = 1;

	// create point light #2
	var pointLight2 =
		new THREE.PointLight(0xcccccc);

	// set its position
	pointLight2.position.x = 2;
	pointLight2.position.y = 1;
	pointLight2.position.z = -1;

	// add to the scene
	scene.add(pointLight);
	scene.add(pointLight2);
  var sphereSize = 0.02;
...