updated sheen demo, added it to files.js

examples/files.js

@@ -189,6 +189,7 @@ var files = {
 		"webgl_materials_video",
 		"webgl_materials_video_webcam",
 		"webgl_materials_wireframe",
+		"webgl_materials_sheen",
 		"webgl_math_orientation_transform",
 		"webgl_mirror",
 		"webgl_mirror_nodes",

examples/webgl_materials_sheen.html

@@ -25,60 +25,40 @@
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
+			import { FBXLoader } from './jsm/loaders/FBXLoader.js';
+
 			// Graphics variables
-			var container, stats;
-			var camera, controls, scene, renderer;
-			var textureLoader;
-			var clock = new THREE.Clock();
-
-			// Physics variables
-			var gravityConstant = - 9.8;
-			var physicsWorld;
-			var rigidBodies = [];
-			var margin = 0.05;
-			var hinge;
-			var cloth;
-			var transformAux1;
-
-			var clothMaterial;
+			var camera, controls, scene, renderer, mesh, stats;
 
 			var params = {
 				sheen: .5,
-				hue: 0,
-				roughness: 1
+				hue: 265,
+				roughness: .9
 			};
 
-			Ammo().then( function( AmmoLib ) {
+			// model
+			new FBXLoader().load( 'models/fbx/cloth.fbx', function ( loadedModel ) {
 
-				Ammo = AmmoLib;
+				mesh = loadedModel.children[0];
 
 				init();
-				animate();
 
 			} );
 
-
-			function init() {
-
-				initGraphics();
-
-				initPhysics();
-
-				createObjects();
-
-			}
-
-			function initGraphics() {
-
-				container = document.getElementById( 'container' );
+			function init( ) {
 
 				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.2, 2000 );
 
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xbfd1e5 );
 
+				mesh.material = new THREE.MeshPhysicalMaterial();
+				mesh.scale.multiplyScalar( .5 );
+				scene.add( mesh );
+
 				camera.position.set( - 12, 7, 4 );
 
+				var container = document.getElementById( 'container' );
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
@@ -89,14 +69,13 @@
 				controls.target.set( 0, 2, 0 );
 				controls.update();
 
-				textureLoader = new THREE.TextureLoader();
-
 				var ambientLight = new THREE.AmbientLight( 0x404040 );
 				scene.add( ambientLight );
 
 				var light = new THREE.DirectionalLight( 0xffffff, 1.5 );
-				light.position.set( - 7, 10, 15 );
+				light.position.set( - 7, 30, 15 );
 				light.castShadow = true;
+
 				var d = 10;
 				light.shadow.camera.left = - d;
 				light.shadow.camera.right = d;
@@ -115,7 +94,7 @@
 				stats = new Stats();
 				stats.domElement.style.position = 'absolute';
 				stats.domElement.style.top = '0px';
-				container.appendChild( stats.domElement );
+				container.appendChild( stats.dom );
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
@@ -126,172 +105,7 @@
 				gui.add( params, 'roughness', 0, 1 );
 				gui.open();
 
-			}
-
-			function initPhysics() {
-
-				// Physics configuration
-
-				var collisionConfiguration = new Ammo.btSoftBodyRigidBodyCollisionConfiguration();
-				var dispatcher = new Ammo.btCollisionDispatcher( collisionConfiguration );
-				var broadphase = new Ammo.btDbvtBroadphase();
-				var solver = new Ammo.btSequentialImpulseConstraintSolver();
-				var softBodySolver = new Ammo.btDefaultSoftBodySolver();
-				physicsWorld = new Ammo.btSoftRigidDynamicsWorld( dispatcher, broadphase, solver, collisionConfiguration, softBodySolver );
-				physicsWorld.setGravity( new Ammo.btVector3( 0, gravityConstant, 0 ) );
-				physicsWorld.getWorldInfo().set_m_gravity( new Ammo.btVector3( 0, gravityConstant, 0 ) );
-
-				transformAux1 = new Ammo.btTransform();
-
-			}
-
-			function createObjects() {
-
-				var pos = new THREE.Vector3();
-				var quat = new THREE.Quaternion();
-
-				// The cloth
-				// Cloth graphic object
-				var clothWidth = 4;
-				var clothHeight = 3;
-				var clothNumSegmentsZ = clothWidth * 15;
-				var clothNumSegmentsY = clothHeight * 15;
-				var clothPos = new THREE.Vector3( - 3, 3, 2 );
-
-				//var clothGeometry = new THREE.BufferGeometry();
-				var clothGeometry = new THREE.PlaneBufferGeometry( clothWidth, clothHeight, clothNumSegmentsZ, clothNumSegmentsY );
-				clothGeometry.rotateY( Math.PI * 0.5 );
-				clothGeometry.translate( clothPos.x, clothPos.y + clothHeight * 0.5, clothPos.z - clothWidth * 0.5 );
-				clothMaterial = new THREE.MeshPhysicalMaterial( {
-					color: 0x8000FF,
-					side: THREE.DoubleSide,
-					roughness: 1,
-					sheen: .9
-				} );
-				cloth = new THREE.Mesh( clothGeometry, clothMaterial );
-				cloth.castShadow = true;
-				//cloth.receiveShadow = true;
-				scene.add( cloth );
-				textureLoader.load( "textures/grid.png", function ( texture ) {
-
-					texture.wrapS = THREE.RepeatWrapping;
-					texture.wrapT = THREE.RepeatWrapping;
-					texture.repeat.set( clothNumSegmentsZ, clothNumSegmentsY );
-					// cloth.material.map = texture;
-					cloth.material.needsUpdate = true;
-
-				} );
-
-				var sphere = new THREE.Mesh(new THREE.SphereBufferGeometry(.5, 32, 32), clothMaterial);
-				sphere.position.set(0, 2, 0);
-				scene.add(sphere);
-
-				// Cloth physic object
-				var softBodyHelpers = new Ammo.btSoftBodyHelpers();
-				var clothCorner00 = new Ammo.btVector3( clothPos.x, clothPos.y + clothHeight, clothPos.z );
-				var clothCorner01 = new Ammo.btVector3( clothPos.x, clothPos.y + clothHeight, clothPos.z - clothWidth );
-				var clothCorner10 = new Ammo.btVector3( clothPos.x, clothPos.y, clothPos.z );
-				var clothCorner11 = new Ammo.btVector3( clothPos.x, clothPos.y, clothPos.z - clothWidth );
-				var clothSoftBody = softBodyHelpers.CreatePatch( physicsWorld.getWorldInfo(), clothCorner00, clothCorner01, clothCorner10, clothCorner11, clothNumSegmentsZ + 1, clothNumSegmentsY + 1, 0, true );
-				var sbConfig = clothSoftBody.get_m_cfg();
-				sbConfig.set_viterations( 10 );
-				sbConfig.set_piterations( 10 );
-
-				clothSoftBody.setTotalMass( 0.9, false );
-				Ammo.castObject( clothSoftBody, Ammo.btCollisionObject ).getCollisionShape().setMargin( margin * 3 );
-				physicsWorld.addSoftBody( clothSoftBody, 1, - 1 );
-				cloth.userData.physicsBody = clothSoftBody;
-				// Disable deactivation
-				clothSoftBody.setActivationState( 4 );
-
-				// The base
-				var armMass = 2;
-				var armLength = 3 + clothWidth;
-				var pylonHeight = clothPos.y + clothHeight;
-				var baseMaterial = new THREE.MeshPhongMaterial( { color: 0x606060 } );
-				pos.set( clothPos.x, 0.1, clothPos.z - armLength );
-				quat.set( 0, 0, 0, 1 );
-				var base = createParalellepiped( 1, 0.2, 1, 0, pos, quat, baseMaterial );
-				base.castShadow = true;
-				base.receiveShadow = true;
-				pos.set( clothPos.x, 0.5 * pylonHeight, clothPos.z - armLength );
-				var pylon = createParalellepiped( 0.4, pylonHeight, 0.4, 0, pos, quat, baseMaterial );
-				pylon.castShadow = true;
-				pylon.receiveShadow = true;
-				pos.set( clothPos.x, pylonHeight + 0.2, clothPos.z - 0.5 * armLength );
-				var arm = createParalellepiped( 0.4, 0.4, armLength + 0.4, armMass, pos, quat, baseMaterial );
-				arm.castShadow = true;
-				arm.receiveShadow = true;
-
-				// Glue the cloth to the arm
-				var influence = 0.5;
-				clothSoftBody.appendAnchor( 0, arm.userData.physicsBody, false, influence );
-				clothSoftBody.appendAnchor( clothNumSegmentsZ, arm.userData.physicsBody, false, influence );
-
-				// Hinge constraint to move the arm
-				var pivotA = new Ammo.btVector3( 0, pylonHeight * 0.5, 0 );
-				var pivotB = new Ammo.btVector3( 0, - 0.2, - armLength * 0.5 );
-				var axis = new Ammo.btVector3( 0, 1, 0 );
-				hinge = new Ammo.btHingeConstraint( pylon.userData.physicsBody, arm.userData.physicsBody, pivotA, pivotB, axis, axis, true );
-				physicsWorld.addConstraint( hinge, true );
-
-			}
-
-			function createParalellepiped( sx, sy, sz, mass, pos, quat, material ) {
-
-				var threeObject = new THREE.Mesh( new THREE.BoxBufferGeometry( sx, sy, sz, 1, 1, 1 ), material );
-				var shape = new Ammo.btBoxShape( new Ammo.btVector3( sx * 0.5, sy * 0.5, sz * 0.5 ) );
-				shape.setMargin( margin );
-
-				createRigidBody( threeObject, shape, mass, pos, quat );
-
-				return threeObject;
-
-			}
-
-			function createRigidBody( threeObject, physicsShape, mass, pos, quat ) {
-
-				threeObject.position.copy( pos );
-				threeObject.quaternion.copy( quat );
-
-				var transform = new Ammo.btTransform();
-				transform.setIdentity();
-				transform.setOrigin( new Ammo.btVector3( pos.x, pos.y, pos.z ) );
-				transform.setRotation( new Ammo.btQuaternion( quat.x, quat.y, quat.z, quat.w ) );
-				var motionState = new Ammo.btDefaultMotionState( transform );
-
-				var localInertia = new Ammo.btVector3( 0, 0, 0 );
-				physicsShape.calculateLocalInertia( mass, localInertia );
-
-				var rbInfo = new Ammo.btRigidBodyConstructionInfo( mass, motionState, physicsShape, localInertia );
-				var body = new Ammo.btRigidBody( rbInfo );
-
-				threeObject.userData.physicsBody = body;
-
-				scene.add( threeObject );
-
-				if ( mass > 0 ) {
-
-					rigidBodies.push( threeObject );
-
-					// Disable deactivation
-					body.setActivationState( 4 );
-
-				}
-
-				physicsWorld.addRigidBody( body );
-
-			}
-
-			function createRandomColor() {
-
-				return Math.floor( Math.random() * ( 1 << 24 ) );
-
-			}
-
-			function createMaterial() {
-
-				return new THREE.MeshPhongMaterial( { color: createRandomColor() } );
+				animate();
 
 			}
 
@@ -315,63 +129,13 @@
 
 			function render() {
 
-				var deltaTime = clock.getDelta();
-
-				updatePhysics( deltaTime );
-
-				clothMaterial.sheen = params.sheen;
-				clothMaterial.color = new THREE.Color().setHSL(params.hue / 360, 1, .5);
-				clothMaterial.roughness = params.roughness;
-
+				mesh.material.sheen = params.sheen;
+				mesh.material.color = new THREE.Color().setHSL(params.hue / 360, 1, .5);
+				mesh.material.roughness = params.roughness;
 				renderer.render( scene, camera );
 
 			}
 
-			function updatePhysics( deltaTime ) {
-
-				// Hinge control
-				hinge.enableAngularMotor( true, (Math.random() - .5) * 1., 50 );
-				// Step world
-				physicsWorld.stepSimulation( deltaTime, 10 );
-
-				// Update cloth
-				var softBody = cloth.userData.physicsBody;
-				var clothPositions = cloth.geometry.attributes.position.array;
-				var numVerts = clothPositions.length / 3;
-				var nodes = softBody.get_m_nodes();
-				var indexFloat = 0;
-				for ( var i = 0; i < numVerts; i ++ ) {
-
-					var node = nodes.at( i );
-					var nodePos = node.get_m_x();
-					clothPositions[ indexFloat ++ ] = nodePos.x();
-					clothPositions[ indexFloat ++ ] = nodePos.y();
-					clothPositions[ indexFloat ++ ] = nodePos.z();
-
-				}
-				cloth.geometry.computeVertexNormals();
-				cloth.geometry.attributes.position.needsUpdate = true;
-				cloth.geometry.attributes.normal.needsUpdate = true;
-
-				// Update rigid bodies
-				for ( var i = 0, il = rigidBodies.length; i < il; i ++ ) {
-
-					var objThree = rigidBodies[ i ];
-					var objPhys = objThree.userData.physicsBody;
-					var ms = objPhys.getMotionState();
-					if ( ms ) {
-
-						ms.getWorldTransform( transformAux1 );
-						var p = transformAux1.getOrigin();
-						var q = transformAux1.getRotation();
-						objThree.position.set( p.x(), p.y(), p.z() );
-						objThree.quaternion.set( q.x(), q.y(), q.z(), q.w() );
-
-					}
-
-				}
-			}
-
 		</script>
 
 	</body>