JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div id="container"><a><span id="animate">Animate (ON-OFF)</span></a>
<br/>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="https://rawgithub.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://rawgithub.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
CSS
#container a {
cursor: pointer;
display: inline-block;
position: absolute;
top: 40px;
left: 20px;
color: white;
background-color: grey;
}
JavaScript
//mirror shader
var mirrorShader = {
uniforms: {
diffuseColor: {
type: "c",
value: new THREE.Color(0xffdea2)
},
diffuseSampler: {
type: "t",
value: null
}
},
vertexShader: [
"varying vec4 texCoord;",
"void main() {",
"vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
"texCoord = projectionMatrix * mvPosition;",
"texCoord.x *= -1.0;",
"texCoord.xy = 0.5*texCoord.xy + 0.5*texCoord.w;",
"gl_Position = projectionMatrix * mvPosition;",
"}"
].join("\n"),
fragmentShader: [
"uniform vec3 diffuseColor;",
"uniform sampler2D diffuseSampler;",
"varying vec4 texCoord;",
"void main() {",
"vec4 uv = texCoord;",
"vec4 color = vec4(diffuseColor, 1.0);",
"color = texture2DProj(diffuseSampler, uv);",
"color = color * vec4(diffuseColor, 1.0) + vec4(diffuseColor, 1.0) * 0.1;",
"gl_FragColor = color;",
"}"
].join("\n")
};
// Global variables
// scene size
var WIDTH = 800;
var HEIGHT = 600;
// camera
var VIEW_ANGLE = 45;
var ASPECT = WIDTH / HEIGHT;
var NEAR = 1;
var FAR = 500;
//scene
var default_light;
var camera, mirrorCamera;
var renderer;
var scene;
var cameraControls;
var mirror;
var mirrorRenderTarget;
var phongMat;
var shaderMaterial;
var doAnimate = true;
$("#animate").click(
function () {
doAnimate = !doAnimate;
});
function init() {
//RENDERER
renderer = new THREE.WebGLRenderer();
renderer.setSize(WIDTH, HEIGHT);
renderer.autoClear = true;
renderer.setClearColor(0x000000, 1.0);
//SCENE
scene = new THREE.Scene();
//CAMERA
camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
camera.position.set(-10, 90, 165);
cameraControls = new THREE.OrbitControls(camera, renderer.domElement);
cameraControls.target.set(0.0, 0.0,...