|
|
@@ -96,223 +96,242 @@
|
|
|
<script src="js/nodes/materials/PhongNode.js"></script>
|
|
|
<script src="js/nodes/materials/PhongNodeMaterial.js"></script>
|
|
|
|
|
|
+ <!-- NodeMaterial Loader -->
|
|
|
+ <script src="js/loaders/NodeMaterialLoader.js"></script>
|
|
|
+
|
|
|
<script>
|
|
|
|
|
|
- // scene size
|
|
|
- var WIDTH = window.innerWidth;
|
|
|
- var HEIGHT = window.innerHeight;
|
|
|
+ // scene size
|
|
|
+ var WIDTH = window.innerWidth;
|
|
|
+ var HEIGHT = window.innerHeight;
|
|
|
+
|
|
|
+ // camera
|
|
|
+ var VIEW_ANGLE = 45;
|
|
|
+ var ASPECT = WIDTH / HEIGHT;
|
|
|
+ var NEAR = 1;
|
|
|
+ var FAR = 500;
|
|
|
+
|
|
|
+ var decalNormal = new THREE.TextureLoader().load( 'textures/decal/decal-normal.jpg' );
|
|
|
+
|
|
|
+ var decalDiffuse = new THREE.TextureLoader().load( 'textures/decal/decal-diffuse.png' );
|
|
|
+ decalDiffuse.wrapS = decalDiffuse.wrapT = THREE.RepeatWrapping;
|
|
|
+
|
|
|
+ var camera, scene, renderer;
|
|
|
+ var clock = new THREE.Clock();
|
|
|
+
|
|
|
+ var cameraControls;
|
|
|
+
|
|
|
+ var gui = new dat.GUI();
|
|
|
+
|
|
|
+ var sphereGroup, smallSphere;
|
|
|
+ var groundMirrorMaterial;
|
|
|
+
|
|
|
+ function init() {
|
|
|
+
|
|
|
+ // renderer
|
|
|
+ renderer = new THREE.WebGLRenderer();
|
|
|
+ renderer.setPixelRatio( window.devicePixelRatio );
|
|
|
+ renderer.setSize( WIDTH, HEIGHT );
|
|
|
+
|
|
|
+ // scene
|
|
|
+ scene = new THREE.Scene();
|
|
|
|
|
|
// camera
|
|
|
- var VIEW_ANGLE = 45;
|
|
|
- var ASPECT = WIDTH / HEIGHT;
|
|
|
- var NEAR = 1;
|
|
|
- var FAR = 500;
|
|
|
+ camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR );
|
|
|
+ camera.position.set( 0, 75, 160 );
|
|
|
+
|
|
|
+ cameraControls = new THREE.OrbitControls( camera, renderer.domElement );
|
|
|
+ cameraControls.target.set( 0, 40, 0 );
|
|
|
+ cameraControls.maxDistance = 400;
|
|
|
+ cameraControls.minDistance = 10;
|
|
|
+ cameraControls.update();
|
|
|
+
|
|
|
+ var container = document.getElementById( 'container' );
|
|
|
+ container.appendChild( renderer.domElement );
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function fillScene() {
|
|
|
+
|
|
|
+ var planeGeo = new THREE.PlaneBufferGeometry( 100.1, 100.1 );
|
|
|
+
|
|
|
+ // reflector/mirror plane
|
|
|
+ var geometry = new THREE.PlaneBufferGeometry( 100, 100 );
|
|
|
+ var groundMirror = new THREE.ReflectorRTT( geometry, { clipBias: 0.003, textureWidth: WIDTH, textureHeight: HEIGHT } );
|
|
|
+
|
|
|
+ var mask = new THREE.SwitchNode( new THREE.TextureNode( decalDiffuse ), 'w' );
|
|
|
+ var maskFlip = new THREE.Math1Node( mask, THREE.Math1Node.INVERT );
|
|
|
+
|
|
|
+ var mirror = new THREE.ReflectorNode( groundMirror );
|
|
|
+
|
|
|
+ var normal = new THREE.TextureNode( decalNormal );
|
|
|
+ var normalXY = new THREE.SwitchNode( normal, 'xy' );
|
|
|
+ var normalXYFlip = new THREE.Math1Node(
|
|
|
+ normalXY,
|
|
|
+ THREE.Math1Node.INVERT
|
|
|
+ );
|
|
|
+
|
|
|
+ var offsetNormal = new THREE.OperatorNode(
|
|
|
+ normalXYFlip,
|
|
|
+ new THREE.FloatNode( .5 ),
|
|
|
+ THREE.OperatorNode.SUB
|
|
|
+ );
|
|
|
+
|
|
|
+ mirror.offset = new THREE.OperatorNode(
|
|
|
+ offsetNormal, // normal
|
|
|
+ new THREE.FloatNode( 6 ), // scale
|
|
|
+ THREE.OperatorNode.MUL
|
|
|
+ );
|
|
|
+
|
|
|
+ var clr = new THREE.Math3Node(
|
|
|
+ mirror,
|
|
|
+ new THREE.ColorNode( 0xFFFFFF ),
|
|
|
+ mask,
|
|
|
+ THREE.Math3Node.MIX
|
|
|
+ );
|
|
|
+
|
|
|
+ var blurMirror = new THREE.BlurNode( mirror );
|
|
|
+ blurMirror.size = new THREE.Vector2( WIDTH, HEIGHT );
|
|
|
+ blurMirror.coord = new THREE.FunctionNode( "projCoord.xyz / projCoord.q", "vec3" );
|
|
|
+ blurMirror.coord.keywords[ "projCoord" ] = new THREE.OperatorNode( mirror.offset, mirror.coord, THREE.OperatorNode.ADD );
|
|
|
+ blurMirror.radius.x = blurMirror.radius.y = 0;
|
|
|
+
|
|
|
+ gui.add( { blur: blurMirror.radius.x }, "blur", 0, 25 ).onChange( function ( v ) {
|
|
|
+
|
|
|
+ blurMirror.radius.x = blurMirror.radius.y = v;
|
|
|
+
|
|
|
+ } );
|
|
|
+
|
|
|
+ groundMirrorMaterial = new THREE.PhongNodeMaterial();
|
|
|
+ groundMirrorMaterial.environment = blurMirror; // or add "mirror" variable to disable blur
|
|
|
+ groundMirrorMaterial.environmentAlpha = mask;
|
|
|
+ groundMirrorMaterial.normal = normal;
|
|
|
+ //groundMirrorMaterial.normalScale = new THREE.FloatNode( 1 );
|
|
|
+ groundMirrorMaterial.build();
|
|
|
+
|
|
|
+ // test serialization
|
|
|
+/*
|
|
|
+ var library = {};
|
|
|
+ library[ groundMirror.uuid ] = groundMirror;
|
|
|
+ library[ decalDiffuse.uuid ] = decalDiffuse;
|
|
|
+ library[ decalNormal.uuid ] = decalNormal;
|
|
|
+ library[ mirror.textureMatrix.uuid ] = mirror.textureMatrix; // use textureMatrix to projection
|
|
|
+
|
|
|
+ var json = groundMirrorMaterial.toJSON();
|
|
|
+
|
|
|
+ groundMirrorMaterial = new THREE.NodeMaterialLoader( null, library ).parse( json );
|
|
|
+*/
|
|
|
+ //--
|
|
|
+
|
|
|
+ var mirrorMesh = new THREE.Mesh( planeGeo, groundMirrorMaterial );
|
|
|
+ mirrorMesh.add( groundMirror );
|
|
|
+ mirrorMesh.rotateX( - Math.PI / 2 );
|
|
|
+ scene.add( mirrorMesh );
|
|
|
|
|
|
- var decalNormal = new THREE.TextureLoader().load( 'textures/decal/decal-normal.jpg' );
|
|
|
+ sphereGroup = new THREE.Object3D();
|
|
|
+ scene.add( sphereGroup );
|
|
|
|
|
|
- var decalDiffuse = new THREE.TextureLoader().load( 'textures/decal/decal-diffuse.png' );
|
|
|
- decalDiffuse.wrapS = decalDiffuse.wrapT = THREE.RepeatWrapping;
|
|
|
+ var geometry = new THREE.CylinderGeometry( 0.1, 15 * Math.cos( Math.PI / 180 * 30 ), 0.1, 24, 1 );
|
|
|
+ var material = new THREE.MeshPhongMaterial( { color: 0xffffff, emissive: 0x444444 } );
|
|
|
+ var sphereCap = new THREE.Mesh( geometry, material );
|
|
|
+ sphereCap.position.y = - 15 * Math.sin( Math.PI / 180 * 30 ) - 0.05;
|
|
|
+ sphereCap.rotateX( - Math.PI );
|
|
|
|
|
|
- var camera, scene, renderer;
|
|
|
- var clock = new THREE.Clock();
|
|
|
+ var geometry = new THREE.SphereGeometry( 15, 24, 24, Math.PI / 2, Math.PI * 2, 0, Math.PI / 180 * 120 );
|
|
|
+ var halfSphere = new THREE.Mesh( geometry, material );
|
|
|
+ halfSphere.add( sphereCap );
|
|
|
+ halfSphere.rotateX( - Math.PI / 180 * 135 );
|
|
|
+ halfSphere.rotateZ( - Math.PI / 180 * 20 );
|
|
|
+ halfSphere.position.y = 7.5 + 15 * Math.sin( Math.PI / 180 * 30 );
|
|
|
|
|
|
- var cameraControls;
|
|
|
+ sphereGroup.add( halfSphere );
|
|
|
|
|
|
- var gui = new dat.GUI();
|
|
|
+ var geometry = new THREE.IcosahedronGeometry( 5, 0 );
|
|
|
+ var material = new THREE.MeshPhongMaterial( { color: 0xffffff, emissive: 0x333333, flatShading: true } );
|
|
|
+ smallSphere = new THREE.Mesh( geometry, material );
|
|
|
+ scene.add( smallSphere );
|
|
|
|
|
|
- var sphereGroup, smallSphere;
|
|
|
- var groundMirrorMaterial;
|
|
|
+ // walls
|
|
|
+ var planeTop = new THREE.Mesh( planeGeo, new THREE.MeshPhongMaterial( { color: 0xffffff } ) );
|
|
|
+ planeTop.position.y = 100;
|
|
|
+ planeTop.rotateX( Math.PI / 2 );
|
|
|
+ scene.add( planeTop );
|
|
|
+
|
|
|
+ var planeBack = new THREE.Mesh( planeGeo, new THREE.MeshPhongMaterial( { color: 0xffffff } ) );
|
|
|
+ planeBack.position.z = - 50;
|
|
|
+ planeBack.position.y = 50;
|
|
|
+ scene.add( planeBack );
|
|
|
|
|
|
- function init() {
|
|
|
+ var planeFront = new THREE.Mesh( planeGeo, new THREE.MeshPhongMaterial( { color: 0x7f7fff } ) );
|
|
|
+ planeFront.position.z = 50;
|
|
|
+ planeFront.position.y = 50;
|
|
|
+ planeFront.rotateY( Math.PI );
|
|
|
+ scene.add( planeFront );
|
|
|
+
|
|
|
+ var planeRight = new THREE.Mesh( planeGeo, new THREE.MeshPhongMaterial( { color: 0x00ff00 } ) );
|
|
|
+ planeRight.position.x = 50;
|
|
|
+ planeRight.position.y = 50;
|
|
|
+ planeRight.rotateY( - Math.PI / 2 );
|
|
|
+ scene.add( planeRight );
|
|
|
|
|
|
- // renderer
|
|
|
- renderer = new THREE.WebGLRenderer();
|
|
|
- renderer.setPixelRatio( window.devicePixelRatio );
|
|
|
- renderer.setSize( WIDTH, HEIGHT );
|
|
|
+ var planeLeft = new THREE.Mesh( planeGeo, new THREE.MeshPhongMaterial( { color: 0xff0000 } ) );
|
|
|
+ planeLeft.position.x = - 50;
|
|
|
+ planeLeft.position.y = 50;
|
|
|
+ planeLeft.rotateY( Math.PI / 2 );
|
|
|
+ scene.add( planeLeft );
|
|
|
|
|
|
- // scene
|
|
|
- scene = new THREE.Scene();
|
|
|
+ // lights
|
|
|
+ var mainLight = new THREE.PointLight( 0xcccccc, 1.5, 250 );
|
|
|
+ mainLight.position.y = 60;
|
|
|
+ scene.add( mainLight );
|
|
|
|
|
|
- // camera
|
|
|
- camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
|
|
|
- camera.position.set( 0, 75, 160 );
|
|
|
+ var greenLight = new THREE.PointLight( 0x00ff00, 0.25, 1000 );
|
|
|
+ greenLight.position.set( 550, 50, 0 );
|
|
|
+ scene.add( greenLight );
|
|
|
|
|
|
- cameraControls = new THREE.OrbitControls(camera, renderer.domElement);
|
|
|
- cameraControls.target.set( 0, 40, 0);
|
|
|
- cameraControls.maxDistance = 400;
|
|
|
- cameraControls.minDistance = 10;
|
|
|
- cameraControls.update();
|
|
|
+ var redLight = new THREE.PointLight( 0xff0000, 0.25, 1000 );
|
|
|
+ redLight.position.set( - 550, 50, 0 );
|
|
|
+ scene.add( redLight );
|
|
|
|
|
|
- var container = document.getElementById( 'container' );
|
|
|
- container.appendChild( renderer.domElement );
|
|
|
+ var blueLight = new THREE.PointLight( 0x7f7fff, 0.25, 1000 );
|
|
|
+ blueLight.position.set( 0, 50, 550 );
|
|
|
+ scene.add( blueLight );
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- function fillScene() {
|
|
|
-
|
|
|
- var planeGeo = new THREE.PlaneBufferGeometry( 100.1, 100.1 );
|
|
|
-
|
|
|
- // reflector/mirror plane
|
|
|
- var geometry = new THREE.PlaneBufferGeometry( 100, 100 );
|
|
|
- var groundMirror = new THREE.ReflectorRTT( geometry, { clipBias: 0.003, textureWidth: WIDTH, textureHeight: HEIGHT } );
|
|
|
-
|
|
|
- var mask = new THREE.SwitchNode( new THREE.TextureNode( decalDiffuse ), 'w' );
|
|
|
- var maskFlip = new THREE.Math1Node( mask, THREE.Math1Node.INVERT );
|
|
|
-
|
|
|
- var mirror = new THREE.ReflectorNode( groundMirror );
|
|
|
-
|
|
|
- var normal = new THREE.TextureNode( decalNormal );
|
|
|
- var normalXY = new THREE.SwitchNode( normal, 'xy' );
|
|
|
- var normalXYFlip = new THREE.Math1Node(
|
|
|
- normalXY,
|
|
|
- THREE.Math1Node.INVERT
|
|
|
- );
|
|
|
-
|
|
|
- var offsetNormal = new THREE.OperatorNode(
|
|
|
- normalXYFlip,
|
|
|
- new THREE.FloatNode( .5 ),
|
|
|
- THREE.OperatorNode.SUB
|
|
|
- );
|
|
|
-
|
|
|
- mirror.offset = new THREE.OperatorNode(
|
|
|
- offsetNormal, // normal
|
|
|
- new THREE.FloatNode( 6 ),// scale
|
|
|
- THREE.OperatorNode.MUL
|
|
|
- );
|
|
|
-
|
|
|
- var clr = new THREE.Math3Node(
|
|
|
- mirror,
|
|
|
- new THREE.ColorNode( 0xFFFFFF ),
|
|
|
- mask,
|
|
|
- THREE.Math3Node.MIX
|
|
|
- );
|
|
|
-
|
|
|
- var blurMirror = new THREE.BlurNode( mirror );
|
|
|
- blurMirror.size = new THREE.Vector2( WIDTH, HEIGHT );
|
|
|
- blurMirror.coord = new THREE.FunctionNode( "projCoord.xyz / projCoord.q", "vec3" );
|
|
|
- blurMirror.coord.keywords[ "projCoord" ] = new THREE.OperatorNode( mirror.offset, mirror.coord, THREE.OperatorNode.ADD );
|
|
|
- blurMirror.radius.x = blurMirror.radius.y = 0;
|
|
|
-
|
|
|
- gui.add( { blur : blurMirror.radius.x }, "blur", 0, 25 ).onChange( function(v) {
|
|
|
-
|
|
|
- blurMirror.radius.x = blurMirror.radius.y = v;
|
|
|
-
|
|
|
- } );
|
|
|
-
|
|
|
- groundMirrorMaterial = new THREE.PhongNodeMaterial();
|
|
|
- groundMirrorMaterial.environment = blurMirror; // or add "mirror" variable to disable blur
|
|
|
- groundMirrorMaterial.environmentAlpha = mask;
|
|
|
- groundMirrorMaterial.normal = normal;
|
|
|
- //groundMirrorMaterial.normalScale = new THREE.FloatNode( 1 );
|
|
|
- groundMirrorMaterial.build();
|
|
|
-
|
|
|
- var mirrorMesh = new THREE.Mesh( planeGeo, groundMirrorMaterial );
|
|
|
- mirrorMesh.add( groundMirror );
|
|
|
- mirrorMesh.rotateX( - Math.PI / 2 );
|
|
|
- scene.add( mirrorMesh );
|
|
|
-
|
|
|
- sphereGroup = new THREE.Object3D();
|
|
|
- scene.add( sphereGroup );
|
|
|
-
|
|
|
- var geometry = new THREE.CylinderGeometry( 0.1, 15 * Math.cos( Math.PI / 180 * 30 ), 0.1, 24, 1 );
|
|
|
- var material = new THREE.MeshPhongMaterial( { color: 0xffffff, emissive: 0x444444 } );
|
|
|
- var sphereCap = new THREE.Mesh( geometry, material );
|
|
|
- sphereCap.position.y = -15 * Math.sin( Math.PI / 180 * 30 ) - 0.05;
|
|
|
- sphereCap.rotateX(-Math.PI);
|
|
|
-
|
|
|
- var geometry = new THREE.SphereGeometry( 15, 24, 24, Math.PI / 2, Math.PI * 2, 0, Math.PI / 180 * 120 );
|
|
|
- var halfSphere = new THREE.Mesh( geometry, material );
|
|
|
- halfSphere.add( sphereCap );
|
|
|
- halfSphere.rotateX( - Math.PI / 180 * 135 );
|
|
|
- halfSphere.rotateZ( - Math.PI / 180 * 20 );
|
|
|
- halfSphere.position.y = 7.5 + 15 * Math.sin( Math.PI / 180 * 30 );
|
|
|
-
|
|
|
- sphereGroup.add( halfSphere );
|
|
|
-
|
|
|
- var geometry = new THREE.IcosahedronGeometry( 5, 0 );
|
|
|
- var material = new THREE.MeshPhongMaterial( { color: 0xffffff, emissive: 0x333333, flatShading: true } );
|
|
|
- smallSphere = new THREE.Mesh( geometry, material );
|
|
|
- scene.add(smallSphere);
|
|
|
-
|
|
|
- // walls
|
|
|
- var planeTop = new THREE.Mesh( planeGeo, new THREE.MeshPhongMaterial( { color: 0xffffff } ) );
|
|
|
- planeTop.position.y = 100;
|
|
|
- planeTop.rotateX( Math.PI / 2 );
|
|
|
- scene.add( planeTop );
|
|
|
-
|
|
|
- var planeBack = new THREE.Mesh( planeGeo, new THREE.MeshPhongMaterial( { color: 0xffffff } ) );
|
|
|
- planeBack.position.z = -50;
|
|
|
- planeBack.position.y = 50;
|
|
|
- scene.add( planeBack );
|
|
|
-
|
|
|
- var planeFront = new THREE.Mesh( planeGeo, new THREE.MeshPhongMaterial( { color: 0x7f7fff } ) );
|
|
|
- planeFront.position.z = 50;
|
|
|
- planeFront.position.y = 50;
|
|
|
- planeFront.rotateY( Math.PI );
|
|
|
- scene.add( planeFront );
|
|
|
-
|
|
|
- var planeRight = new THREE.Mesh( planeGeo, new THREE.MeshPhongMaterial( { color: 0x00ff00 } ) );
|
|
|
- planeRight.position.x = 50;
|
|
|
- planeRight.position.y = 50;
|
|
|
- planeRight.rotateY( - Math.PI / 2 );
|
|
|
- scene.add( planeRight );
|
|
|
-
|
|
|
- var planeLeft = new THREE.Mesh( planeGeo, new THREE.MeshPhongMaterial( { color: 0xff0000 } ) );
|
|
|
- planeLeft.position.x = -50;
|
|
|
- planeLeft.position.y = 50;
|
|
|
- planeLeft.rotateY( Math.PI / 2 );
|
|
|
- scene.add( planeLeft );
|
|
|
-
|
|
|
- // lights
|
|
|
- var mainLight = new THREE.PointLight( 0xcccccc, 1.5, 250 );
|
|
|
- mainLight.position.y = 60;
|
|
|
- scene.add( mainLight );
|
|
|
-
|
|
|
- var greenLight = new THREE.PointLight( 0x00ff00, 0.25, 1000 );
|
|
|
- greenLight.position.set( 550, 50, 0 );
|
|
|
- scene.add( greenLight );
|
|
|
-
|
|
|
- var redLight = new THREE.PointLight( 0xff0000, 0.25, 1000 );
|
|
|
- redLight.position.set( - 550, 50, 0 );
|
|
|
- scene.add( redLight );
|
|
|
-
|
|
|
- var blueLight = new THREE.PointLight( 0x7f7fff, 0.25, 1000 );
|
|
|
- blueLight.position.set( 0, 50, 550 );
|
|
|
- scene.add( blueLight );
|
|
|
+ function render() {
|
|
|
|
|
|
- }
|
|
|
+ renderer.render( scene, camera );
|
|
|
|
|
|
- function render() {
|
|
|
+ }
|
|
|
|
|
|
- renderer.render(scene, camera);
|
|
|
+ function update() {
|
|
|
|
|
|
- }
|
|
|
+ requestAnimationFrame( update );
|
|
|
|
|
|
- function update() {
|
|
|
+ var delta = clock.getDelta();
|
|
|
+ var timer = Date.now() * 0.01;
|
|
|
|
|
|
- requestAnimationFrame( update );
|
|
|
+ sphereGroup.rotation.y -= 0.002;
|
|
|
|
|
|
- var delta = clock.getDelta();
|
|
|
- var timer = Date.now() * 0.01;
|
|
|
+ smallSphere.position.set(
|
|
|
+ Math.cos( timer * 0.1 ) * 30,
|
|
|
+ Math.abs( Math.cos( timer * 0.2 ) ) * 20 + 5,
|
|
|
+ Math.sin( timer * 0.1 ) * 30
|
|
|
+ );
|
|
|
+ smallSphere.rotation.y = ( Math.PI / 2 ) - timer * 0.1;
|
|
|
+ smallSphere.rotation.z = timer * 0.8;
|
|
|
|
|
|
- sphereGroup.rotation.y -= 0.002;
|
|
|
+ groundMirrorMaterial.updateFrame( delta );
|
|
|
|
|
|
- smallSphere.position.set(
|
|
|
- Math.cos( timer * 0.1 ) * 30,
|
|
|
- Math.abs( Math.cos( timer * 0.2 ) ) * 20 + 5,
|
|
|
- Math.sin( timer * 0.1 ) * 30
|
|
|
- );
|
|
|
- smallSphere.rotation.y = ( Math.PI / 2 ) - timer * 0.1;
|
|
|
- smallSphere.rotation.z = timer * 0.8;
|
|
|
+ render();
|
|
|
|
|
|
- groundMirrorMaterial.updateFrame( delta );
|
|
|
+ }
|
|
|
|
|
|
- render();
|
|
|
- }
|
|
|
+ init();
|
|
|
+ fillScene();
|
|
|
+ update();
|
|
|
|
|
|
- init();
|
|
|
- fillScene();
|
|
|
- update();
|
|
|
|
|
|
</script>
|
|
|
</body>
|
sunag