diff --git a/README.md b/README.md index 1410c30..904cf35 100644 --- a/README.md +++ b/README.md @@ -1,82 +1,43 @@ -# [Project2: Toolbox Functions](https://github.com/CIS700-Procedural-Graphics/Project2-Toolbox-Functions) +# [Project 2: ToolBox Functions](https://github.com/MegSesh/Project2-Toolbox-Functions) -## Overview +## Description The objective of this assignment is to procedurally model and animate a bird wing. Let's get creative! -Start by forking and then cloning [this repository](https://github.com/CIS700-Procedural-Graphics/Project2-Toolbox-Functions) +## Implementation Details -## Modeling +In this assignment, I decided to focus more on the animation of the wing to make it look more realistic, rather than creating a wing that looks really beautiful (this will be my next focus). -##### Reference images +I viewed a couple of examples (one listed below under References), and I noticed that the curve essentially acts like a bone that the feathers could be attached to, and so if the bone moves, the wings would move accordingly. However, the feathers closer to the body change their curvature less the ones at the end, which is what I tried to emulate in the animation. -Search for three or more images of a bird wing (or any flying creature, really) in order to provide yourself reference material, as you're going to base your modeling and animation from these images. For the more artistic minds, feel free to sketch your own concept. + - createFeatherCurve: A function that creates a cubic bezier curve based on 4 control points. A number of vertices (changeable by a user) are placed along a line constructed by the curve, and feather obj models are placed at each vertex. -##### Make wing curve + - toonShader: a MeshToonMaterial created to give the feathers a beautiful toon shader like color, based off a base color, reflectivity, specularity, and shininess -Begin with a 3D curve for your basic wing shape. Three.js provides classes to create many different types of curves, so you may use whatever type of curve you prefer. + - onLoad: setting up the scene, reading in the feather obj model, and setting up GUI variables -##### Distribute feathers + - onUpdate: this is where I work more on the animation. I have one section that moves the vertices on the curve (and the feathers along with it), thus creating the flapping motion. Another section in the function tries to emulate a wind force that blows the wings in different directions -We have provided a simple feather model from which to begin. You are not required to use this model if you have others that you prefer. From this base, you must duplicate the feather to model a complete wing, and your wing should consist of at least thirty feathers. Distribute points along the curve you created previously; you will append the feather primitives to the curve at these points. Make sure that you modify the size, orientation, and color of your feathers depending on their location on the wing. -Feel free to diversify your wings by using multiple base feather models. +## Results -## Animation +1. Control Panel (these are the ideal values): ![alt text](https://github.com/MegSesh/Project2-Toolbox-Functions/blob/master/results/controls.png "Image 1") -Add a wind force to your scene, and parameterize its direction and speed. You will use this wind force to animate the feathers of your wing by vibrating them slightly. Using Dat.GUI, allow the user to modify these wind parameters. Please note that we don't care about your feather motion being physically accurate, as long as it looks nice. -Additionally, animate the control points of your wing curve to make the wing flap, and allow the user to control the speed of the wing flapping. +2. Wing 1: +![alt text](https://github.com/MegSesh/Project2-Toolbox-Functions/blob/master/results/wing_down.png "Image 2") -## Interactivity -Using Dat.GUI and the examples provided in the reference code, allow the user to adjust the following controls: +3. Wing 2: +![alt text](https://github.com/MegSesh/Project2-Toolbox-Functions/blob/master/results/wing_up.png "Image 3") -1. The curvature of the wing's basic shape -2. Feather distribution -3. Feather size -4. Feather color -5. Feather orientation -6. Flapping speed -7. Flapping motion -## For the Overachievers -Suggestions: -- Make a pretty iridescent or otherwise feather appropriate shader. -- Otherwise, going the extra mile for this assignment is really in the polish! +## Lessons -## Submission +In this homework assignment, I learned a lot about how to analyze a wing, and how you can actually break down into a lot of simplistic mathematical principles. I had a lot of fun creating and animating the wing, and I hope to do more with this soon! -- Create a folder called `references` to include your reference images. -- Update `README.md` to contain a solid description of your project +## References -- Publish your project to gh-pages. `npm run deploy`. It should now be visible at http://username.github.io/repo-name - -- Create a [pull request](https://help.github.com/articles/creating-a-pull-request/) to this repository, and in the comment, include a link to your published project. - -- Submit the link to your pull request on Canvas. - -## Getting Started - -1. [Install Node.js](https://nodejs.org/en/download/). Node.js is a JavaScript runtime. It basically allows you to run JavaScript when not in a browser. For our purposes, this is not necessary. The important part is that with it comes `npm`, the Node Package Manager. This allows us to easily declare and install external dependencies such as [three.js](https://threejs.org/), [dat.GUI](https://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage), and [glMatrix](http://glmatrix.net/). Some other packages we'll be using make it significantly easier to develop your code and create modules for better code reuse and clarity. These tools make it _signficantly_ easier to write code in multiple `.js` files without globally defining everything. - -2. Fork and clone your repository. - -3. In the root directory of your project, run `npm install`. This will download all of those dependencies. - -4. Do either of the following (but I highly recommend the first one for reasons I will explain later). - - a. Run `npm start` and then go to `localhost:7000` in your web browser - - b. Run `npm run build` and then go open `index.html` in your web browser - - You should hopefully see the framework code with a 3D cube at the center of the screen! - - -## Developing Your Code -All of the JavaScript code is living inside the `src` directory. The main file that gets executed when you load the page as you may have guessed is `main.js`. Here, you can make any changes you want, import functions from other files, etc. The reason that I highly suggest you build your project with `npm start` is that doing so will start a process that watches for any changes you make to your code. If it detects anything, it'll automagically rebuild your project and then refresh your browser window for you. Wow. That's cool. If you do it the other way, you'll need to run `npm build` and then refresh your page every time you want to test something. - -## Publishing Your Code -We highly suggest that you put your code on GitHub. One of the reasons we chose to make this course using JavaScript is that the Web is highly accessible and making your awesome work public and visible can be a huge benefit when you're looking to score a job or internship. To aid you in this process, running `npm run deploy` will automatically build your project and push it to `gh-pages` where it will be visible at `username.github.io/repo-name`. \ No newline at end of file + - I used this [example](https://threejs.org/examples/?q=li#webgl_lights_hemisphere) as a reference for wing flaps. diff --git a/README_old.md b/README_old.md new file mode 100644 index 0000000..1410c30 --- /dev/null +++ b/README_old.md @@ -0,0 +1,82 @@ +# [Project2: Toolbox Functions](https://github.com/CIS700-Procedural-Graphics/Project2-Toolbox-Functions) + +## Overview + +The objective of this assignment is to procedurally model and animate a bird wing. Let's get creative! + +Start by forking and then cloning [this repository](https://github.com/CIS700-Procedural-Graphics/Project2-Toolbox-Functions) + +## Modeling + +##### Reference images + +Search for three or more images of a bird wing (or any flying creature, really) in order to provide yourself reference material, as you're going to base your modeling and animation from these images. For the more artistic minds, feel free to sketch your own concept. + +##### Make wing curve + +Begin with a 3D curve for your basic wing shape. Three.js provides classes to create many different types of curves, so you may use whatever type of curve you prefer. + +##### Distribute feathers + +We have provided a simple feather model from which to begin. You are not required to use this model if you have others that you prefer. From this base, you must duplicate the feather to model a complete wing, and your wing should consist of at least thirty feathers. Distribute points along the curve you created previously; you will append the feather primitives to the curve at these points. Make sure that you modify the size, orientation, and color of your feathers depending on their location on the wing. + +Feel free to diversify your wings by using multiple base feather models. + +## Animation + +Add a wind force to your scene, and parameterize its direction and speed. You will use this wind force to animate the feathers of your wing by vibrating them slightly. Using Dat.GUI, allow the user to modify these wind parameters. Please note that we don't care about your feather motion being physically accurate, as long as it looks nice. + +Additionally, animate the control points of your wing curve to make the wing flap, and allow the user to control the speed of the wing flapping. + +## Interactivity + +Using Dat.GUI and the examples provided in the reference code, allow the user to adjust the following controls: + +1. The curvature of the wing's basic shape +2. Feather distribution +3. Feather size +4. Feather color +5. Feather orientation +6. Flapping speed +7. Flapping motion + +## For the Overachievers + +Suggestions: +- Make a pretty iridescent or otherwise feather appropriate shader. +- Otherwise, going the extra mile for this assignment is really in the polish! + +## Submission + +- Create a folder called `references` to include your reference images. + +- Update `README.md` to contain a solid description of your project + +- Publish your project to gh-pages. `npm run deploy`. It should now be visible at http://username.github.io/repo-name + +- Create a [pull request](https://help.github.com/articles/creating-a-pull-request/) to this repository, and in the comment, include a link to your published project. + +- Submit the link to your pull request on Canvas. + +## Getting Started + +1. [Install Node.js](https://nodejs.org/en/download/). Node.js is a JavaScript runtime. It basically allows you to run JavaScript when not in a browser. For our purposes, this is not necessary. The important part is that with it comes `npm`, the Node Package Manager. This allows us to easily declare and install external dependencies such as [three.js](https://threejs.org/), [dat.GUI](https://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage), and [glMatrix](http://glmatrix.net/). Some other packages we'll be using make it significantly easier to develop your code and create modules for better code reuse and clarity. These tools make it _signficantly_ easier to write code in multiple `.js` files without globally defining everything. + +2. Fork and clone your repository. + +3. In the root directory of your project, run `npm install`. This will download all of those dependencies. + +4. Do either of the following (but I highly recommend the first one for reasons I will explain later). + + a. Run `npm start` and then go to `localhost:7000` in your web browser + + b. Run `npm run build` and then go open `index.html` in your web browser + + You should hopefully see the framework code with a 3D cube at the center of the screen! + + +## Developing Your Code +All of the JavaScript code is living inside the `src` directory. The main file that gets executed when you load the page as you may have guessed is `main.js`. Here, you can make any changes you want, import functions from other files, etc. The reason that I highly suggest you build your project with `npm start` is that doing so will start a process that watches for any changes you make to your code. If it detects anything, it'll automagically rebuild your project and then refresh your browser window for you. Wow. That's cool. If you do it the other way, you'll need to run `npm build` and then refresh your page every time you want to test something. + +## Publishing Your Code +We highly suggest that you put your code on GitHub. One of the reasons we chose to make this course using JavaScript is that the Web is highly accessible and making your awesome work public and visible can be a huge benefit when you're looking to score a job or internship. To aid you in this process, running `npm run deploy` will automatically build your project and push it to `gh-pages` where it will be visible at `username.github.io/repo-name`. \ No newline at end of file diff --git a/package.json b/package.json index c80e8a3..3dfedd6 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "scripts": { "start": "webpack-dev-server --hot --inline", "build": "webpack", - "deploy": "rm -rf npm-debug.log && git checkout master && git commit -am 'update' && gh-pages-deploy" + "deploy": "gh-pages-deploy" }, "gh-pages-deploy": { "prep": [ @@ -14,9 +14,9 @@ "dat-gui": "^0.5.0", "gl-matrix": "^2.3.2", "stats-js": "^1.0.0-alpha1", - "three": "^0.82.1", - "three-orbit-controls": "^82.1.0", - "three-obj-loader": "^1.0.2" + "three": "^0.84.0", + "three-obj-loader": "^1.0.2", + "three-orbit-controls": "^82.1.0" }, "devDependencies": { "babel-core": "^6.18.2", diff --git a/references/birdwing1.jpg b/references/birdwing1.jpg new file mode 100644 index 0000000..746f5f5 Binary files /dev/null and b/references/birdwing1.jpg differ diff --git a/references/birdwing2.jpg b/references/birdwing2.jpg new file mode 100644 index 0000000..0116f83 Binary files /dev/null and b/references/birdwing2.jpg differ diff --git a/results/controls.png b/results/controls.png new file mode 100644 index 0000000..b14d525 Binary files /dev/null and b/results/controls.png differ diff --git a/results/wing_down.png b/results/wing_down.png new file mode 100644 index 0000000..78fc338 Binary files /dev/null and b/results/wing_down.png differ diff --git a/results/wing_up.png b/results/wing_up.png new file mode 100644 index 0000000..62a0d71 Binary files /dev/null and b/results/wing_up.png differ diff --git a/src/main.js b/src/main.js index fd8fbd4..cf8ab13 100755 --- a/src/main.js +++ b/src/main.js @@ -4,6 +4,112 @@ const THREE = require('three'); // older modules are imported like this. You shouldn't have to worry about this much import Framework from './framework' +//================================================================================================================== +var featherGeo; +var featherList = []; +var bezierGeometryForOnUpdate = []; +var bezierCurveObjectOnUpdate; + +var guiVars = { + //The curvature of the wing's basic shape + wingCurvatureX : 0.0, + //Feather distribution + //changing distribution = changing bias + wingCurvatureY : 0.0, + //Feather size + featherSize : 1.0, + //Feather color + featherColor : 0.1, + //Feather orientation + featherOrientation : 0.0, + //Flapping speed + flappingSpeed : 10.0, + //Flapping motion + flappingMotion : 0.1, + //num of feathers + numFeathers : 10.0, + //wind direction + windDirection: 1000 +}//end guiVars + +//defining toon shader +function toonShader(colorOffset) { + var toonGreenMaterial; + var stepSize = 1.0/5.0; + + for ( var alpha = 0, alphaIndex = 0; alpha <= 1.0; alpha += stepSize, alphaIndex ++ ) { + var specularShininess = Math.pow(2.0 , alpha * 10.0 ); + + for ( var beta = 0; beta <= 1.0; beta += stepSize ) { + var specularColor = new THREE.Color( beta * 0.2, beta * 0.2, beta * 0.2 ); + + for ( var gamma = 0; gamma <= 1.0; gamma += stepSize ) { + var offset = colorOffset; + var diffuseColor = new THREE.Color().setHSL( alpha * offset, 0.5, gamma * 0.5 ).multiplyScalar( 1.0 - beta * 0.2 ); + + toonGreenMaterial = new THREE.MeshToonMaterial( { + color: diffuseColor, + specular: specularColor, + reflectivity: beta, + shininess: specularShininess, + shading: THREE.SmoothShading + } );//end var toon material + }//end for gamma + }//end for beta + }//end for alpha + + return toonGreenMaterial; +} + + +function createFeatherCurve(numCurvePoints, featherGeometry, sceneVar, feathercolor, featherorientation, curvatureoffsetX, curvatureoffsetY) { + var bezierCurve = new THREE.CubicBezierCurve( + new THREE.Vector2( -10, 0, 0 ), + new THREE.Vector2( -5, 15, 0 ), + new THREE.Vector2( 20 + curvatureoffsetX, 15 + curvatureoffsetY, 0 ), + new THREE.Vector2( 30 + curvatureoffsetX, 15 + curvatureoffsetY, 0 ) + ); + var bezierPath = new THREE.Path( bezierCurve.getPoints( numCurvePoints ) ); + var bezierGeometry = bezierPath.createPointsGeometry( numCurvePoints ); + + //SAVING THE VAR FOR ON UPDATE + bezierGeometryForOnUpdate = bezierGeometry.vertices; + + var bezierMaterial = new THREE.LineBasicMaterial( { color : 0xff0000 } ); + // Create the final object to add to the scene + var bezierCurveObject = new THREE.Line(bezierGeometry, bezierMaterial ); + + //SAVING VAR FOR ON UPDATE + bezierCurveObjectOnUpdate = bezierCurveObject; + + //remove the feathers every time you change the number in the gui + for(var j = 0; j < featherList.length; j++) + { + sceneVar.remove(featherList[j]); + } + + //add the feather obj at every point along the curve + for(var i = 0; i < numCurvePoints; i++) + { + var featherMesh = new THREE.Mesh(featherGeometry, feathercolor);//toonShader(feathercolor)); + featherMesh.name = "onCurveFeather" + i.toString(); + //set position of every feather to be the point at i + featherMesh.position.set(bezierGeometry.vertices[i].x, bezierGeometry.vertices[i].y, bezierGeometry.vertices[i].z); + featherMesh.scale.set(5.0, 5.0, 5.0); + + //if i set orientation here, i'd have to call createfeathers in the onchange function + featherMesh.rotateY(Math.sin(featherorientation));//180)); + + sceneVar.add(featherMesh); + + featherList.push(featherMesh); + }//end for loop adding feathers for every point along the curve + + //sceneVar.add(bezierCurveObject); +}//end of create feather function + + + // called after the scene loads function onLoad(framework) { var scene = framework.scene; @@ -23,7 +129,7 @@ function onLoad(framework) { // set skybox var loader = new THREE.CubeTextureLoader(); - var urlPrefix = '/images/skymap/'; + var urlPrefix = 'images/skymap/'; var skymap = new THREE.CubeTextureLoader().load([ urlPrefix + 'px.jpg', urlPrefix + 'nx.jpg', @@ -33,16 +139,23 @@ function onLoad(framework) { scene.background = skymap; + // load a simple obj mesh var objLoader = new THREE.OBJLoader(); - objLoader.load('/geo/feather.obj', function(obj) { + objLoader.load('geo/feather.obj', function(obj) { // LOOK: This function runs after the obj has finished loading - var featherGeo = obj.children[0].geometry; + //var featherGeo = obj.children[0].geometry; //the actual mesh could have more than 1 part. hence the array + featherGeo = obj.children[0].geometry; var featherMesh = new THREE.Mesh(featherGeo, lambertWhite); featherMesh.name = "feather"; scene.add(featherMesh); + + + //CALL FEATHER CURVE FUNCTION HERE SO THAT WE CAN PASS IN FEATHER OBJ GEOMETRY + createFeatherCurve(guiVars.numFeathers, featherGeo, scene, toonShader(guiVars.featherColor), guiVars.featherOrientation, guiVars.wingCurvatureX, guiVars.wingCurvatureY); + }); // set camera position @@ -52,22 +165,178 @@ function onLoad(framework) { // scene.add(lambertCube); scene.add(directionalLight); + // edit params and listen to changes like this // more information here: https://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage gui.add(camera, 'fov', 0, 180).onChange(function(newVal) { camera.updateProjectionMatrix(); }); -} + + + //================================================================================================================== + gui.add(guiVars, 'wingCurvatureX', 0, 5).onChange(function(newVal) { + guiVars.wingCurvatureX = newVal; + createFeatherCurve(guiVars.numFeathers, featherGeo, scene, toonShader(guiVars.featherColor), guiVars.featherOrientation, guiVars.wingCurvatureX, guiVars.wingCurvatureY); + }); + + gui.add(guiVars, 'wingCurvatureY', 0, 5).onChange(function(newVal) { + guiVars.wingCurvatureY = newVal; + createFeatherCurve(guiVars.numFeathers, featherGeo, scene, toonShader(guiVars.featherColor), guiVars.featherOrientation, guiVars.wingCurvatureX, guiVars.wingCurvatureY); + }); + + gui.add(guiVars, 'featherSize', 1, 20).onChange(function(newVal) { + guiVars.featherSize = newVal; + }); + + gui.add(guiVars, 'featherColor', 0, 1).onChange(function(newVal) { + guiVars.featherColor = newVal; + //call toon shader + //call createFeatherCurve with new toon shader and the gui var num feathers and feather geo + createFeatherCurve(guiVars.numFeathers, featherGeo, scene, toonShader(guiVars.featherColor), guiVars.featherOrientation, guiVars.wingCurvatureX, guiVars.wingCurvatureY); + }); + + gui.add(guiVars, 'featherOrientation', 0, 180).onChange(function(newVal) { + guiVars.featherOrientation = newVal; + createFeatherCurve(guiVars.numFeathers, featherGeo, scene, toonShader(guiVars.featherColor), guiVars.featherOrientation, guiVars.wingCurvatureX, guiVars.wingCurvatureY); + + }); + + gui.add(guiVars, 'flappingSpeed', 10, 1000).onChange(function(newVal) { + guiVars.flappingSpeed = newVal; + }); + + gui.add(guiVars, 'flappingMotion', 0.1, 0.9).onChange(function(newVal) { + guiVars.flappingMotion = newVal; + }); + + gui.add(guiVars, 'numFeathers', 5, 50).onChange(function(newVal) { + guiVars.numFeathers = newVal; + createFeatherCurve(guiVars.numFeathers, featherGeo, scene, toonShader(guiVars.featherColor), guiVars.featherOrientation, guiVars.wingCurvatureX, guiVars.wingCurvatureY); + }); + + gui.add(guiVars, 'windDirection', 1000, 5000).onChange(function(newVal) { + guiVars.windDirection = newVal; + }); + +}//end on load // called on frame updates function onUpdate(framework) { - var feather = framework.scene.getObjectByName("feather"); + var feather = framework.scene.getObjectByName("feather"); if (feather !== undefined) { // Simply flap wing var date = new Date(); - feather.rotateZ(Math.sin(date.getTime() / 100) * 2 * Math.PI / 180); + feather.rotateZ(Math.sin(date.getTime() / 100) * 2 * Math.PI / 180); + + //var output = (Math.sin(date.getTime() / 100) * 2 * Math.PI / 180); + //console.log(output); + }//end if + + + // var bezierGeometryForOnUpdate = []; + + //FLAPPING CHANGES CONTROL POINTS OF CURVE + var len = bezierGeometryForOnUpdate.length; + for(var j = 0; j < len; j++) + { + // var featherMesh = new THREE.Mesh(featherGeo2, lambertWhite); + // featherMesh.name = "onCurveFeather2_" + i.toString(); + // //set position of every feather to be the point at i + // featherMesh.position.set(bezierGeometry2.vertices[i].x, bezierGeometry2.vertices[i].y, bezierGeometry2.vertices[i].z); + // featherMesh.scale.set(5.0, 5.0, 5.0); + // scene.add(featherMesh); + // + // featherList2.push(featherMesh); + var time = new Date(); + var original_y = bezierGeometryForOnUpdate[j].y; + + //bezierGeometry.vertices[j].x; + //bezierGeometryForOnUpdate[j].y = original_y * Math.sin(time.getTime()); + //bezierGeometry.vertices[j].z; + + //instead of just j, divide by some value of a sin curve with varying amplitude + //put in the value of some toolbox function that is really slow and then shoots up in the end + var flapping_value = (len - (j * guiVars.flappingMotion));//0.8)); + bezierCurveObjectOnUpdate.geometry.vertices[j].y = original_y + (Math.sin(time.getTime() / guiVars.flappingSpeed) / flapping_value);//50) / flapping_value); } -} + + if(bezierCurveObjectOnUpdate !== undefined) + { + bezierCurveObjectOnUpdate.geometry.verticesNeedUpdate = true; + } + + + // var bezierCurveObjectOnUpdate; + //create array of feathers that im creating in loadobj + //loop through those feathers here and do the same rotation call as above + for(var i = 0; i < featherList.length; i++) + { + //FLAPPING CHANGES CONTROL POINTS OF CURVE + var animated_feather = framework.scene.getObjectByName("onCurveFeather" + i.toString()); + if (animated_feather !== undefined) + { + var date2 = new Date(); + //animated_feather.rotateZ(Math.sin(date2.getTime() / 100) * 2 * Math.PI / 180); + //setting the feathers to be at the changed place of the curve + animated_feather.position.set(bezierCurveObjectOnUpdate.geometry.vertices[i].x, bezierCurveObjectOnUpdate.geometry.vertices[i].y, bezierCurveObjectOnUpdate.geometry.vertices[i].z); + + + animated_feather.scale.set(guiVars.featherSize, guiVars.featherSize, guiVars.featherSize); + + //WIND CHANGES FEATHERS + //WIND FORCE CALCULATION + /* + Add a wind force to your scene, and parameterize its direction and speed. + You will use this wind force to animate the feathers of your wing by vibrating them slightly. + Using Dat.GUI, allow the user to modify these wind parameters. + */ + var time = new Date(); + var windStrength = Math.cos( time.getTime() / 7000 ) * 20;// + 40; + var windForce = new THREE.Vector3(0, 0, 0); + windForce.x = Math.sin( time.getTime() / 2000); + windForce.y = Math.cos( time.getTime() / 3000); + windForce.z = Math.sin( time.getTime() / 1000); + windForce.normalize().multiplyScalar(windStrength); + + + //cap x to bounds of a and b + //Math.max(a, Math.min(x, b)) + //Math.max(0.0, Math.min(windForce.y, 40.0)); + + //animated_feather.rotateY( Math.max(0, Math.min(windForce.y, 1)) / 5000 ); + // / (featherList.length - 0.9 * i)) + + var rotate_X = Math.max(0.0, Math.min(windForce.x, 40.0)); + var rotate_Y = Math.max(0.0, Math.min(windForce.y, 20.0)); + + + var original_rotation_x = animated_feather.rotation.x; + var original_rotation_y = animated_feather.rotation.y; + var original_rotation_z = animated_feather.rotation.z; + //wind direction --> 5000 is ideal + animated_feather.rotation.set(original_rotation_x, original_rotation_y + windForce.y / (guiVars.windDirection + i), original_rotation_z) + + //animated_feather.rotateY((90 / 100) * 2 * Math.PI / 180); + + + // animated_feather.rotateX(windForce.x /50000); + // animated_feather.rotateY(windForce.y/ 5000); + + //animated_feather.rotateX(rotate_X /50000); + //animated_feather.rotateY(rotate_Y/ 50000); + //animated_feather.rotateZ(windForce.z / 5000); + + //console.log(rotate_X); + + //animated_feather.rotateY(windForce.z / 5000); + + //date.getTime() / 100) * 2 * Math.PI / 180 + + }//end if + }//end for each feather in feather list + + +}//end on update // when the scene is done initializing, it will call onLoad, then on frame updates, call onUpdate -Framework.init(onLoad, onUpdate); \ No newline at end of file +Framework.init(onLoad, onUpdate);