├── api-reference.md ├── beeld.config ├── build-min.bat ├── build.bat ├── build ├── MOD3.min.js └── mod3.js ├── examples ├── Copperlicht │ ├── Bend.html │ ├── Bloat.html │ ├── Break.html │ ├── Noise.html │ ├── Skew.html │ ├── Taper.html │ ├── Twist.html │ ├── copperlicht.js │ └── test.jpg ├── CubicVR │ ├── 6583-diffuse.jpg │ ├── Bend.html │ ├── Bloat.html │ ├── Break.html │ ├── CubicVR.min.js │ ├── Noise.html │ ├── Perlin.html │ ├── Skew.html │ ├── Taper.html │ └── Twist.html ├── J3D │ ├── Bend.html │ ├── Noise.html │ ├── Perlin.html │ ├── Skew.html │ ├── Taper.html │ ├── Twist.html │ ├── bend.js │ ├── common │ │ ├── common.css │ │ ├── common.js │ │ └── master.css │ ├── j3d.js │ ├── noise.js │ ├── perlin.js │ ├── skew.js │ ├── taper.js │ └── twist.js ├── OSG │ ├── Bend.html │ ├── Bloat.html │ ├── OSG.js │ ├── Perlin.html │ ├── Skew.html │ ├── Taper.html │ ├── Twist.html │ ├── base.css │ ├── bluebird-2.10.2.js │ ├── core.js │ ├── hammer-2.0.4.js │ └── leap.js ├── Pre3D │ ├── Bend.html │ ├── Twist.html │ ├── demo_utils.js │ ├── pre3d.js │ ├── pre3d_path_utils.js │ └── pre3d_shape_utils.js ├── Three │ ├── Bend.html │ ├── Bloat.html │ ├── Break.html │ ├── CanvasRenderer.js │ ├── DisplaceMap.html │ ├── Noise.html │ ├── Perlin.html │ ├── Projector.js │ ├── Skew.html │ ├── Taper.html │ ├── Twist.html │ ├── flipbook3 │ │ ├── FlipBook3D.js │ │ ├── FlipBook3DApplication.js │ │ ├── assets │ │ │ └── img │ │ │ │ ├── catalog_01.jpg │ │ │ │ ├── catalog_04.jpg │ │ │ │ ├── catalog_05.jpg │ │ │ │ ├── catalog_06.jpg │ │ │ │ ├── catalog_07.jpg │ │ │ │ ├── catalog_08.jpg │ │ │ │ ├── catalog_09.jpg │ │ │ │ ├── catalog_11.jpg │ │ │ │ ├── catalog_12.jpg │ │ │ │ ├── catalog_13.jpg │ │ │ │ └── mag_page9.jpg │ │ └── index.html │ ├── three.js │ └── three.min.js └── js │ ├── RequestAnimationFrame.js │ ├── Tween.js │ └── perlin.js ├── flipbook2.png ├── readme.md └── src ├── MOD3.js ├── core ├── Mesh.js └── ModifierStack.js ├── footer.js ├── header.js ├── math ├── List.js ├── Matrix.js ├── Matrix4.js ├── ModConstant.js ├── Phase.js ├── Point.js ├── Range.js ├── Vector3.js └── XMath.js ├── modifiers ├── Bend.js ├── Bloat.js ├── Break.js ├── DisplaceMap.js ├── Noise.js ├── Perlin.js ├── Pivot.js ├── Skew.js ├── Taper.js ├── Twist.js └── Wheel.js └── plugins ├── Copperlicht ├── Copperlicht.js └── Copperlicht.min.js ├── CubicVR ├── CubicVR.js └── CubicVR.min.js ├── J3D ├── J3D.js └── J3D.min.js ├── OSG ├── OSG.js └── OSG.min.js ├── Pre3D ├── Pre3D.js └── Pre3D.min.js └── Three ├── Three.js └── Three.min.js /api-reference.md: -------------------------------------------------------------------------------- 1 | 2 | ### Pivot modifier 3 | 4 | Allows to move the pivot point of a 3D mesh. 5 | 6 | @author Bartek Drozdz 7 | 8 | 9 | 10 | 11 | ### Bend modifier 12 | 13 | Bends an object along an axis. 14 | 15 | @author Bartek Drozdz 16 | 17 | 18 | 19 | 20 | ### Bloat modifier 21 | 22 | Bloats a mesh by forcing vertices out of specified sphere 23 | 24 | @author makc 25 | 26 | 27 | 28 | 29 | ### Twist modifier 30 | 31 | Twist mesh along an axis 32 | Adapted from the Twist modifier for PV3D 33 | 34 | 35 | 36 | 37 | ### Skew modifier 38 | 39 | Skew mesh along an axis 40 | 41 | @author Bartek Drozdz 42 | 43 | 44 | 45 | 46 | ### Taper modifier 47 | 48 | The taper modifier displaces the vertices on two axes proportionally to their position on the third axis. 49 | 50 | @author Bartek Drozdz 51 | 52 | 53 | 54 | 55 | ### Wheel modifier 56 | 57 | Use it with vehicle models for wheels. 58 | 59 | The usual problem with a 3d wheel in a vahicle is that it is 60 | supposed to turn (steer) and roll in the same time. 61 | So, this code: 62 | 63 | ```javascript 64 | wheel.rotationY = 10; // Steer 10deg to the left 65 | wheel.rotationZ += 5; // Roll with a speed of 5 66 | ``` 67 | This will make the wheel roll incorectly. 68 | 69 | A usual way to solve this problem is to put the wheel in another DisplayObject3D/Mesh, 70 | turn the parent and roll the child, like that: 71 | ```javascript 72 | steer.rotationY = 10; // Steer 10deg to the left 73 | steer.wheel.rotationZ += 5; // Roll with a speed of 5 74 | ``` 75 | That will make the wheel behave correctly. But it can be uncomfortanble to apply, especially 76 | to imported complex Collada models. 77 | 78 | The Wheel modifier elegantly solves this problem by doind the proper math in order to steer and roll 79 | a single mesh at the same time. The only thing you need to do is to specify a steer vector and 80 | roll vector - usually it will be 2 of the cardinal axes. The default value is: 81 | 82 | * steer - along the Y axis / new Vector3(0, 1, 0) 83 | * roll - along the Z axis / new Vector3(0, 0, 1) 84 | 85 | 86 | It should work with most car models imported from 3D editors as this is the natural position of a wheel. 87 | 88 | *Please note, that Papervision primitive cylinder, which may also be used as wheel, will require different axes 89 | (Y for roll and Z or X for steer).* 90 | 91 | @author Bartek Drozdz 92 | 93 | 94 | 95 | 96 | ### Break modifier 97 | 98 | Allow to break a mesh 99 | 100 | @author Bartek Drozdz 101 | 102 | 103 | 104 | 105 | ### Noise modifier 106 | 107 | Randomly displaces each vertex in all 3 axes 108 | 109 | 110 | 111 | 112 | 113 | ### DisplaceMap (BitmapDisplacement) Modifier 114 | 115 | Displaces vertices based on RGB values of bitmapData pixels. 116 | 117 | BitmapDisplacement is inspired by both the AS3 built-in DisplacementMapFilter. It allows 118 | to use color values for each channels of a bitmap to modify the position of vertices in a mesh. 119 | 120 | The displacement takes place along the cardinal axes, and each axis is mapped to a 121 | channel in the bitmap: X for Red, Y for Green and Z for Blue. 122 | 123 | @author Bartek Drozdz 124 | 125 | 126 | 127 | 128 | ### Perlin modifier 129 | 130 | Displaces vertices based on a perlin/simplex noise source. 131 | 132 | Accepts a perlin/simplex noise data (with width and height information) and displaces vertices 133 | based on the value of each point of the noise map. 134 | 135 | @author Bartek Drozdz 136 | 137 | @uses: https://github.com/josephg/noisejs for JavaScript 138 | 139 | -------------------------------------------------------------------------------- /beeld.config: -------------------------------------------------------------------------------- 1 | ################################################### 2 | # 3 | # The buildtools repository is at: 4 | # https://github.com/foo123/Beeld 5 | # 6 | ################################################### 7 | 8 | settings ={} 9 | Xpresion = "Xpresion::" 10 | RegExp = "RegExp::" 11 | @ 12 | 13 | plugins =[{}] 14 | # include 'minify' plugin from plugins folder 15 | "minify" = "!plg:minify" 16 | # include 'doc' plugin from plugins folder 17 | "doc" = "!plg:doc" 18 | @ 19 | 20 | tasks =[{}] 21 | 22 | build =[{}] 23 | 24 | src =[] 25 | ./src/header.js 26 | 27 | # core 28 | ./src/MOD3.js 29 | 30 | ./src/math/ModConstant.js 31 | ./src/math/XMath.js 32 | ./src/math/Range.js 33 | ./src/math/Phase.js 34 | ./src/math/Point.js 35 | ./src/math/Matrix.js 36 | ./src/math/Vector3.js 37 | ./src/math/Matrix4.js 38 | ./src/math/List.js 39 | 40 | ./src/core/Mesh.js 41 | ./src/core/ModifierStack.js 42 | 43 | # modifiers 44 | ./src/modifiers/Pivot.js 45 | ./src/modifiers/Bend.js 46 | ./src/modifiers/Bloat.js 47 | ./src/modifiers/Twist.js 48 | ./src/modifiers/Skew.js 49 | ./src/modifiers/Taper.js 50 | ./src/modifiers/Wheel.js 51 | ./src/modifiers/Break.js 52 | ./src/modifiers/Noise.js 53 | ./src/modifiers/DisplaceMap.js 54 | ./src/modifiers/Perlin.js 55 | 56 | ## IMPORTANT: Include the appropriate plugin in your application manualy (it is just one file) 57 | ## to avoid overloading the packaged code, the plugins are removed from the build 58 | 59 | ## Support for Three.js 60 | #./src/plugins/Three/Three.js 61 | # 62 | ## Support for OSG.js 63 | #./src/plugins/OSG/OSG.js 64 | # 65 | ## Support for J3D 66 | #./src/plugins/J3D/J3D.js 67 | # 68 | ## Support for CubicVR.js 69 | #./src/plugins/CubicVR/CubicVR.js 70 | # 71 | ## Support for Copperlicht 72 | #./src/plugins/Copperlicht/Copperlicht.js 73 | # 74 | ## Support for Pre3D 75 | #./src/plugins/Pre3D/Pre3D.js 76 | 77 | ./src/footer.js 78 | 79 | @ 80 | 81 | # extract header from this file 82 | header = ./src/header.js 83 | 84 | replace =[{}] 85 | "@@VERSION@@" = "1.0.0" 86 | "@@DATE@@" = Xpresion::date("Y-m-d H:i:s") 87 | @ 88 | 89 | # extract documentation 90 | doc ={} 91 | "startdoc" = "/**[DOC_MD]" 92 | "enddoc" = "[/DOC_MD]**/" 93 | "trim" = RegExp::^\s*\*[ ]? 94 | "output" = "./api-reference.md" 95 | @ 96 | 97 | out = ./build/mod3.js 98 | @ 99 | 100 | minify =[{}] 101 | 102 | src =[] 103 | ./build/mod3.js 104 | @ 105 | 106 | # Minify the Package (map of lists) 107 | minify ={} 108 | # Options for Node UglifyJS Compiler (if used, default), (mangle and compress) 109 | uglifyjs =[] 110 | -m -c 111 | @ 112 | 113 | # Options for Java Closure Compiler (if used) 114 | closure =[] 115 | "--language_in=ECMASCRIPT5_STRICT" 116 | @ 117 | 118 | # Options for Java YUI Compressor Compiler (if used) 119 | yui =[] 120 | --preserve-semi 121 | @ 122 | @ 123 | 124 | out = ./build/mod3.min.js 125 | @ 126 | @ 127 | -------------------------------------------------------------------------------- /build-min.bat: -------------------------------------------------------------------------------- 1 | @echo off 2 | 3 | REM ################################################### 4 | REM # 5 | REM # The buildtools repository is at: 6 | REM # https://github.com/foo123/Beeld 7 | REM # 8 | REM ################################################### 9 | 10 | REM to use the python build tool do: 11 | REM python %BUILDTOOLS%\Beeld.py --config ".\beeld.config" --tasks minify 12 | 13 | REM to use the php build tool do: 14 | REM php -f %BUILDTOOLS%\Beeld.php -- --config=".\beeld.config" --tasks=minify 15 | 16 | REM to use the node build tool do: 17 | node %BUILDTOOLS%\Beeld.js --config ".\beeld.config" --tasks minify 18 | -------------------------------------------------------------------------------- /build.bat: -------------------------------------------------------------------------------- 1 | @echo off 2 | 3 | REM ################################################### 4 | REM # 5 | REM # The buildtools repository is at: 6 | REM # https://github.com/foo123/Beeld 7 | REM # 8 | REM ################################################### 9 | 10 | REM to use the python build tool do: 11 | REM python %BUILDTOOLS%\Beeld.py --config ".\beeld.config" --tasks build 12 | 13 | REM to use the php build tool do: 14 | REM php -f %BUILDTOOLS%\Beeld.php -- --config=".\beeld.config" --tasks=build 15 | 16 | REM to use the node build tool do: 17 | node %BUILDTOOLS%\Beeld.js --config ".\beeld.config" --tasks build 18 | -------------------------------------------------------------------------------- /examples/Copperlicht/Bend.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Bend demo and copperlicht.js 9 | 10 | 11 |
12 | Bend demo with copperlicht.js
13 | 14 | 15 |
16 | 75 | 76 | -------------------------------------------------------------------------------- /examples/Copperlicht/Bloat.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Bloat demo and copperlicht.js 9 | 10 | 11 |
12 | Bloat demo with copperlicht.js
13 | 14 | 15 |
16 | 70 | 71 | -------------------------------------------------------------------------------- /examples/Copperlicht/Break.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Break demo and copperlicht.js 9 | 10 | 11 |
12 | Break demo with copperlicht.js
13 | 14 | 15 |
16 | 71 | 72 | -------------------------------------------------------------------------------- /examples/Copperlicht/Noise.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Noise demo and copperlicht.js 9 | 10 | 11 |
12 | Noise demo with copperlicht.js
13 | 14 | 15 |
16 | 70 | 71 | -------------------------------------------------------------------------------- /examples/Copperlicht/Skew.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Skew demo and copperlicht.js 9 | 10 | 11 |
12 | Skew demo with copperlicht.js
13 | 14 | 15 |
16 | 69 | 70 | -------------------------------------------------------------------------------- /examples/Copperlicht/Taper.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Taper demo and copperlicht.js 9 | 10 | 11 |
12 | Taper demo with copperlicht.js
13 | 14 | 15 |
16 | 68 | 69 | -------------------------------------------------------------------------------- /examples/Copperlicht/Twist.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Twist demo and copperlicht.js 9 | 10 | 11 |
12 | Twist demo with copperlicht.js
13 | 14 | 15 |
16 | 69 | 70 | -------------------------------------------------------------------------------- /examples/Copperlicht/test.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/foo123/MOD3/a735e511fb88a484c21143679eb8cb4d4fc51c1d/examples/Copperlicht/test.jpg -------------------------------------------------------------------------------- /examples/CubicVR/6583-diffuse.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/foo123/MOD3/a735e511fb88a484c21143679eb8cb4d4fc51c1d/examples/CubicVR/6583-diffuse.jpg -------------------------------------------------------------------------------- /examples/CubicVR/Bend.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Bend demo and CubicVR.js 5 | 6 | 7 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 112 | -------------------------------------------------------------------------------- /examples/CubicVR/Bloat.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Bloat demo and CubicVR.js 5 | 6 | 7 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 106 | -------------------------------------------------------------------------------- /examples/CubicVR/Break.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Break demo and CubicVR.js 5 | 6 | 7 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 107 | -------------------------------------------------------------------------------- /examples/CubicVR/Noise.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Noise demo and CubicVR.js 5 | 6 | 7 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 106 | -------------------------------------------------------------------------------- /examples/CubicVR/Perlin.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Perlin/Simplex Noise demo and CubicVR.js 5 | 6 | 7 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 119 | -------------------------------------------------------------------------------- /examples/CubicVR/Skew.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Skew demo and CubicVR.js 5 | 6 | 7 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 105 | -------------------------------------------------------------------------------- /examples/CubicVR/Taper.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Taper demo and CubicVR.js 5 | 6 | 7 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 105 | -------------------------------------------------------------------------------- /examples/CubicVR/Twist.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Twist demo and CubicVR.js 5 | 6 | 7 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 107 | -------------------------------------------------------------------------------- /examples/J3D/Bend.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | MOD3 J3D Bend Demo 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /examples/J3D/Noise.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | MOD3 J3D Noise Demo 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /examples/J3D/Perlin.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | MOD3 J3D Perlin/Simplex Noise Demo 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /examples/J3D/Skew.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | MOD3 J3D Skew Demo 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /examples/J3D/Taper.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | MOD3 J3D Taper Demo 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /examples/J3D/Twist.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | MOD3 J3D Twist Demo 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /examples/J3D/bend.js: -------------------------------------------------------------------------------- 1 | registerDemo(function(engine) { 2 | 3 | var cube; 4 | var mstack, mod; 5 | 6 | console.log("MOD3 Bend Demo| J3D | v0.16"); 7 | 8 | this.setup = function(callback) { 9 | engine.setClearColor(J3D.Color.black); 10 | 11 | var ambient = new J3D.Transform(); 12 | ambient.light = new J3D.Light(J3D.AMBIENT); 13 | ambient.light.color = new J3D.Color(0.5, 0.5, 0.5, 1); 14 | 15 | var light = new J3D.Transform(); 16 | light.light = new J3D.Light(J3D.DIRECT); 17 | light.light.color = new J3D.Color(0.5, 0.5, 0.5, 1); 18 | light.rotation = new v3(-Math.PI, 0, Math.PI); 19 | 20 | cube = new J3D.Transform(); 21 | cube.geometry = J3D.Primitive.Plane(1, 1, 10, 10); 22 | cube.renderer = J3D.BuiltinShaders.fetch("Normal2Color"); 23 | // cube.renderer.color = new J3D.Color(1, 0, 0, 1); 24 | 25 | var camera = new J3D.Transform(); 26 | camera.camera = new J3D.Camera(); 27 | camera.position.z = 4; 28 | 29 | engine.scene.setCamera(camera); 30 | engine.scene.add(camera, cube, light, ambient); 31 | 32 | 33 | mstack = new MOD3.ModifierStack(MOD3.LibraryJ3D, cube); 34 | mod = new MOD3.Bend(); 35 | mod.angle = 0; 36 | mod.force = 0; 37 | mod.offset = 0.1; 38 | mod.switchAxes = true; 39 | mod.constraint = MOD3.ModConstant.LEFT; 40 | mstack.addModifier(mod); 41 | var tobj = { angle: Math.PI/4, force: 1.2 }; 42 | 43 | new TWEEN.Tween(tobj) 44 | .to( { force: -1.2 }, 5000) 45 | .onUpdate(function(){ 46 | mod.angle = this.angle; 47 | mod.force = this.force; 48 | mstack.apply(); 49 | }) 50 | .start(); 51 | 52 | callback(); 53 | } 54 | 55 | this.render = function(interactor) { 56 | cube.rotation.x += Math.PI * J3D.Time.deltaTime / 6000; 57 | cube.rotation.y += Math.PI / 2 * J3D.Time.deltaTime / 3000; 58 | TWEEN.update(); 59 | engine.render(); 60 | } 61 | }); -------------------------------------------------------------------------------- /examples/J3D/common/common.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Georgia, serif; 3 | background-color: #000000; 4 | color: #ffffff; 5 | margin: 0px; 6 | overflow: auto; 7 | } 8 | 9 | h2 { 10 | font-weight: normal; 11 | color: #555; 12 | padding-right: 20%; 13 | line-height: 23px; 14 | } 15 | 16 | h3 { 17 | font-weight: normal; 18 | color: #555; 19 | padding-right: 20%; 20 | } 21 | 22 | h4 { 23 | font-weight: normal; 24 | color: #555; 25 | padding-right: 20%; 26 | line-height: 20px; 27 | } 28 | 29 | p { 30 | font-weight: normal; 31 | font-size: 14px; 32 | color: #555; 33 | line-height: 20px; 34 | } 35 | 36 | .mini { 37 | position: relative; 38 | font-size: 8pt; 39 | line-height: 11pt; 40 | padding-top: 17px; 41 | } 42 | 43 | #content { 44 | position: absolute; 45 | top: 10px; 46 | left: 10px; 47 | color: #dddddd; 48 | padding: 4px; 49 | font-size: 13px; 50 | text-align: left; 51 | z-index: 0; 52 | } 53 | 54 | #nowebgl { 55 | font-size: 110px; 56 | } 57 | 58 | #header { 59 | color: #ffffff; 60 | background-color: #000000; 61 | text-align: left; 62 | position: absolute; 63 | top: 0px; 64 | left: 0px; 65 | padding: 4 8 4 4; 66 | z-index: 1; 67 | } 68 | 69 | #share { 70 | background-color: #dddddd; 71 | text-align: right; 72 | position: absolute; 73 | top: 0px; 74 | right: 0px; 75 | padding: 6 0 6 12; 76 | margin: 0 0 0 0; 77 | z-index: 1; 78 | } 79 | 80 | #stats { 81 | position: fixed; 82 | bottom: 0px; 83 | right: 0px; 84 | z-index: 100; 85 | } 86 | 87 | #madewith { 88 | color: #ffffff; 89 | background-color: #000000; 90 | : left; 91 | font-size: 13px; 92 | line-height: 26px; 93 | position: absolute; 94 | top: 0px; 95 | right: 0px; 96 | padding: 4 4 10 8; 97 | z-index: 1; 98 | } 99 | 100 | #details { 101 | color: #ffffff; 102 | font-size: 12px; 103 | line-height: 20px; 104 | background-color: #000000; 105 | text-align: left; 106 | position: absolute; 107 | padding: 4 4 4 4; 108 | top: 28px; 109 | left: 0px; 110 | z-index: 1; 111 | } 112 | 113 | .warning { 114 | position: absolute; 115 | top: 20px; 116 | left: 20px; 117 | } 118 | 119 | @-webkit-keyframes thumbOn { 120 | 0% { 121 | -webkit-filter: grayscale(0.5) brightness(0.1); 122 | } 123 | 100% { 124 | -webkit-filter: grayscale(0) brightness(0); 125 | } 126 | } 127 | 128 | @-webkit-keyframes thumbOff { 129 | 0% { 130 | -webkit-filter: grayscale(0.5) brightness(0.1); 131 | } 132 | 100% { 133 | -webkit-filter: grayscale(1) brightness(0.2); 134 | } 135 | } 136 | 137 | .thumb { 138 | float: left; 139 | padding: 8 16 8 0; 140 | -webkit-animation-name: thumbOff; 141 | -webkit-animation-duration: 0.1s; 142 | -webkit-animation-iteration-count: 1; 143 | -webkit-animation-direction: alternate; 144 | -webkit-animation-timing-function: ease-out; 145 | -webkit-animation-fill-mode: forwards; 146 | -webkit-animation-delay: 0s; 147 | } 148 | 149 | .thumb:hover { 150 | -webkit-animation-name: thumbOn; 151 | -webkit-animation-duration: 0.5s; 152 | -webkit-animation-iteration-count: 1; 153 | -webkit-animation-direction: alternate; 154 | -webkit-animation-timing-function: ease-out; 155 | -webkit-animation-fill-mode: forwards; 156 | -webkit-animation-delay: 0s; 157 | } 158 | 159 | .thumbdesc, .thumbdesc.a { 160 | font-size: 12px; 161 | text-align: left; 162 | background-color: #000000; 163 | padding: 5 5 5 5; 164 | margin-top: 1; 165 | } 166 | 167 | a.sotd:link, a.sotd:visited { 168 | color: #000000; 169 | background-color: #ffd200; 170 | } 171 | 172 | a.motd:link, a.motd:visited { 173 | color: #ffffff; 174 | background-color: #1e5fa1; 175 | } 176 | 177 | a.sotm:link, a.sotm:visited { 178 | color: #ffffff; 179 | background-color: #b00000; 180 | } 181 | 182 | a.pca:link, a.pca:visited { 183 | color: #ffffff; 184 | background-color: #327695; 185 | } 186 | 187 | a.blue:link, a.blue:visited { 188 | color: #005e8f; 189 | } 190 | 191 | a:link, a:visited { 192 | color: #ffffff; 193 | text-decoration: none; 194 | } 195 | 196 | a:hover { 197 | text-decoration: underline; 198 | } 199 | 200 | #booked { 201 | color: #ffffff; 202 | background-color: #b00000; 203 | } 204 | 205 | .perf { 206 | position: absolute; 207 | z-index: 1000; 208 | bottom: 0px; 209 | left: 0px; 210 | background-color: #000; 211 | color: #fff; 212 | font-family: Consolas, Courier, monospace; 213 | font-size: 12px; 214 | padding: 4px; 215 | } 216 | 217 | .perf ul, .perf li { 218 | list-style-type: none; 219 | margin: 0; 220 | padding: 0; 221 | } 222 | -------------------------------------------------------------------------------- /examples/J3D/common/common.js: -------------------------------------------------------------------------------- 1 | var nowebglParagraph = "
Your browser does not support webgl.
Please try latest Chrome or Firefox.
"; 2 | 3 | function setLabels(title, desc, madeBy) { 4 | 5 | var mb = (madeBy == null) ? true : false; 6 | 7 | document.write(""); 8 | 9 | if (!isLocalhost() && mb) { 10 | document.write("
made with J3D
Tweet
"); 11 | } 12 | 13 | if (desc) { 14 | document.write("
" + desc + "
"); 15 | } 16 | 17 | } 18 | 19 | function updateDesc(s) { 20 | document.getElementById("details").innerHTML = s; 21 | } 22 | 23 | function isLocalhost() { 24 | return document.location.host.indexOf("localhost") > -1; 25 | } 26 | 27 | function loadScript(src, callback) { 28 | var head = document.getElementsByTagName('head')[0]; 29 | var script = document.createElement('script'); 30 | script.type = 'text/javascript'; 31 | 32 | script.onload = callback; 33 | script.src = src + "?cb=" + Math.random(); 34 | 35 | script.onreadystatechange = function() { 36 | if (this.readyState == 'complete') { 37 | callback(); 38 | } 39 | } 40 | 41 | head.appendChild(script); 42 | } 43 | 44 | -------------------------------------------------------------------------------- /examples/J3D/common/master.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Archivo Narrow', sans-serif; 3 | background-color: #000000; 4 | margin: 0; 5 | padding: 0; 6 | border: 0; 7 | overflow: auto; 8 | } 9 | 10 | #webgl { 11 | position: absolute; 12 | top: 0px; 13 | left: 0px; 14 | -webkit-transition-property: all; 15 | -webkit-transition-duration: 1s; 16 | -webkit-filter: grayscale(1) brightness(0); 17 | } 18 | 19 | #overlay { 20 | position: absolute; 21 | top: 0px; 22 | left: 10px; 23 | } 24 | 25 | #overlay ul { 26 | margin: 0; 27 | padding: 0; 28 | border: 0; 29 | border: 0; 30 | list-style: none; 31 | } 32 | 33 | #overlay li { 34 | color: #fff; 35 | display: inline-block; 36 | float: left; 37 | text-align: center; 38 | line-height: 32px; 39 | background-color: #000; 40 | margin: 0; 41 | margin-left: 1px; 42 | padding: 0 10px 0 10px; 43 | border: 0; 44 | cursor: pointer; 45 | -webkit-transition-property: all; 46 | -webkit-transition-duration: 0.2s; 47 | } 48 | 49 | #overlay li:hover { 50 | background-color: #fff; 51 | color: #000; 52 | padding-top: 4px; 53 | } -------------------------------------------------------------------------------- /examples/J3D/noise.js: -------------------------------------------------------------------------------- 1 | registerDemo(function(engine) { 2 | 3 | var cube; 4 | var mstack, mod; 5 | 6 | console.log("MOD3 Noise Demo| J3D | v0.16"); 7 | 8 | this.setup = function(callback) { 9 | engine.setClearColor(J3D.Color.black); 10 | 11 | var ambient = new J3D.Transform(); 12 | ambient.light = new J3D.Light(J3D.AMBIENT); 13 | ambient.light.color = new J3D.Color(0.5, 0.5, 0.5, 1); 14 | 15 | var light = new J3D.Transform(); 16 | light.light = new J3D.Light(J3D.DIRECT); 17 | light.light.color = new J3D.Color(0.5, 0.5, 0.5, 1); 18 | light.rotation = new v3(-Math.PI, 0, Math.PI); 19 | 20 | cube = new J3D.Transform(); 21 | cube.geometry = J3D.Primitive.Plane(1, 1, 10, 10); 22 | cube.renderer = J3D.BuiltinShaders.fetch("Normal2Color"); 23 | // cube.renderer.color = new J3D.Color(1, 0, 0, 1); 24 | 25 | var camera = new J3D.Transform(); 26 | camera.camera = new J3D.Camera(); 27 | camera.position.z = 4; 28 | 29 | engine.scene.setCamera(camera); 30 | engine.scene.add(camera, cube, light, ambient); 31 | 32 | 33 | mstack = new MOD3.ModifierStack(MOD3.LibraryJ3D, cube); 34 | mod = new MOD3.Noise(0.05); 35 | mod.constraintAxes(MOD3.ModConstant.X | MOD3.ModConstant.Y); 36 | mstack.addModifier(mod); 37 | var tobj = { force: 0 }; 38 | new TWEEN.Tween(tobj) 39 | .to( { force: 200 }, 5000) 40 | .onUpdate(function(){ 41 | //mod.force=this.force; 42 | mstack.apply(); 43 | }) 44 | .start(); 45 | 46 | callback(); 47 | } 48 | 49 | this.render = function(interactor) { 50 | cube.rotation.x += Math.PI * J3D.Time.deltaTime / 6000; 51 | cube.rotation.y += Math.PI / 2 * J3D.Time.deltaTime / 3000; 52 | TWEEN.update(); 53 | engine.render(); 54 | } 55 | }); -------------------------------------------------------------------------------- /examples/J3D/perlin.js: -------------------------------------------------------------------------------- 1 | registerDemo(function(engine) { 2 | 3 | var cube; 4 | var mstack, mod; 5 | 6 | console.log("MOD3 Perlin/Simplex Noise Demo| J3D | v0.16"); 7 | 8 | function generate_noise2d( w, h, perlinNoise2d ) 9 | { 10 | perlinNoise2d = perlinNoise2d || noise.simplex2; 11 | var size = w*h, a = new Float32Array( size ), i, j, index; 12 | for (i=0,j=0,index=0; index= w ) { i = 0; j++; } 15 | a[ index ] = perlinNoise2d( i/w, j/h ); 16 | } 17 | a.width = w; a.height = h; 18 | return a; 19 | } 20 | 21 | this.setup = function(callback) { 22 | engine.setClearColor(J3D.Color.black); 23 | 24 | var ambient = new J3D.Transform(); 25 | ambient.light = new J3D.Light(J3D.AMBIENT); 26 | ambient.light.color = new J3D.Color(0.5, 0.5, 0.5, 1); 27 | 28 | var light = new J3D.Transform(); 29 | light.light = new J3D.Light(J3D.DIRECT); 30 | light.light.color = new J3D.Color(0.5, 0.5, 0.5, 1); 31 | light.rotation = new v3(-Math.PI, 0, Math.PI); 32 | 33 | cube = new J3D.Transform(); 34 | cube.geometry = J3D.Primitive.Plane(1, 1, 10, 10); 35 | cube.renderer = J3D.BuiltinShaders.fetch("Normal2Color"); 36 | // cube.renderer.color = new J3D.Color(1, 0, 0, 1); 37 | 38 | var camera = new J3D.Transform(); 39 | camera.camera = new J3D.Camera(); 40 | camera.position.z = 4; 41 | 42 | engine.scene.setCamera(camera); 43 | engine.scene.add(camera, cube, light, ambient); 44 | 45 | 46 | mstack = new MOD3.ModifierStack(MOD3.LibraryJ3D, cube); 47 | mod = new MOD3.Perlin(0.1, generate_noise2d( 60, 60 )); 48 | mstack.addModifier(mod); 49 | var tobj = { force: 0 }; 50 | new TWEEN.Tween(tobj) 51 | .to( { force: 0.5 }, 5000) 52 | .onUpdate(function(){ 53 | //mod.force=this.force; 54 | mstack.apply(); 55 | }) 56 | .start(); 57 | 58 | callback(); 59 | } 60 | 61 | this.render = function(interactor) { 62 | cube.rotation.x += Math.PI * J3D.Time.deltaTime / 6000; 63 | cube.rotation.y += Math.PI / 2 * J3D.Time.deltaTime / 3000; 64 | TWEEN.update(); 65 | engine.render(); 66 | } 67 | }); -------------------------------------------------------------------------------- /examples/J3D/skew.js: -------------------------------------------------------------------------------- 1 | registerDemo(function(engine) { 2 | 3 | var cube; 4 | var mstack, mod; 5 | 6 | console.log("MOD3 Skew Demo| J3D | v0.16"); 7 | 8 | this.setup = function(callback) { 9 | engine.setClearColor(J3D.Color.black); 10 | 11 | var ambient = new J3D.Transform(); 12 | ambient.light = new J3D.Light(J3D.AMBIENT); 13 | ambient.light.color = new J3D.Color(0.5, 0.5, 0.5, 1); 14 | 15 | var light = new J3D.Transform(); 16 | light.light = new J3D.Light(J3D.DIRECT); 17 | light.light.color = new J3D.Color(0.5, 0.5, 0.5, 1); 18 | light.rotation = new v3(-Math.PI, 0, Math.PI); 19 | 20 | cube = new J3D.Transform(); 21 | cube.geometry = J3D.Primitive.Cube(1, 1, 1); 22 | //cube.geometry = J3D.Primitive.Plane(1, 1, 10, 10); 23 | cube.renderer = J3D.BuiltinShaders.fetch("Normal2Color"); 24 | // cube.renderer.color = new J3D.Color(1, 0, 0, 1); 25 | 26 | var camera = new J3D.Transform(); 27 | camera.camera = new J3D.Camera(); 28 | camera.position.z = 4; 29 | 30 | engine.scene.setCamera(camera); 31 | engine.scene.add(camera, cube, light, ambient); 32 | 33 | 34 | mstack = new MOD3.ModifierStack(MOD3.LibraryJ3D, cube); 35 | mod=new MOD3.Skew(0); 36 | mstack.addModifier(mod); 37 | var tobj={force:0}; 38 | 39 | new TWEEN.Tween(tobj) 40 | .to( {force:0.5}, 5000) 41 | .onUpdate(function(){ 42 | mod.force=this.force; 43 | mstack.apply(); 44 | }) 45 | .start(); 46 | 47 | callback(); 48 | } 49 | 50 | this.render = function(interactor) { 51 | cube.rotation.x += Math.PI * J3D.Time.deltaTime / 6000; 52 | cube.rotation.y += Math.PI / 2 * J3D.Time.deltaTime / 3000; 53 | TWEEN.update(); 54 | engine.render(); 55 | } 56 | }); -------------------------------------------------------------------------------- /examples/J3D/taper.js: -------------------------------------------------------------------------------- 1 | registerDemo(function(engine) { 2 | 3 | var cube; 4 | var mstack, mod; 5 | 6 | console.log("MOD3 Taper Demo| J3D | v0.16"); 7 | 8 | this.setup = function(callback) { 9 | engine.setClearColor(J3D.Color.black); 10 | 11 | var ambient = new J3D.Transform(); 12 | ambient.light = new J3D.Light(J3D.AMBIENT); 13 | ambient.light.color = new J3D.Color(0.5, 0.5, 0.5, 1); 14 | 15 | var light = new J3D.Transform(); 16 | light.light = new J3D.Light(J3D.DIRECT); 17 | light.light.color = new J3D.Color(0.5, 0.5, 0.5, 1); 18 | light.rotation = new v3(-Math.PI, 0, Math.PI); 19 | 20 | cube = new J3D.Transform(); 21 | cube.geometry = J3D.Primitive.Cube(1, 1, 1); 22 | //cube.geometry = J3D.Primitive.Plane(1, 1, 10, 10); 23 | cube.renderer = J3D.BuiltinShaders.fetch("Normal2Color"); 24 | // cube.renderer.color = new J3D.Color(1, 0, 0, 1); 25 | 26 | var camera = new J3D.Transform(); 27 | camera.camera = new J3D.Camera(); 28 | camera.position.z = 4; 29 | 30 | engine.scene.setCamera(camera); 31 | engine.scene.add(camera, cube, light, ambient); 32 | 33 | 34 | mstack = new MOD3.ModifierStack(MOD3.LibraryJ3D, cube); 35 | mod=new MOD3.Taper(0); 36 | //mod.vector = new MOD3.Vector3([1, 1, 0]); 37 | //mod.vector2 = new MOD3.Vector3([1, 0, 0]); 38 | mstack.addModifier(mod); 39 | var tobj={force:0.1}; 40 | 41 | new TWEEN.Tween(tobj) 42 | .to( {force:0.5}, 5000) 43 | .onUpdate(function(){ 44 | mod.force=this.force; 45 | mstack.apply(); 46 | }) 47 | .start(); 48 | 49 | callback(); 50 | } 51 | 52 | this.render = function(interactor) { 53 | cube.rotation.x += Math.PI * J3D.Time.deltaTime / 6000; 54 | cube.rotation.y += Math.PI / 2 * J3D.Time.deltaTime / 3000; 55 | TWEEN.update(); 56 | engine.render(); 57 | } 58 | }); -------------------------------------------------------------------------------- /examples/J3D/twist.js: -------------------------------------------------------------------------------- 1 | registerDemo(function(engine) { 2 | 3 | var cube; 4 | var mstack, mod; 5 | 6 | console.log("MOD3 Twist Demo| J3D | v0.16"); 7 | 8 | this.setup = function(callback) { 9 | engine.setClearColor(J3D.Color.black); 10 | 11 | var ambient = new J3D.Transform(); 12 | ambient.light = new J3D.Light(J3D.AMBIENT); 13 | ambient.light.color = new J3D.Color(0.5, 0.5, 0.5, 1); 14 | 15 | var light = new J3D.Transform(); 16 | light.light = new J3D.Light(J3D.DIRECT); 17 | light.light.color = new J3D.Color(0.5, 0.5, 0.5, 1); 18 | light.rotation = new v3(-Math.PI, 0, Math.PI); 19 | 20 | cube = new J3D.Transform(); 21 | cube.geometry = J3D.Primitive.Plane(1, 1, 10, 10); 22 | cube.renderer = J3D.BuiltinShaders.fetch("Normal2Color"); 23 | // cube.renderer.color = new J3D.Color(1, 0, 0, 1); 24 | 25 | var camera = new J3D.Transform(); 26 | camera.camera = new J3D.Camera(); 27 | camera.position.z = 4; 28 | 29 | engine.scene.setCamera(camera); 30 | engine.scene.add(camera, cube, light, ambient); 31 | 32 | 33 | mstack = new MOD3.ModifierStack(MOD3.LibraryJ3D, cube); 34 | mod=new MOD3.Twist(0); 35 | mod.angle=0; 36 | mstack.addModifier(mod); 37 | var tobj={angle:0}; 38 | 39 | new TWEEN.Tween(tobj) 40 | .to( {angle:Math.PI/4}, 5000) 41 | .onUpdate(function(){ 42 | mod.angle=this.angle; 43 | mstack.apply(); 44 | }) 45 | .start(); 46 | 47 | callback(); 48 | } 49 | 50 | this.render = function(interactor) { 51 | cube.rotation.x += Math.PI * J3D.Time.deltaTime / 6000; 52 | cube.rotation.y += Math.PI / 2 * J3D.Time.deltaTime / 3000; 53 | TWEEN.update(); 54 | engine.render(); 55 | } 56 | }); -------------------------------------------------------------------------------- /examples/OSG/Bloat.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bloat demo and OSG.js 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 |
26 | 27 | 28 | 29 | 156 | 157 | -------------------------------------------------------------------------------- /examples/OSG/Skew.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Skew demo and OSG.js 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 |
26 | 27 | 28 | 29 | 156 | 157 | -------------------------------------------------------------------------------- /examples/OSG/Taper.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Taper demo and OSG.js 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 |
26 | 27 | 28 | 29 | 156 | 157 | -------------------------------------------------------------------------------- /examples/OSG/Twist.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Twist demo and OSG.js 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 |
26 | 27 | 28 | 29 | 156 | 157 | -------------------------------------------------------------------------------- /examples/OSG/base.css: -------------------------------------------------------------------------------- 1 | @import "https://fonts.googleapis.com/css?family=Exo+2:700|Roboto:100,300,400,500,700,900"; 2 | 3 | html, 4 | body { 5 | margin: 0; 6 | padding: 0; 7 | width: 100%; 8 | height: 100%; 9 | } 10 | 11 | body { 12 | overflow: hidden; 13 | 14 | font-family: "Roboto", sans-serif; 15 | font-weight: 300; 16 | line-height: 1.5; 17 | 18 | background: #444; 19 | color: #FFF; 20 | } 21 | 22 | a { 23 | color: #80ebff; 24 | text-decoration: none; 25 | } 26 | a:hover { 27 | color: #FFF; 28 | text-decoration: underline; 29 | } 30 | 31 | canvas { 32 | display: block; /* Fix middle button drag on FF */ 33 | } 34 | 35 | .osgjs-info { 36 | position: absolute; 37 | bottom: 0; 38 | left: 0; 39 | right: 0; 40 | box-sizing: border-box; 41 | padding: 20px 160px 20px 20px; 42 | } 43 | 44 | .osgjs-fullpage { 45 | position: absolute; 46 | width: 100%; 47 | height: 100%; 48 | } 49 | .osgjs-description { 50 | font-size: 14px; 51 | } 52 | 53 | .osgjs-powered { 54 | display: block; 55 | box-sizing: border-box; 56 | position: absolute; 57 | z-index: 1; 58 | bottom: 20px; 59 | right: 20px; 60 | padding: 10px 15px 10px 10px; 61 | border-radius: 25px; 62 | 63 | line-height: 32px; 64 | 65 | background: rgba(0,0,0,.3); 66 | color: #FFF !important; 67 | 68 | opacity: 0.5; 69 | } 70 | .osgjs-powered:hover { 71 | text-decoration: none; 72 | opacity: 1; 73 | } 74 | .osgjs-powered img { 75 | vertical-align: bottom; 76 | } 77 | .osgjs-powered strong { 78 | font-size: 18px; 79 | font-family: 'Exo 2', sans-serif; 80 | font-weight: 700; 81 | } 82 | 83 | /** 84 | * Light theme 85 | ******************************************************************************/ 86 | 87 | .osgjs-theme-light { 88 | 89 | color: #111; 90 | 91 | background: rgb(238,238,238); 92 | background: -moz-radial-gradient(center, ellipse cover, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); 93 | background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); 94 | background: -webkit-radial-gradient(center, ellipse cover, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); 95 | background: -o-radial-gradient(center, ellipse cover, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); 96 | background: -ms-radial-gradient(center, ellipse cover, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); 97 | background: radial-gradient(ellipse at center, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); 98 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=1 ); 99 | } 100 | .osgjs-theme-light .osgjs-description { 101 | color: #111; 102 | } 103 | .osgjs-theme-light .osgjs-description a { 104 | color: #009EBB; 105 | } 106 | 107 | /** 108 | * Dark theme 109 | ******************************************************************************/ 110 | 111 | .osgjs-theme-dark { 112 | 113 | color: #FFF; 114 | 115 | background: rgb(79,79,79); 116 | background: -moz-radial-gradient(center, ellipse cover, rgba(79,79,79,1) 0%, rgba(22,22,22,1) 100%); 117 | background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(79,79,79,1)), color-stop(100%,rgba(22,22,22,1))); 118 | background: -webkit-radial-gradient(center, ellipse cover, rgba(79,79,79,1) 0%,rgba(22,22,22,1) 100%); 119 | background: -o-radial-gradient(center, ellipse cover, rgba(79,79,79,1) 0%,rgba(22,22,22,1) 100%); 120 | background: -ms-radial-gradient(center, ellipse cover, rgba(79,79,79,1) 0%,rgba(22,22,22,1) 100%); 121 | background: radial-gradient(ellipse at center, rgba(79,79,79,1) 0%,rgba(22,22,22,1) 100%); 122 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f4f4f', endColorstr='#161616',GradientType=1 ); 123 | } 124 | .osgjs-theme-dark .osgjs-description { 125 | color: #FFF; 126 | } 127 | .osgjs-theme-dark .osgjs-description a { 128 | color: #80ebff; 129 | } 130 | -------------------------------------------------------------------------------- /examples/Pre3D/pre3d_path_utils.js: -------------------------------------------------------------------------------- 1 | // Pre3d, a JavaScript software 3d renderer. 2 | // (c) Dean McNamee , April 2009. 3 | // 4 | // Permission is hereby granted, free of charge, to any person obtaining a copy 5 | // of this software and associated documentation files (the "Software"), to 6 | // deal in the Software without restriction, including without limitation the 7 | // rights to use, copy, modify, merge, publish, distribute, sublicense, and/or 8 | // sell copies of the Software, and to permit persons to whom the Software is 9 | // furnished to do so, subject to the following conditions: 10 | // 11 | // The above copyright notice and this permission notice shall be included in 12 | // all copies or substantial portions of the Software. 13 | // 14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 19 | // FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS 20 | // IN THE SOFTWARE. 21 | // 22 | // This file implements helpers related to creating / modifying Paths. 23 | 24 | Pre3d.PathUtils = (function() { 25 | 26 | // Make a line (a straight cubic bezier curve) from |p0| to |p1|. 27 | function makeLine(p0, p1) { 28 | var path = new Pre3d.Path(); 29 | path.points = [ 30 | {x: p0.x, y: p0.y, z: p0.z}, 31 | {x: p1.x, y: p1.y, z: p1.z}]; 32 | path.curves = [new Pre3d.Curve(1, 1, 1)]; 33 | path.starting_point = 0; 34 | return path; 35 | } 36 | 37 | // Make a circle (consisting of two cublic splines) with points 38 | // (0, 0, 0) to (0, 1, 0); 39 | // http://www.whizkidtech.redprince.net/bezier/circle/ 40 | // http://www.tinaja.com/glib/ellipse4.pdf 41 | function makeCircle() { 42 | var kKappa = 0.66666666666; // Circle via 2 cubic splines. 43 | 44 | var path = new Pre3d.Path(); 45 | path.points = [ 46 | {x: 0, y: kKappa, z: 0}, 47 | {x: 1, y: kKappa, z: 0}, 48 | {x: 1, y: 0, z: 0}, 49 | {x: 1, y: -kKappa, z: 0}, 50 | {x: 0, y: -kKappa, z: 0}, 51 | {x: 0, y: 0, z: 0} 52 | ]; 53 | path.curves = [ 54 | new Pre3d.Curve(2, 0, 1), 55 | new Pre3d.Curve(5, 3, 4) 56 | ]; 57 | return path; 58 | } 59 | 60 | // Make a spiral, with |count| rings. Each ring moves -0.1 along the z-axis. 61 | function makeSpiral(count) { 62 | var kKappa = 0.66666666666; // Circle via 2 cubic splines. 63 | 64 | var points = [ ]; 65 | var curves = [ ]; 66 | 67 | var z = 0; 68 | var p = 0; 69 | for (var i = 0; i < count; ++i) { 70 | points.push({x: 0, y: kKappa, z: z}); 71 | z -= 0.05; 72 | points.push({x: 1, y: kKappa, z: z}); 73 | points.push({x: 1, y: 0, z: z}); 74 | points.push({x: 1, y: -kKappa, z: z}); 75 | z -= 0.05; 76 | points.push({x: 0, y: -kKappa, z: z}); 77 | points.push({x: 0, y: 0, z: z}); 78 | curves.push(new Pre3d.Curve(p + 2, p + 0, p + 1)); 79 | curves.push(new Pre3d.Curve(p + 5, p + 3, p + 4)); 80 | p += 6; 81 | } 82 | 83 | var path = new Pre3d.Path(); 84 | path.points = points; 85 | path.curves = curves; 86 | return path; 87 | } 88 | 89 | // Fits a quadratic bezier curve evenly through 3 points. Returns a control 90 | // point that forms a quadratic bezier (with end points p0 and p2) that 91 | // crosses through p1 at t=0.5. The time value 0.5 is hardcoded / implicit to 92 | // simplify the calculation. 93 | function fitQuadraticToPoints(p0, p1, p2) { 94 | return { 95 | x: p1.x + p1.x - 0.5 * (p0.x + p2.x), 96 | y: p1.y + p1.y - 0.5 * (p0.y + p2.y), 97 | z: p1.z + p1.z - 0.5 * (p0.z + p2.z)}; 98 | } 99 | 100 | return { 101 | makeLine: makeLine, 102 | makeCircle: makeCircle, 103 | makeSpiral: makeSpiral, 104 | fitQuadraticToPoints: fitQuadraticToPoints 105 | }; 106 | })(); 107 | -------------------------------------------------------------------------------- /examples/Three/flipbook3/FlipBook3DApplication.js: -------------------------------------------------------------------------------- 1 | !function(window){ 2 | /** 3 | * Provides requestAnimationFrame in a cross browser way. 4 | * http://paulirish.com/2011/requestanimationframe-for-smart-animating/ 5 | */ 6 | 7 | if (!window.requestAnimationFrame) { 8 | 9 | window.requestAnimationFrame = (function() { 10 | 11 | return window.webkitRequestAnimationFrame || 12 | window.mozRequestAnimationFrame || 13 | window.oRequestAnimationFrame || 14 | window.msRequestAnimationFrame || 15 | function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) { 16 | window.setTimeout(callback, 1000 / 60); 17 | }; 18 | 19 | })(); 20 | 21 | } 22 | 23 | var multx = 0.5 * Math.PI, 24 | multy = -Math.PI, 25 | Sin = Math.sin, 26 | Cos = Math.cos, 27 | 28 | container, camera, scene, renderer, projector, 29 | targetRotationY = 0, targetRotationOnMouseDownY = 0, targetRotationX = 0, targetRotationOnMouseDownX = 0, 30 | rad=700, mouse={x:0, y:0}, mouseX = 0, mouseXOnMouseDown = 0, mouseY = 0, mouseYOnMouseDown = 0, 31 | mstack, bend, 32 | windowHalfX = window.innerWidth / 2, windowHalfY = window.innerHeight / 2, 33 | w,h,w2,h2, 34 | book, pagew = 300, pageh = pagew * 10 / 7, 35 | fl,fr 36 | ; 37 | 38 | function onDocumentMouseDown(event) 39 | { 40 | event.preventDefault(); 41 | mouseX = (event.clientX / w) * 2 - 1; 42 | targetRotationY = mouseX; 43 | mouseY = (event.clientY / h) * 2 - 1; 44 | targetRotationX = mouseY; 45 | 46 | container.addEventListener('mousemove', onDocumentMouseMove, false); 47 | container.addEventListener('mouseup', onDocumentMouseUp, false); 48 | container.addEventListener('mouseout', onDocumentMouseOut, false); 49 | } 50 | 51 | function onDocumentMouseMove(event) 52 | { 53 | /*mouseX = event.clientX - w2; 54 | mouseY = event.clientY - h2; 55 | 56 | targetRotationY = targetRotationOnMouseDownY + ( mouseX - mouseXOnMouseDown ) * 0.02; 57 | targetRotationX = targetRotationOnMouseDownX + ( mouseY - mouseYOnMouseDown ) * 0.02;*/ 58 | //var target= 59 | //mouse_path.push(e.seenas.ray); 60 | 61 | mouseX = (event.clientX / w) * 2 - 1; 62 | targetRotationY = mouseX; 63 | mouseY = (event.clientY / h) * 2 - 1; 64 | targetRotationX = mouseY; 65 | } 66 | 67 | function onDocumentMouseUp(event) 68 | { 69 | container.removeEventListener('mousemove', onDocumentMouseMove, false); 70 | container.removeEventListener('mouseup', onDocumentMouseUp, false); 71 | container.removeEventListener('mouseout', onDocumentMouseOut, false); 72 | } 73 | 74 | function onDocumentMouseOut(event) 75 | { 76 | container.removeEventListener('mousemove', onDocumentMouseMove, false); 77 | container.removeEventListener('mouseup', onDocumentMouseUp, false); 78 | container.removeEventListener('mouseout', onDocumentMouseOut, false); 79 | } 80 | 81 | function animate() 82 | { 83 | // use spherical coordinatess 84 | // for mouse control viewing 85 | camera.position.x = rad * Sin(targetRotationY * multy) * Cos(targetRotationX * multx); 86 | camera.position.y = rad * Sin(targetRotationX * multx); 87 | camera.position.z = rad * Cos(targetRotationY * multy) * Cos(targetRotationX * multx); 88 | camera.lookAt(scene.position); 89 | 90 | // render 91 | TWEEN.update(); 92 | renderer.render(scene, camera); 93 | 94 | // setup next animation 95 | requestAnimationFrame(animate); 96 | } 97 | 98 | var self = { 99 | init: function(images) { 100 | // setup the scene 101 | container = document.getElementById('container'); 102 | w = window.innerWidth; 103 | h = window.innerHeight; 104 | w2 = w / 2; h2 = h / 2; 105 | container.style.width = String(w) + "px"; 106 | container.style.height = String(h) + "px"; 107 | container.style.marginTop = String(0.5 * (window.innerHeight - h)) + 'px'; 108 | 109 | scene = new THREE.Scene(); 110 | projector = new THREE.Projector(); 111 | camera = new THREE.PerspectiveCamera(50, w / h, 1, 1000); 112 | camera.position.z = rad; 113 | scene.add(camera); 114 | 115 | // webgl renderer gives better rendering without problems 116 | renderer = new THREE.WebGLRenderer(); 117 | renderer.setSize(w, h); 118 | 119 | container.appendChild(renderer.domElement); 120 | container.addEventListener('mousedown', onDocumentMouseDown, false); 121 | 122 | // create book 123 | book = new FlipBook3D.Book(); 124 | book.pageWidth = pagew; 125 | book.pageHeight = pageh; 126 | scene.add(book); 127 | 128 | // create pages 129 | for (var i=0; i1?1:b;i=n(b);for(h in c)a[h]=e[h]+c[h]*i;l!==null&&l.call(a,i);if(b==1){m!==null&&m.call(a);k!==null&&k.start();return false}return true}};TWEEN.Easing={Linear:{},Quadratic:{},Cubic:{},Quartic:{},Quintic:{},Sinusoidal:{},Exponential:{},Circular:{},Elastic:{},Back:{},Bounce:{}};TWEEN.Easing.Linear.EaseNone=function(a){return a}; 5 | TWEEN.Easing.Quadratic.EaseIn=function(a){return a*a};TWEEN.Easing.Quadratic.EaseOut=function(a){return-a*(a-2)};TWEEN.Easing.Quadratic.EaseInOut=function(a){if((a*=2)<1)return 0.5*a*a;return-0.5*(--a*(a-2)-1)};TWEEN.Easing.Cubic.EaseIn=function(a){return a*a*a};TWEEN.Easing.Cubic.EaseOut=function(a){return--a*a*a+1};TWEEN.Easing.Cubic.EaseInOut=function(a){if((a*=2)<1)return 0.5*a*a*a;return 0.5*((a-=2)*a*a+2)};TWEEN.Easing.Quartic.EaseIn=function(a){return a*a*a*a}; 6 | TWEEN.Easing.Quartic.EaseOut=function(a){return-(--a*a*a*a-1)};TWEEN.Easing.Quartic.EaseInOut=function(a){if((a*=2)<1)return 0.5*a*a*a*a;return-0.5*((a-=2)*a*a*a-2)};TWEEN.Easing.Quintic.EaseIn=function(a){return a*a*a*a*a};TWEEN.Easing.Quintic.EaseOut=function(a){return(a-=1)*a*a*a*a+1};TWEEN.Easing.Quintic.EaseInOut=function(a){if((a*=2)<1)return 0.5*a*a*a*a*a;return 0.5*((a-=2)*a*a*a*a+2)};TWEEN.Easing.Sinusoidal.EaseIn=function(a){return-Math.cos(a*Math.PI/2)+1}; 7 | TWEEN.Easing.Sinusoidal.EaseOut=function(a){return Math.sin(a*Math.PI/2)};TWEEN.Easing.Sinusoidal.EaseInOut=function(a){return-0.5*(Math.cos(Math.PI*a)-1)};TWEEN.Easing.Exponential.EaseIn=function(a){return a==0?0:Math.pow(2,10*(a-1))};TWEEN.Easing.Exponential.EaseOut=function(a){return a==1?1:-Math.pow(2,-10*a)+1};TWEEN.Easing.Exponential.EaseInOut=function(a){if(a==0)return 0;if(a==1)return 1;if((a*=2)<1)return 0.5*Math.pow(2,10*(a-1));return 0.5*(-Math.pow(2,-10*(a-1))+2)}; 8 | TWEEN.Easing.Circular.EaseIn=function(a){return-(Math.sqrt(1-a*a)-1)};TWEEN.Easing.Circular.EaseOut=function(a){return Math.sqrt(1- --a*a)};TWEEN.Easing.Circular.EaseInOut=function(a){if((a/=0.5)<1)return-0.5*(Math.sqrt(1-a*a)-1);return 0.5*(Math.sqrt(1-(a-=2)*a)+1)};TWEEN.Easing.Elastic.EaseIn=function(a){var e,c=0.1,d=0.4;if(a==0)return 0;if(a==1)return 1;d||(d=0.3);if(!c||c<1){c=1;e=d/4}else e=d/(2*Math.PI)*Math.asin(1/c);return-(c*Math.pow(2,10*(a-=1))*Math.sin((a-e)*2*Math.PI/d))}; 9 | TWEEN.Easing.Elastic.EaseOut=function(a){var e,c=0.1,d=0.4;if(a==0)return 0;if(a==1)return 1;d||(d=0.3);if(!c||c<1){c=1;e=d/4}else e=d/(2*Math.PI)*Math.asin(1/c);return c*Math.pow(2,-10*a)*Math.sin((a-e)*2*Math.PI/d)+1}; 10 | TWEEN.Easing.Elastic.EaseInOut=function(a){var e,c=0.1,d=0.4;if(a==0)return 0;if(a==1)return 1;d||(d=0.3);if(!c||c<1){c=1;e=d/4}else e=d/(2*Math.PI)*Math.asin(1/c);if((a*=2)<1)return-0.5*c*Math.pow(2,10*(a-=1))*Math.sin((a-e)*2*Math.PI/d);return c*Math.pow(2,-10*(a-=1))*Math.sin((a-e)*2*Math.PI/d)*0.5+1};TWEEN.Easing.Back.EaseIn=function(a){return a*a*(2.70158*a-1.70158)};TWEEN.Easing.Back.EaseOut=function(a){return(a-=1)*a*(2.70158*a+1.70158)+1}; 11 | TWEEN.Easing.Back.EaseInOut=function(a){if((a*=2)<1)return 0.5*a*a*(3.5949095*a-2.5949095);return 0.5*((a-=2)*a*(3.5949095*a+2.5949095)+2)};TWEEN.Easing.Bounce.EaseIn=function(a){return 1-TWEEN.Easing.Bounce.EaseOut(1-a)};TWEEN.Easing.Bounce.EaseOut=function(a){return(a/=1)<1/2.75?7.5625*a*a:a<2/2.75?7.5625*(a-=1.5/2.75)*a+0.75:a<2.5/2.75?7.5625*(a-=2.25/2.75)*a+0.9375:7.5625*(a-=2.625/2.75)*a+0.984375}; 12 | TWEEN.Easing.Bounce.EaseInOut=function(a){if(a<0.5)return TWEEN.Easing.Bounce.EaseIn(a*2)*0.5;return TWEEN.Easing.Bounce.EaseOut(a*2-1)*0.5+0.5}; 13 | -------------------------------------------------------------------------------- /flipbook2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/foo123/MOD3/a735e511fb88a484c21143679eb8cb4d4fc51c1d/flipbook2.png -------------------------------------------------------------------------------- /src/MOD3.js: -------------------------------------------------------------------------------- 1 | var MOD3 = { 2 | VERSION: "@@VERSION@@", 3 | Class: makeClass 4 | }; 5 | -------------------------------------------------------------------------------- /src/core/ModifierStack.js: -------------------------------------------------------------------------------- 1 | /** 2 | * MOD3 Modifier & ModifierStack Classes 3 | **/ 4 | var _modCount = 0; 5 | 6 | MOD3.Modifier = MOD3.Class({ 7 | constructor: function Modifier() { 8 | var self = this; 9 | self.id = ++_modCount; 10 | self.name = 'Modifier'; 11 | self.axes = MOD3.ModConstant.NONE; 12 | self.constraint = MOD3.ModConstant.NONE; 13 | self.enabled = true; 14 | }, 15 | 16 | id: null, 17 | name: 'Modifier', 18 | axes: null, 19 | constraint: null, 20 | enabled: true, 21 | 22 | dispose: function() { 23 | var self = this; 24 | self.name = null; 25 | self.axes = null; 26 | self.constraint = null; 27 | return self; 28 | }, 29 | 30 | enable: function(enabled) { 31 | if (arguments.length) 32 | { 33 | this.enabled = !!enabled; 34 | return this; 35 | } 36 | return this.enabled; 37 | }, 38 | 39 | constraintAxes: function(axes) { 40 | this.axes = axes || MOD3.ModConstant.NONE; 41 | return this; 42 | }, 43 | 44 | setConstraint: function(c) { 45 | this.constraint = c || MOD3.ModConstant.NONE; 46 | return this; 47 | }, 48 | 49 | // override 50 | apply: function(modifiable) { 51 | return this; 52 | }, 53 | 54 | toString: function() { 55 | return '[Modifier '+this.name+']'; 56 | } 57 | }); 58 | 59 | MOD3.ModifierStack = MOD3.Class({ 60 | constructor: function ModifierStack(lib3d, mesh) { 61 | var self = this; 62 | if (!(self instanceof ModifierStack)) return new ModifierStack(lib3d, mesh); 63 | self.stack = []; 64 | self.setModifiable(MOD3.Factory.getMeshProxy(lib3d), mesh); 65 | }, 66 | 67 | name: "ModifierStack", 68 | modifiable: null, 69 | stack: null, 70 | 71 | dispose: function(withModifiers) { 72 | var self = this; 73 | if (withModifiers && self.stack) while (self.stack.length) self.stack.pop().dispose(); 74 | if (self.modifiable) self.modifiable.dispose(); 75 | self.stack = null; 76 | self.modifiable = null; 77 | return self; 78 | }, 79 | 80 | getModifiable: function() { 81 | return this.modifiable; 82 | }, 83 | 84 | setModifiable: function(modifiable, mesh) { 85 | var self = this; 86 | self.modifiable = modifiable; 87 | if (mesh) self.modifiable.setMesh(mesh); 88 | return self; 89 | }, 90 | 91 | add: function(modifier) { 92 | var self = this; 93 | if (modifier) self.stack.push(modifier); 94 | return self; 95 | }, 96 | 97 | apply: function() { 98 | var self = this, modifiable = self.modifiable, stack = self.stack; 99 | if (modifiable && stack && stack.length) 100 | modifiable 101 | .preApply() 102 | .resetGeometry() 103 | .applyModifiers(stack) 104 | .postApply() 105 | .update() 106 | ; 107 | return self; 108 | }, 109 | 110 | collapse: function() { 111 | var self = this, modifiable = self.modifiable, stack = self.stack; 112 | if (modifiable && stack && stack.length) 113 | { 114 | modifiable 115 | .preApply() 116 | .resetGeometry() 117 | .applyModifiers(stack) 118 | .collapseGeometry() 119 | .postApply() 120 | .update() 121 | ; 122 | stack.length = 0; 123 | } 124 | return self; 125 | }, 126 | 127 | clear: function() { 128 | var self = this; 129 | if (self.stack) self.stack.length = 0; 130 | return self; 131 | } 132 | }); 133 | // aliases 134 | MOD3.ModifierStack.prototype.getMeshInfo = MOD3.ModifierStack.prototype.getModifiable; 135 | MOD3.ModifierStack.prototype.addModifier = MOD3.ModifierStack.prototype.add; 136 | -------------------------------------------------------------------------------- /src/footer.js: -------------------------------------------------------------------------------- 1 | // export it 2 | return MOD3; 3 | }); 4 | -------------------------------------------------------------------------------- /src/header.js: -------------------------------------------------------------------------------- 1 | /** 2 | * MOD3 3D Modifier Library for JavaScript 3 | * port of AS3DMod ActionScript3 library (http://code.google.com/p/as3dmod/) 4 | * 5 | * @version @@VERSION@@ (@@DATE@@) 6 | * https://github.com/foo123/MOD3 7 | * 8 | **/ 9 | !function(root, name, factory) { 10 | "use strict"; 11 | if (('object' === typeof module) && module.exports) /* CommonJS */ 12 | (module.$deps = module.$deps||{}) && (module.exports = module.$deps[name] = factory.call(root)); 13 | else if (('function' === typeof define) && define.amd && ('function' === typeof require) && ('function' === typeof require.specified) && require.specified(name) /*&& !require.defined(name)*/) /* AMD */ 14 | define(name, ['module'], function(module) {factory.moduleUri = module.uri; return factory.call(root);}); 15 | else if (!(name in root)) /* Browser/WebWorker/.. */ 16 | (root[name] = factory.call(root)||1) && ('function' === typeof(define)) && define.amd && define(function() {return root[name];}); 17 | }( /* current root */ 'undefined' !== typeof self ? self : this, 18 | /* module name */ "MOD3", 19 | /* module factory */ function ModuleFactory__MOD3(undef) { 20 | "use strict"; 21 | 22 | var HAS = Object.prototype.hasOwnProperty, 23 | toString = Object.prototype.toString, 24 | def = Object.defineProperty, 25 | stdMath = Math, PI = stdMath.PI, 26 | TWO_PI = 2*PI, HALF_PI = PI/2, INV_PI = 1/PI, 27 | EMPTY_ARR = [], EMPTY_OBJ = {}, NOP = function() {}, 28 | isNode = ("undefined" !== typeof global) && ("[object global]" === toString.call(global)), 29 | isBrowser = ("undefined" !== typeof window) && ("[object Window]" === toString.call(window)) 30 | ; 31 | 32 | // basic backwards-compatible "class" construction 33 | function makeSuper(superklass) 34 | { 35 | var called = {}; 36 | return function $super(method, args) { 37 | var self = this, m = ':'+method, ret; 38 | if (1 === called[m]) return (superklass.prototype.$super || NOP).call(self, method, args); 39 | called[m] = 1; 40 | ret = ('constructor' === method ? superklass : (superklass.prototype[method] || NOP)).apply(self, args || []); 41 | called[m] = 0; 42 | return ret; 43 | }; 44 | } 45 | function makeClass(superklass, klass, statik) 46 | { 47 | if (arguments.length < 2) 48 | { 49 | klass = superklass; 50 | superklass = null; 51 | } 52 | var C = HAS.call(klass, 'constructor') ? klass.constructor : function() {}, p; 53 | if (superklass) 54 | { 55 | C.prototype = Object.create(superklass.prototype); 56 | C.prototype.$super = makeSuper(superklass); 57 | } 58 | else 59 | { 60 | C.prototype.$super = NOP; 61 | } 62 | C.prototype.constructor = C; 63 | for (p in klass) 64 | { 65 | if (HAS.call(klass, p) && ('constructor' !== p)) 66 | { 67 | C.prototype[p] = klass[p]; 68 | } 69 | } 70 | if (statik) 71 | { 72 | for (p in statik) 73 | { 74 | if (HAS.call(statik, p)) 75 | { 76 | C[p] = statik[p]; 77 | } 78 | } 79 | } 80 | return C; 81 | } 82 | -------------------------------------------------------------------------------- /src/math/List.js: -------------------------------------------------------------------------------- 1 | // fast list utilities 2 | MOD3.List = { 3 | operate: function operate(x, F, F0, i0, i1, reverse) { 4 | var len = x.length; 5 | if (arguments.length < 5) i1 = len-1; 6 | if (0 > i1) i1 += len; 7 | if (arguments.length < 4) i0 = 0; 8 | if (i0 > i1) return F0; 9 | if (true === reverse) 10 | { 11 | var i, k, l=i1-i0+1, l1=l-1, r=l&15, q=r&1, lr=l1-r, Fv=q?F(F0,x[i1],i1):F0; 12 | for (i=l1-q; i>lr; i-=2) { k = i0+i; Fv = F(F(Fv,x[k],k),x[k-1],k-1); } 13 | for (i=lr; i>=0; i-=16) { k = i0+i; Fv = F(F(F(F(F(F(F(F(F(F(F(F(F(F(F(F(Fv,x[k],k),x[k-1],k-1),x[k-2],k-2),x[k-3],k-3),x[k-4],k-4),x[k-5],k-5),x[k-6],k-6),x[k-7],k-7),x[k-8],k-8),x[k-9],k-9),x[k-10],k-10),x[k-11],k-11),x[k-12],k-12),x[k-13],k-13),x[k-14],k-14),x[k-15],k-15); } 14 | } 15 | else 16 | { 17 | var i, k, l=i1-i0+1, r=l&15, q=r&1, Fv=q?F(F0,x[i0],i0):F0; 18 | for (i=q; i i1) i1 += len; 29 | if (arguments.length < 3) i0 = 0; 30 | if (i0 > i1) return x; 31 | var i, k, l=i1-i0+1, l1, lr, r, q; 32 | if (true === reverse) 33 | { 34 | l1=l-1; r=l&15; q=r&1; lr=l1-r; 35 | if (q) F(x[i1]); 36 | for (i=l1-q; i>lr; i-=2) 37 | { 38 | k = i0+i; 39 | F(x[k ]); 40 | F(x[k-1]); 41 | } 42 | for (i=lr; i>=0; i-=16) 43 | { 44 | k = i0+i; 45 | F(x[k ] ); 46 | F(x[k-1] ); 47 | F(x[k-2] ); 48 | F(x[k-3] ); 49 | F(x[k-4] ); 50 | F(x[k-5] ); 51 | F(x[k-6] ); 52 | F(x[k-7] ); 53 | F(x[k-8] ); 54 | F(x[k-9] ); 55 | F(x[k-10]); 56 | F(x[k-11]); 57 | F(x[k-12]); 58 | F(x[k-13]); 59 | F(x[k-14]); 60 | F(x[k-15]); 61 | } 62 | } 63 | else 64 | { 65 | r=l&15; q=r&1; 66 | if (q) F(x[i0]); 67 | for (i=q; i= this.start && n <= this.end); 34 | }, 35 | 36 | normalize: function(n) { 37 | return MOD3.XMath.normalize(this.start, this.end, n); 38 | }, 39 | 40 | toRange: function(n) { 41 | return MOD3.XMath.toRange(this.start, this.end, n); 42 | }, 43 | 44 | trim: function(n) { 45 | return MOD3.XMath.trim(this.start, this.end, n); 46 | }, 47 | 48 | interpolate: function(n, r) { 49 | return MOD3.XMath.toRange(this.start, this.end, r.normalize(n)); 50 | }, 51 | 52 | toString: function() { 53 | return "[" + this.start + " - " + this.end + "]"; 54 | } 55 | }); 56 | -------------------------------------------------------------------------------- /src/math/XMath.js: -------------------------------------------------------------------------------- 1 | /** 2 | * MOD3 Math Utilities Class 3 | **/ 4 | MOD3.XMath = { 5 | normalize: function(start, end, val) { 6 | var range = end - start; 7 | return 0 === range ? 1 : MOD3.XMath.trim(0, 1, (val - start)/end); 8 | }, 9 | 10 | toRange: function(start, end, normalized) { 11 | var range = end - start; 12 | return 0 === range ? 0 : (start + range*normalized); 13 | }, 14 | 15 | inRange: function(start, end, value, excluding) { 16 | return false !== excluding ? (value >= start && value <= end) : (value > start && value < end); 17 | }, 18 | 19 | sign: function(val, ifZero) { 20 | return 0 === val ? (ifZero || 0) : (val > 0 ? 1 : -1); 21 | }, 22 | 23 | trim: function(start, end, value) { 24 | return value < start ? start : (value > end ? end : value); 25 | }, 26 | 27 | wrap: function(start, end, value) { 28 | var r = end - start; 29 | return value < start ? (value + r) : (value >= end ? value - r : value); 30 | }, 31 | 32 | degToRad: function(deg) { 33 | return deg/180*PI; 34 | }, 35 | 36 | radToDeg: function(rad) { 37 | return rad/PI*180; 38 | }, 39 | 40 | presicion: function(number, precision) { 41 | var r = stdMath.pow(10, precision); 42 | return stdMath.round(number*r)/r; 43 | }, 44 | 45 | uceil: function(val) { 46 | return val < 0 ? stdMath.floor(val) : stdMath.ceil(val); 47 | } 48 | }; 49 | // alias 50 | MOD3.XMath.clamp = MOD3.XMath.trim; 51 | -------------------------------------------------------------------------------- /src/modifiers/Bend.js: -------------------------------------------------------------------------------- 1 | !function(MOD3) { 2 | "use strict"; 3 | /** 4 | * MOD3 Bend Modifier 5 | **/ 6 | 7 | /**[DOC_MD] 8 | * ### Bend modifier 9 | * 10 | * Bends an object along an axis. 11 | * 12 | * @author Bartek Drozdz 13 | * 14 | [/DOC_MD]**/ 15 | var stdMath = Math, PI = stdMath.PI, 16 | TWO_PI = 2*PI, HALF_PI = PI/2; 17 | 18 | MOD3.Bend = MOD3.Class(MOD3.Modifier, { 19 | constructor: function Bend(force, offset, angle) { 20 | var self = this; 21 | if (!(self instanceof Bend)) return new Bend(force, offset, angle); 22 | self.$super('constructor'); 23 | self.name = 'Bend'; 24 | self.constraint = MOD3.ModConstant.NONE; 25 | self.switchAxes = false; 26 | self.force = force || 0; 27 | self.offset = offset || 0; 28 | self.angle = angle || 0; 29 | }, 30 | 31 | force: 0, 32 | offset: 0, 33 | angle: 0, 34 | switchAxes: false, 35 | 36 | dispose: function() { 37 | var self = this; 38 | self.force = null; 39 | self.offset = null; 40 | self.angle = null; 41 | self.switchAxes = null; 42 | self.$super('dispose'); 43 | return self; 44 | }, 45 | 46 | apply: function(modifiable) { 47 | var self = this; 48 | 49 | if (0 === self.force) return self; 50 | 51 | var constraint = self.constraint, switchAxes = self.switchAxes, 52 | force = self.force, offset = stdMath.min(1, stdMath.max(0, self.offset)), a = self.angle, 53 | max = switchAxes ? modifiable.midAxis : modifiable.maxAxis, 54 | min = modifiable.minAxis, 55 | mid = switchAxes ? modifiable.maxAxis : modifiable.midAxis, 56 | width = modifiable.getSize(max), 57 | height = modifiable.getSize(mid), 58 | origin = modifiable.getMin(max), 59 | //diagAngle = stdMath.atan2(height, width), 60 | m1 = new MOD3.Matrix().rotate(a), 61 | m2 = new MOD3.Matrix().rotate(-a), 62 | distance = origin + width * offset, 63 | radius = width / PI / force, 64 | bendAngle = TWO_PI * (width / (radius * TWO_PI)) 65 | ; 66 | 67 | MOD3.List.each(modifiable.vertices, function(v) { 68 | var xyz = v.getXYZ(), 69 | vmax = xyz[MOD3.XYZi[max]], 70 | vmid = xyz[MOD3.XYZi[mid]], 71 | vmin = xyz[MOD3.XYZi[min]], 72 | np = MOD3.Matrix.transform(m1, [vmax, vmid]), 73 | p, fa, op, ow, np2 74 | ; 75 | vmax = np[0]; vmid = np[1]; 76 | 77 | p = (vmax - origin) / width; 78 | 79 | if ( 80 | ((MOD3.ModConstant.LEFT === constraint) && (p <= offset)) || 81 | ((MOD3.ModConstant.RIGHT === constraint) && (p >= offset)) 82 | ) 83 | { 84 | /* do nothing */ 85 | } 86 | else 87 | { 88 | fa = (HALF_PI - bendAngle * offset) + (bendAngle * p); 89 | op = stdMath.sin(fa) * (radius + vmin); 90 | ow = stdMath.cos(fa) * (radius + vmin); 91 | vmin = op - radius; 92 | vmax = distance - ow; 93 | } 94 | 95 | np2 = MOD3.Matrix.transform(m2, [vmax, vmid]); 96 | vmax = np2[0]; vmid = np2[1]; 97 | xyz[MOD3.XYZi[max]] = vmax; 98 | xyz[MOD3.XYZi[mid]] = vmid; 99 | xyz[MOD3.XYZi[min]] = vmin; 100 | v.setXYZ(xyz); 101 | }); 102 | return self; 103 | } 104 | }); 105 | }(MOD3); -------------------------------------------------------------------------------- /src/modifiers/Bloat.js: -------------------------------------------------------------------------------- 1 | !function(MOD3) { 2 | "use strict"; 3 | /** 4 | * MOD3 Bloat Modifier 5 | **/ 6 | 7 | /**[DOC_MD] 8 | * ### Bloat modifier 9 | * 10 | * Bloats a mesh by forcing vertices out of specified sphere 11 | * 12 | * @author makc 13 | * 14 | [/DOC_MD]**/ 15 | var stdMath = Math; 16 | 17 | MOD3.Bloat = MOD3.Class(MOD3.Modifier, { 18 | constructor: function Bloat(radius, a, center) { 19 | var self = this; 20 | if (!(self instanceof Bloat)) return new Bloat(radius, a, center); 21 | self.$super('constructor'); 22 | self.name = 'Bloat'; 23 | self.radius = radius || 0; 24 | self.a = null == a ? 0.01 : a; 25 | self.center = center || MOD3.Vector3.ZERO(); 26 | //self.u = MOD3.Vector3.ZERO(); 27 | }, 28 | 29 | radius: 0, 30 | a: 0.01, 31 | center: null, 32 | //u: null, 33 | 34 | dispose: function() { 35 | var self = this; 36 | self.center.dispose(); 37 | self.center = null; 38 | self.radius = null; 39 | self.a = null; 40 | self.$super('dispose'); 41 | return self; 42 | }, 43 | 44 | apply: function(modifiable) { 45 | var self = this, center = self.center.xyz, 46 | radius = stdMath.max(0, self.radius), a = stdMath.max(0, self.a); 47 | 48 | MOD3.List.each(modifiable.vertices, function(v) { 49 | // get a vector towards vertex 50 | // change norm to norm + r * exp (-a * norm) 51 | var uu = MOD3.Vector3.sub(v.getXYZ(), center), magn = MOD3.Vector3.mod(uu); 52 | MOD3.Vector3.muls(MOD3.Vector3.norm(uu), magn + radius * stdMath.exp(- magn * a)); 53 | // move vertex accordingly 54 | v.setXYZ(MOD3.Vector3.add(uu, center)); 55 | // ?? needed?? 56 | //self.u=uu; 57 | }); 58 | return self; 59 | } 60 | }); 61 | }(MOD3); -------------------------------------------------------------------------------- /src/modifiers/Break.js: -------------------------------------------------------------------------------- 1 | !function(MOD3) { 2 | "use strict"; 3 | /** 4 | * MOD3 Break Modifier 5 | **/ 6 | 7 | /**[DOC_MD] 8 | * ### Break modifier 9 | * 10 | * Allow to break a mesh 11 | * 12 | * @author Bartek Drozdz 13 | * 14 | [/DOC_MD]**/ 15 | var stdMath = Math; 16 | 17 | MOD3.Break = MOD3.Class(MOD3.Modifier, { 18 | constructor: function Break(offset, angle, vector) { 19 | var self = this; 20 | if (!(self instanceof Break)) return new Break(offset, angle, vector); 21 | self.$super('constructor'); 22 | self.name = 'Break'; 23 | self.offset = offset || 0; 24 | self.angle = angle || 0; 25 | self.vector = vector || MOD3.Vector3.Y(); 26 | self.range = new MOD3.Range(0, 1); 27 | }, 28 | 29 | offset: 0, 30 | angle: 0, 31 | vector: null, 32 | range: null, 33 | 34 | dispose: function() { 35 | var self = this; 36 | self.vector.dispose(); 37 | self.range.dispose(); 38 | self.vector = null; 39 | self.range = null; 40 | self.offset = null; 41 | self.angle = null; 42 | self.$super('dispose'); 43 | return self; 44 | }, 45 | 46 | apply: function(modifiable) { 47 | var self = this, 48 | offset = stdMath.min(1, stdMath.max(0, self.offset)), range = self.range, angle = self.angle, 49 | bv = self.vector.normalizeSelf().xyz, pv, rm; 50 | 51 | pv = modifiable.minZ + modifiable.depth*offset; 52 | rm = new MOD3.Matrix4().rotate(bv[0], bv[1], bv[2], angle); 53 | 54 | MOD3.List.each(modifiable.vertices, function(v) { 55 | var c = v.getXYZ(); 56 | c[2] -= pv; 57 | if ((0 <= c[2]) && range.isIn(v.ratio[1])) MOD3.Matrix4.multXYZ(rm, c); 58 | c[2] += pv; 59 | v.setXYZ(c); 60 | }); 61 | return self; 62 | } 63 | }); 64 | }(MOD3); -------------------------------------------------------------------------------- /src/modifiers/DisplaceMap.js: -------------------------------------------------------------------------------- 1 | !function(MOD3) { 2 | "use strict"; 3 | /** 4 | * MOD3 DisplaceMap (BitmapDisplacement) Modifier 5 | **/ 6 | 7 | /**[DOC_MD] 8 | * ### DisplaceMap (BitmapDisplacement) Modifier 9 | * 10 | * Displaces vertices based on RGB values of bitmapData pixels. 11 | * 12 | * BitmapDisplacement is inspired by both the AS3 built-in DisplacementMapFilter. It allows 13 | * to use color values for each channels of a bitmap to modify the position of vertices in a mesh. 14 | * 15 | * The displacement takes place along the cardinal axes, and each axis is mapped to a 16 | * channel in the bitmap: X for Red, Y for Green and Z for Blue. 17 | * 18 | * @author Bartek Drozdz 19 | * 20 | [/DOC_MD]**/ 21 | MOD3.DisplaceMap = MOD3.Class(MOD3.Modifier, { 22 | constructor: function DisplaceMap(bmp, force, offset) { 23 | var self = this; 24 | if (!(self instanceof DisplaceMap)) return new DisplaceMap(bmp, force, offset); 25 | self.$super('constructor'); 26 | self.name = 'DisplaceMap'; 27 | if (+bmp === bmp) // number 28 | { 29 | self.force = bmp || 1; 30 | self.offset = null == force ? 127 : force;// 0x7F; 31 | } 32 | else 33 | { 34 | self.setBitmap(bmp); 35 | self.force = force || 1; 36 | self.offset = null == offset ? 127 : offset;// 0x7F; 37 | } 38 | self.axes = MOD3.ModConstant.X | MOD3.ModConstant.Y | MOD3.ModConstant.Z; 39 | }, 40 | 41 | width: null, 42 | height: null, 43 | bmpData: null, 44 | force: 1, 45 | offset: 127, 46 | 47 | dispose: function() { 48 | var self = this; 49 | self.bmpData = null; 50 | self.width = null; 51 | self.height = null; 52 | self.force = null; 53 | self.offset = null; 54 | self.$super('dispose'); 55 | return self; 56 | }, 57 | 58 | setBitmap: function(bmpData) { 59 | var self = this; 60 | self.bmpData = bmpData ? bmpData.data : null; 61 | self.width = bmpData ? bmpData.width : 0; 62 | self.height = bmpData ? bmpData.height : 0; 63 | return self; 64 | }, 65 | 66 | apply: function(modifiable) { 67 | var self = this, 68 | axes = self.axes, 69 | w = self.width, h = self.height, bmp = self.bmpData, 70 | force = self.force, offset = self.offset; 71 | 72 | if (!axes || !bmp) return self; 73 | 74 | MOD3.List.each(modifiable.vertices, function(v) { 75 | var uv, uu, vv, xyz = v.getXYZ(); 76 | 77 | uu = ~~((w - 1) * v.ratio[0]/* X */); 78 | vv = ~~((h - 1) * v.ratio[2]/* Z */); 79 | uv = (vv * w + uu) << 2; 80 | 81 | v.setXYZ([ 82 | xyz[0] + (axes & MOD3.ModConstant.X ? ((bmp[uv] & 0xff) - offset) * force : 0), 83 | xyz[1] + (axes & MOD3.ModConstant.Y ? ((bmp[uv+1] & 0xff) - offset) * force : 0), 84 | xyz[2] + (axes & MOD3.ModConstant.Z ? ((bmp[uv+2] & 0xff) - offset) * force : 0) 85 | ]); 86 | }); 87 | return self; 88 | } 89 | }); 90 | }(MOD3); -------------------------------------------------------------------------------- /src/modifiers/Noise.js: -------------------------------------------------------------------------------- 1 | !function(MOD3) { 2 | "use strict"; 3 | /** 4 | * MOD3 Noise Modifier 5 | **/ 6 | 7 | /**[DOC_MD] 8 | * ### Noise modifier 9 | * 10 | * Randomly displaces each vertex in all 3 axes 11 | * 12 | * 13 | [/DOC_MD]**/ 14 | var stdMath = Math; 15 | 16 | MOD3.Noise = MOD3.Class(MOD3.Modifier, { 17 | constructor: function Noise(force) { 18 | var self = this; 19 | if (!(self instanceof Noise)) return new Noise(force); 20 | self.$super('constructor'); 21 | self.name = 'Noise'; 22 | self.force = force || 0; 23 | self.start = 0; 24 | self.end = 1; 25 | self.axes = MOD3.ModConstant.X | MOD3.ModConstant.Y | MOD3.ModConstant.Z; 26 | }, 27 | 28 | force: 0, 29 | start: 0, 30 | end: 1, 31 | 32 | dispose: function() { 33 | var self = this; 34 | self.force = null; 35 | self.start = null; 36 | self.end = null; 37 | self.$super('dispose'); 38 | return self; 39 | }, 40 | 41 | setFalloff: function(start, end) { 42 | var self = this; 43 | self.start = start != null ? start : 0; 44 | self.end = end != null ? end : 1; 45 | return self; 46 | }, 47 | 48 | apply: function(modifiable) { 49 | var self = this, 50 | axes = self.axes, start = self.start, end = self.end, 51 | force = self.force, halfforce = 0.5*force, 52 | maxAxis = modifiable.maxAxis; 53 | 54 | if ((0 == axes) || (0 == force)) return self; 55 | 56 | MOD3.List.each(modifiable.vertices, function(v) { 57 | var r = stdMath.random() * force - halfforce, 58 | p = v.getRatio(maxAxis), rp, xyz; 59 | if (start < end) 60 | { 61 | if (p < start) p = 0; 62 | else if (p > end) p = 1; 63 | } 64 | else if (start > end) 65 | { 66 | p = 1 - p; 67 | if (p > start) p = 0; 68 | else if (p < end) p = 1; 69 | } 70 | else 71 | { 72 | p = 1; 73 | } 74 | 75 | rp = r * p; 76 | xyz = v.getXYZ(); 77 | v.setXYZ([ 78 | xyz[0] + (axes & MOD3.ModConstant.X ? rp : 0), 79 | xyz[1] + (axes & MOD3.ModConstant.Y ? rp : 0), 80 | xyz[2] + (axes & MOD3.ModConstant.Z ? rp : 0) 81 | ]); 82 | }); 83 | return self; 84 | } 85 | }); 86 | }(MOD3); -------------------------------------------------------------------------------- /src/modifiers/Perlin.js: -------------------------------------------------------------------------------- 1 | !function(MOD3) { 2 | "use strict"; 3 | /** 4 | * MOD3 Perlin/Simplex Noise Modifier 5 | **/ 6 | 7 | /**[DOC_MD] 8 | * ### Perlin modifier 9 | * 10 | * Displaces vertices based on a perlin/simplex noise source. 11 | * 12 | * Accepts a perlin/simplex noise data (with width and height information) and displaces vertices 13 | * based on the value of each point of the noise map. 14 | * 15 | * @author Bartek Drozdz 16 | * 17 | * @uses: https://github.com/josephg/noisejs for JavaScript 18 | * 19 | [/DOC_MD]**/ 20 | function cyclic_shift(a, w, h, dX, dY) 21 | { 22 | var size = w*h, b = new MOD3.VecArray(size), i, j, i2, j2, index; 23 | if (dX < 0) dX += w; 24 | if (dY < 0) dY += h; 25 | dX = ~~dX; dY = ~~dY; 26 | for (i=0,j=0,index=0; index= w) {i = 0; ++j;} 29 | i2 = (i + dX) % w; j2 = (j + dY) % h; 30 | b[index] = a[i2 + j2 * w]; 31 | } 32 | return b; 33 | } 34 | /*function generate2d(perlinNoise2d, w, h) 35 | { 36 | var size = w*h, a = new MOD3.VecArray(size), i, j, index; 37 | for (i=0,j=0,index=0; index= w) {i = 0; ++j;} 40 | a[index] = perlinNoise2d(i/w, j/h); 41 | } 42 | return a; 43 | }*/ 44 | MOD3.Perlin = MOD3.Class(MOD3.Modifier, { 45 | constructor: function Perlin(force, noise, autoRun) { 46 | var self = this; 47 | if (!(self instanceof Perlin)) return new Perlin(force, noise, autoRun); 48 | self.$super('constructor'); 49 | self.name = 'Perlin'; 50 | self.force = null != force ? force : 1; 51 | self.perlin = noise; 52 | self.autoRun = null != autoRun ? !!autoRun : true; 53 | self.axes = MOD3.ModConstant.X | MOD3.ModConstant.Y | MOD3.ModConstant.Z; 54 | }, 55 | 56 | speedX: 1, 57 | speedY: 1, 58 | perlin: null, 59 | force: 1, 60 | offset: 0, 61 | autoRun: true, 62 | 63 | dispose: function() { 64 | var self = this; 65 | self.perlin = null; 66 | self.speedX = null; 67 | self.speedY = null; 68 | self.force = null; 69 | self.offset = null; 70 | self.autoRun = null; 71 | self.$super('dispose'); 72 | 73 | return self; 74 | }, 75 | 76 | setSpeed: function(dX, dY) { 77 | var self = this; 78 | self.speedX = dX; 79 | self.speedY = dY; 80 | return self; 81 | }, 82 | 83 | apply: function(modifiable) { 84 | var self = this, 85 | axes = self.axes, force = self.force, 86 | offset = self.offset, pn = self.perlin, 87 | w, h; 88 | 89 | if (!axes || !pn) return self; 90 | w = pn.width; h = pn.height; 91 | if (self.autoRun) 92 | { 93 | pn = self.perlin = cyclic_shift(pn, w, h, self.speedX, self.speedY); 94 | pn.width = w; pn.height = h; 95 | } 96 | 97 | MOD3.List.each(modifiable.vertices, function(v) { 98 | var xyz = v.getXYZ(), 99 | uu = ~~((w - 1) * v.ratio[0]/* u */), 100 | vv = ~~((h - 1) * v.ratio[2]/* v */), 101 | uv = uu + vv * w; 102 | 103 | v.setXYZ([ 104 | xyz[0] + (axes & MOD3.ModConstant.X ? (pn[uv] - offset) * force : 0), 105 | xyz[1] + (axes & MOD3.ModConstant.Y ? (pn[uv/*+1*/] - offset) * force : 0), 106 | xyz[2] + (axes & MOD3.ModConstant.Z ? (pn[uv/*+2*/] - offset) * force : 0) 107 | ]); 108 | }); 109 | return self; 110 | } 111 | }); 112 | }(MOD3); -------------------------------------------------------------------------------- /src/modifiers/Pivot.js: -------------------------------------------------------------------------------- 1 | !function(MOD3) { 2 | "use strict"; 3 | /** 4 | * MOD3 Pivot Modifier 5 | **/ 6 | 7 | /**[DOC_MD] 8 | * ### Pivot modifier 9 | * 10 | * Allows to move the pivot point of a 3D mesh. 11 | * 12 | * @author Bartek Drozdz 13 | * 14 | [/DOC_MD]**/ 15 | MOD3.Pivot = MOD3.Class(MOD3.Modifier, { 16 | constructor: function Pivot(x, y, z) { 17 | var self = this; 18 | if (!(self instanceof Pivot)) return new Pivot(x, y, z); 19 | self.$super('constructor'); 20 | self.name = 'Pivot'; 21 | self.vector = new MOD3.Vector3(x||0, y||0, z||0); 22 | }, 23 | 24 | vector: null, 25 | 26 | dispose: function() { 27 | var self = this; 28 | self.vector.dispose(); 29 | self.vector = null; 30 | self.$super('dispose'); 31 | return self; 32 | }, 33 | 34 | setMeshCenter: function(modifiable) { 35 | var self = this; 36 | self.vector = new MOD3.Vector3( 37 | -(modifiable.minX + 0.5*modifiable.width), 38 | -(modifiable.minY + 0.5*modifiable.height), 39 | -(modifiable.minZ + 0.5*modifiable.depth) 40 | ); 41 | return self; 42 | }, 43 | 44 | apply: function(modifiable) { 45 | var self = this, pivot = self.vector, pv = pivot.xyz; 46 | 47 | MOD3.List.each(modifiable.vertices, function(v) { 48 | v.setXYZ(MOD3.Vector3.add(v.getXYZ(), pv)); 49 | }); 50 | modifiable.updateMeshPosition(pivot.negate()); 51 | return self; 52 | } 53 | }); 54 | }(MOD3); -------------------------------------------------------------------------------- /src/modifiers/Skew.js: -------------------------------------------------------------------------------- 1 | !function(MOD3) { 2 | "use strict"; 3 | /** 4 | * MOD3 Skew Modifier 5 | **/ 6 | 7 | /**[DOC_MD] 8 | * ### Skew modifier 9 | * 10 | * Skew mesh along an axis 11 | * 12 | * @author Bartek Drozdz 13 | * 14 | [/DOC_MD]**/ 15 | var stdMath = Math; 16 | 17 | MOD3.Skew = MOD3.Class(MOD3.Modifier, { 18 | constructor: function Skew(force, offset, power, falloff) { 19 | var self = this; 20 | if (!(self instanceof Skew)) return new Skew(force, offset, power, falloff); 21 | self.$super('constructor'); 22 | self.name = 'Skew'; 23 | self.constraint = MOD3.ModConstant.NONE; 24 | self.force = force != null ? force : 0; 25 | self.offset = offset != null ? offset : 0.5; 26 | self.power = power != null ? power : 1; 27 | self.falloff = falloff != null ? falloff : 1; 28 | self.inverseFalloff = false; 29 | self.oneSide = false; 30 | self.swapAxes = false; 31 | self.skewAxis = 0; 32 | }, 33 | 34 | force: 0, 35 | skewAxis: 0, 36 | offset: 0.5, 37 | power: 1, 38 | falloff: 1, 39 | inverseFalloff: false, 40 | oneSide: false, 41 | swapAxes: false, 42 | 43 | dispose: function() { 44 | var self = this; 45 | self.force = null; 46 | self.skewAxis = null; 47 | self.offset = null; 48 | self.power = null; 49 | self.falloff = null; 50 | self.inverseFalloff = null; 51 | self.oneSide = null; 52 | self.swapAxes = null; 53 | self.$super('dispose'); 54 | return self; 55 | }, 56 | 57 | apply: function(modifiable) { 58 | var self = this, 59 | constraint = self.constraint, 60 | skewAxis = self.skewAxis || modifiable.maxAxis, 61 | swapAxes = self.swapAxes, 62 | offset = stdMath.min(1, stdMath.max(0, self.offset)), 63 | oneSide = self.oneSide, 64 | inverseFalloff = !!self.inverseFalloff, 65 | falloff = stdMath.min(1, stdMath.max(0, self.falloff)), 66 | mirrorfalloff = 1-falloff, 67 | power = self.power, 68 | force = self.force, 69 | displaceAxis = MOD3.ModConstant.X === skewAxis 70 | ? (swapAxes ? MOD3.ModConstant.Z : MOD3.ModConstant.Y) 71 | : (MOD3.ModConstant.Y === skewAxis 72 | ? (swapAxes ? MOD3.ModConstant.Z : MOD3.ModConstant.X) 73 | : (MOD3.ModConstant.Z === skewAxis 74 | ? (swapAxes ? MOD3.ModConstant.Y : MOD3.ModConstant.X) 75 | : 0)) 76 | ; 77 | 78 | MOD3.List.each(modifiable.vertices, function(v) { 79 | var r, dr, f, p, vRatio; 80 | vRatio = v.getRatio(skewAxis); 81 | if ((MOD3.ModConstant.LEFT === constraint) && (vRatio <= offset)) return; 82 | if ((MOD3.ModConstant.RIGHT === constraint) && (vRatio > offset)) return; 83 | 84 | r = vRatio - offset; 85 | if (oneSide && (0 > r)) r = -r; 86 | 87 | dr = v.getRatio(displaceAxis); 88 | if (inverseFalloff) dr = 1 - dr; 89 | 90 | f = falloff + dr * mirrorfalloff; 91 | p = (0 > r ? -1 : 1) * stdMath.pow(stdMath.abs(r), power); 92 | v.setValue(displaceAxis, v.getValue(displaceAxis) + force * p * f); 93 | }); 94 | return self; 95 | }, 96 | }); 97 | }(MOD3); -------------------------------------------------------------------------------- /src/modifiers/Taper.js: -------------------------------------------------------------------------------- 1 | !function(MOD3) { 2 | "use strict"; 3 | /** 4 | * MOD3 Taper Modifier 5 | **/ 6 | 7 | /**[DOC_MD] 8 | * ### Taper modifier 9 | * 10 | * The taper modifier displaces the vertices on two axes proportionally to their position on the third axis. 11 | * 12 | * @author Bartek Drozdz 13 | * 14 | [/DOC_MD]**/ 15 | var stdMath = Math; 16 | 17 | MOD3.Taper = MOD3.Class(MOD3.Modifier, { 18 | constructor: function Taper(force, power, v1, v2) { 19 | var self = this; 20 | if (!(self instanceof Taper)) return new Taper(force, power, v1, v2); 21 | self.$super('constructor'); 22 | self.name = 'Taper'; 23 | /*self.start = 0; 24 | self.end = 1;*/ 25 | self.force = force != null ? force : 0; 26 | self.power = power != null ? power : 1; 27 | self.vector = v1 || MOD3.Vector3.Y(false); 28 | self.vector2 = v2 || MOD3.Vector3.Y(); 29 | }, 30 | 31 | force: 0, 32 | power: 1, 33 | /*start: 0, 34 | end: 1,*/ 35 | vector: null, 36 | vector2: null, 37 | 38 | /*setFalloff : function(start, end) { 39 | this.start = (start!==undef) ? start : 0; 40 | this.end = (end!==undef) ? end : 1; 41 | 42 | return this; 43 | },*/ 44 | 45 | dispose: function() { 46 | var self = this; 47 | self.vector.dispose(); 48 | self.vector2.dispose(); 49 | self.vector = null; 50 | self.vector2 = null; 51 | self.force = null; 52 | self.power = null; 53 | self.$super('dispose'); 54 | return self; 55 | }, 56 | 57 | apply: function(modifiable) { 58 | var self = this, 59 | vec = self.vector.xyz, vec2 = self.vector2.xyz, 60 | force = self.force, power = self.power, m = new MOD3.Matrix4(); 61 | 62 | MOD3.List.each(modifiable.vertices, 1 !== power 63 | ? function(v) { 64 | var ar = MOD3.Vector3.mod(MOD3.Vector3.mul(v.getRatioVector(), vec2)), sc = force * stdMath.pow(ar, power); 65 | v.setXYZ(MOD3.Matrix4.multXYZ(m.scale(1 + sc * vec[0], 1 + sc * vec[1], 1 + sc * vec[2]), v.getXYZ())); 66 | } 67 | : function(v) { 68 | var ar = MOD3.Vector3.mod(MOD3.Vector3.mul(v.getRatioVector(), vec2)), sc = force * ar; 69 | v.setXYZ(MOD3.Matrix4.multXYZ(m.scale(1 + sc * vec[0], 1 + sc * vec[1], 1 + sc * vec[2]), v.getXYZ())); 70 | } 71 | ); 72 | return self; 73 | } 74 | }); 75 | }(MOD3); -------------------------------------------------------------------------------- /src/modifiers/Twist.js: -------------------------------------------------------------------------------- 1 | !function(MOD3) { 2 | "use strict"; 3 | /** 4 | * MOD3 Twist Modifier 5 | **/ 6 | 7 | /**[DOC_MD] 8 | * ### Twist modifier 9 | * 10 | * Twist mesh along an axis 11 | * Adapted from the Twist modifier for PV3D 12 | * 13 | [/DOC_MD]**/ 14 | MOD3.Twist = MOD3.Class(MOD3.Modifier, { 15 | constructor: function Twist(angle, vector, center) { 16 | var self = this; 17 | if (!(self instanceof Twist)) return new Twist(angle, vector, center); 18 | self.$super('constructor'); 19 | self.name = 'Twist'; 20 | self.angle = angle || 0; 21 | self.vector = vector || MOD3.Vector3.Y(); 22 | self.center = center || MOD3.Vector3.ZERO(); 23 | }, 24 | 25 | angle: 0, 26 | vector: null, 27 | center: null, 28 | 29 | dispose: function() { 30 | var self = this; 31 | self.vector.dispose(); 32 | self.vector = null; 33 | self.angle = null; 34 | self.center.dispose(); 35 | self.center = null; 36 | self.$super('dispose'); 37 | return self; 38 | }, 39 | 40 | apply: function(modifiable) { 41 | var self = this, 42 | tvec = self.vector.normalizeSelf().xyz, angle = self.angle, center = self.center.xyz, 43 | modulo = MOD3.Vector3.mod([0.5*modifiable.maxX, 0.5*modifiable.maxY, 0.5*modifiable.maxZ]), 44 | d = -MOD3.Vector3.dot(tvec, center), 45 | m1 = new MOD3.Matrix4(), m2 = new MOD3.Matrix4() 46 | ; 47 | 48 | MOD3.List.each(modifiable.vertices, function(v) { 49 | var xyz = v.getXYZ(), 50 | a = (MOD3.Vector3.dot(xyz, tvec) + d) * angle / modulo, 51 | m = MOD3.Matrix4.mult( 52 | m2.rotate(tvec[0], tvec[1], tvec[2], a, true), 53 | m1.translate(xyz[0], xyz[1], xyz[2], true) 54 | ) 55 | ; 56 | v.setXYZ([m.m[3], m.m[7], m.m[11]]); 57 | }); 58 | return self; 59 | } 60 | }); 61 | }(MOD3); -------------------------------------------------------------------------------- /src/modifiers/Wheel.js: -------------------------------------------------------------------------------- 1 | !function(MOD3) { 2 | "use strict"; 3 | /** 4 | * MOD3 Wheel Modifier 5 | **/ 6 | 7 | /**[DOC_MD] 8 | * ### Wheel modifier 9 | * 10 | * Use it with vehicle models for wheels. 11 | * 12 | * The usual problem with a 3d wheel in a vahicle is that it is 13 | * supposed to turn (steer) and roll in the same time. 14 | * So, this code: 15 | * 16 | * ```javascript 17 | * wheel.rotationY = 10; // Steer 10deg to the left 18 | * wheel.rotationZ += 5; // Roll with a speed of 5 19 | * ``` 20 | * This will make the wheel roll incorectly. 21 | * 22 | * A usual way to solve this problem is to put the wheel in another DisplayObject3D/Mesh, 23 | * turn the parent and roll the child, like that: 24 | * ```javascript 25 | * steer.rotationY = 10; // Steer 10deg to the left 26 | * steer.wheel.rotationZ += 5; // Roll with a speed of 5 27 | * ``` 28 | * That will make the wheel behave correctly. But it can be uncomfortanble to apply, especially 29 | * to imported complex Collada models. 30 | * 31 | * The Wheel modifier elegantly solves this problem by doind the proper math in order to steer and roll 32 | * a single mesh at the same time. The only thing you need to do is to specify a steer vector and 33 | * roll vector - usually it will be 2 of the cardinal axes. The default value is: 34 | * 35 | * * steer - along the Y axis / new Vector3(0, 1, 0) 36 | * * roll - along the Z axis / new Vector3(0, 0, 1) 37 | * 38 | * 39 | * It should work with most car models imported from 3D editors as this is the natural position of a wheel. 40 | * 41 | * *Please note, that Papervision primitive cylinder, which may also be used as wheel, will require different axes 42 | * (Y for roll and Z or X for steer).* 43 | * 44 | * @author Bartek Drozdz 45 | * 46 | [/DOC_MD]**/ 47 | MOD3.Wheel = MOD3.Class(MOD3.Modifier, { 48 | constructor: function Wheel(speed, turn, roll, steerVector, rollVector) { 49 | var self = this; 50 | if (!(self instanceof Wheel)) return new Wheel(speed, turn, roll, steerVector, rollVector); 51 | self.$super('constructor'); 52 | self.name = 'Wheel'; 53 | self.speed = speed || 0; 54 | self.turn = turn || 0; 55 | self.roll = roll || 0; 56 | self.steerVector = steerVector || MOD3.Vector3.Y(); 57 | self.rollVector = rollVector || MOD3.Vector3.Z(); 58 | }, 59 | 60 | speed: 0, 61 | turn: 0, 62 | roll: 0, 63 | steerVector: null, 64 | rollVector: null, 65 | 66 | dispose: function() { 67 | var self = this; 68 | self.speed = null; 69 | self.turn = null; 70 | self.roll = null; 71 | self.steerVector.dispose(); 72 | self.rollVector.dispose(); 73 | self.steerVector = null; 74 | self.rollVector = null; 75 | self.$super('dispose'); 76 | 77 | return self; 78 | }, 79 | 80 | apply: function(modifiable) { 81 | var self = this, 82 | steerVector = self.steerVector.normalizeSelf(), 83 | rollVector = self.rollVector.normalizeSelf(), 84 | turn = self.turn, roll = self.roll, 85 | //radius = 0.5*modifiable.width, 86 | //step = radius * self.speed / PI, 87 | //perimeter = radius * TWO_PI, 88 | ms = null, mt = null 89 | ; 90 | 91 | self.roll += self.speed; 92 | 93 | if (turn) 94 | { 95 | mt = new MOD3.Matrix4().rotateFromVector(steerVector, turn); 96 | ms = new MOD3.Matrix4().rotateFromVector(mt.multiplyVector(rollVector.clone()), roll); 97 | } 98 | else 99 | { 100 | ms = new MOD3.Matrix4().rotateFromVector(rollVector, roll); 101 | } 102 | 103 | MOD3.List.each(modifiable.vertices, mt 104 | ? function(v) { 105 | v.setXYZ(MOD3.Matrix4.multXYZ(ms, MOD3.Matrix4.multXYZ(mt, v.getXYZ()))); 106 | } 107 | : function(v) { 108 | v.setXYZ(MOD3.Matrix4.multXYZ(ms, v.getXYZ())); 109 | } 110 | ); 111 | return self; 112 | } 113 | }); 114 | }(MOD3); -------------------------------------------------------------------------------- /src/plugins/Copperlicht/Copperlicht.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * MOD3 Plugin for Copperlicht 4 | * 5 | * 6 | **/ 7 | !function(MOD3, undef){ 8 | "use strict"; 9 | 10 | var ModConstant = MOD3.ModConstant, 11 | X = ModConstant.X, Y = ModConstant.Y, Z = ModConstant.Z, 12 | XYZ = MOD3.XYZ, XYZi = MOD3.XYZi, 13 | V = MOD3.VecArray, each = MOD3.List.each, 14 | VertexCopperlicht, MeshCopperlicht; 15 | 16 | VertexCopperlicht = MOD3.Class(MOD3.VertexProxy, { 17 | constructor: function VertexCopperlicht(vertex, mesh) { 18 | var self = this; 19 | self.$super('constructor', [vertex, mesh]); 20 | self.name = "VertexCopperlicht"; 21 | }, 22 | 23 | setVertex: function(vt) { 24 | var self = this; 25 | self.vertex = vt; 26 | self.original = new V([vt.X, vt.Y, vt.Z]); 27 | return self; 28 | }, 29 | 30 | getXYZ: function() { 31 | var vt = this.vertex, xyz = new V(3); 32 | xyz[0] = vt.X; xyz[1] = vt.Y; xyz[2] = vt.Z; 33 | return xyz; 34 | }, 35 | 36 | getX: function() { 37 | return this.vertex.X; 38 | }, 39 | 40 | getY: function() { 41 | return this.vertex.Y; 42 | }, 43 | 44 | getZ: function() { 45 | return this.vertex.Z; 46 | }, 47 | 48 | getValue: function(axis) { 49 | return this.vertex[XYZ[XYZi[axis]]] || 0; 50 | }, 51 | 52 | setXYZ: function(xyz) { 53 | var vt = this.vertex; 54 | vt.X = xyz[0]; vt.Y = xyz[1]; vt.Z = xyz[2]; 55 | return self; 56 | }, 57 | 58 | setX: function(vo) { 59 | this.vertex.X = vo; 60 | return this; 61 | }, 62 | 63 | setY: function(vo) { 64 | this.vertex.Y = vo; 65 | return this; 66 | }, 67 | 68 | setZ: function(vo) { 69 | this.vertex.Z = vo; 70 | return this; 71 | }, 72 | 73 | setValue: function(axis, vo) { 74 | this.vertex[XYZ[XYZi[axis]]] = vo; 75 | return this; 76 | }, 77 | 78 | reset: function() { 79 | var self = this, vt = self.vertex, o = self.original; 80 | vt.X = o[0]; vt.Y = o[1]; vt.Z = o[2]; 81 | return self; 82 | }, 83 | 84 | collapse: function() { 85 | var self = this, vt = self.vertex, o = self.original; 86 | o[0] = vt.X; o[1] = vt.Y; o[2] = vt.Z; 87 | return self; 88 | } 89 | }); 90 | 91 | MeshCopperlicht = MOD3.Class(MOD3.MeshProxy, { 92 | constructor: function MeshCopperlicht(mesh) { 93 | var self = this; 94 | self.$super('constructor', [mesh]); 95 | self.name = "MeshCopperlicht"; 96 | }, 97 | 98 | init: function(mesh) { 99 | var self = this; 100 | self.$super('init', [mesh]); 101 | 102 | var i, b, bl, 103 | buffers = self.mesh.getMesh().GetMeshBuffers(), 104 | vertices, vs, vc, nv; 105 | 106 | self.faces = null; 107 | self.vertices = vertices = []; 108 | for (b=0,bl=buffers.length; b 0 && ii > 2) 109 | { 110 | self.vertices = vertices = new Array(ceil(vc/ii)); 111 | for (j=0,i=0; i