123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452 |
- <html lang="en">
- <head>
- <title>Ammo.js softbody cloth demo</title>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
- <link type="text/css" rel="stylesheet" href="main.css">
- <style>
- body {
- color: #333;
- }
- </style>
- </head>
- <body>
- <div id="info">Ammo.js physics soft body cloth demo<br>Press Q or A to move the arm.</div>
- <div id="container"></div>
- <script src="js/libs/ammo.js"></script>
- <script type="module">
- import * as THREE from '../build/three.module.js';
- import Stats from './jsm/libs/stats.module.js';
- import { OrbitControls } from './jsm/controls/OrbitControls.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 armMovement = 0;
- Ammo().then( function ( AmmoLib ) {
- Ammo = AmmoLib;
- init();
- animate();
- } );
- function init() {
- initGraphics();
- initPhysics();
- createObjects();
- initInput();
- }
- function initGraphics() {
- container = document.getElementById( 'container' );
- camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.2, 2000 );
- scene = new THREE.Scene();
- scene.background = new THREE.Color( 0xbfd1e5 );
- camera.position.set( - 12, 7, 4 );
- renderer = new THREE.WebGLRenderer();
- renderer.setPixelRatio( window.devicePixelRatio );
- renderer.setSize( window.innerWidth, window.innerHeight );
- renderer.shadowMap.enabled = true;
- container.appendChild( renderer.domElement );
- controls = new OrbitControls( camera, renderer.domElement );
- 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 );
- light.position.set( - 7, 10, 15 );
- light.castShadow = true;
- var d = 10;
- light.shadow.camera.left = - d;
- light.shadow.camera.right = d;
- light.shadow.camera.top = d;
- light.shadow.camera.bottom = - d;
- light.shadow.camera.near = 2;
- light.shadow.camera.far = 50;
- light.shadow.mapSize.x = 1024;
- light.shadow.mapSize.y = 1024;
- light.shadow.bias = - 0.003;
- scene.add( light );
- stats = new Stats();
- stats.domElement.style.position = 'absolute';
- stats.domElement.style.top = '0px';
- container.appendChild( stats.domElement );
- window.addEventListener( 'resize', onWindowResize, false );
- }
- 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();
- // Ground
- pos.set( 0, - 0.5, 0 );
- quat.set( 0, 0, 0, 1 );
- var ground = createParalellepiped( 40, 1, 40, 0, pos, quat, new THREE.MeshPhongMaterial( { color: 0xFFFFFF } ) );
- ground.castShadow = true;
- ground.receiveShadow = true;
- textureLoader.load( "textures/grid.png", function ( texture ) {
- texture.wrapS = THREE.RepeatWrapping;
- texture.wrapT = THREE.RepeatWrapping;
- texture.repeat.set( 40, 40 );
- ground.material.map = texture;
- ground.material.needsUpdate = true;
- } );
- // Wall
- var brickMass = 0.5;
- var brickLength = 1.2;
- var brickDepth = 0.6;
- var brickHeight = brickLength * 0.5;
- var numBricksLength = 6;
- var numBricksHeight = 8;
- var z0 = - numBricksLength * brickLength * 0.5;
- pos.set( 0, brickHeight * 0.5, z0 );
- quat.set( 0, 0, 0, 1 );
- for ( var j = 0; j < numBricksHeight; j ++ ) {
- var oddRow = ( j % 2 ) == 1;
- pos.z = z0;
- if ( oddRow ) {
- pos.z -= 0.25 * brickLength;
- }
- var nRow = oddRow ? numBricksLength + 1 : numBricksLength;
- for ( var i = 0; i < nRow; i ++ ) {
- var brickLengthCurrent = brickLength;
- var brickMassCurrent = brickMass;
- if ( oddRow && ( i == 0 || i == nRow - 1 ) ) {
- brickLengthCurrent *= 0.5;
- brickMassCurrent *= 0.5;
- }
- var brick = createParalellepiped( brickDepth, brickHeight, brickLengthCurrent, brickMassCurrent, pos, quat, createMaterial() );
- brick.castShadow = true;
- brick.receiveShadow = true;
- if ( oddRow && ( i == 0 || i == nRow - 2 ) ) {
- pos.z += 0.75 * brickLength;
- } else {
- pos.z += brickLength;
- }
- }
- pos.y += brickHeight;
- }
- // The cloth
- // Cloth graphic object
- var clothWidth = 4;
- var clothHeight = 3;
- var clothNumSegmentsZ = clothWidth * 5;
- var clothNumSegmentsY = clothHeight * 5;
- var clothPos = new THREE.Vector3( - 3, 3, 2 );
- 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 );
- var clothMaterial = new THREE.MeshLambertMaterial( { color: 0xFFFFFF, side: THREE.DoubleSide } );
- 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;
- } );
- // 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() } );
- }
- function initInput() {
- window.addEventListener( 'keydown', function ( event ) {
- switch ( event.keyCode ) {
- // Q
- case 81:
- armMovement = 1;
- break;
- // A
- case 65:
- armMovement = - 1;
- break;
- }
- }, false );
- window.addEventListener( 'keyup', function () {
- armMovement = 0;
- }, false );
- }
- function onWindowResize() {
- camera.aspect = window.innerWidth / window.innerHeight;
- camera.updateProjectionMatrix();
- renderer.setSize( window.innerWidth, window.innerHeight );
- }
- function animate() {
- requestAnimationFrame( animate );
- render();
- stats.update();
- }
- function render() {
- var deltaTime = clock.getDelta();
- updatePhysics( deltaTime );
- renderer.render( scene, camera );
- }
- function updatePhysics( deltaTime ) {
- // Hinge control
- hinge.enableAngularMotor( true, 0.8 * armMovement, 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>
- </html>
|