Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

fixed color sphere, now correctly assigning HSV.

userControlsClass updated Ray Used to calculate point on color Sphere.

ruff Example so far.

HudPanel add one color panels so far. talk about if correct usage.

Working.

Signed-off-by: flyingdeath <flyingdeath@flyingdeath.com>
  • Loading branch information...
commit 51c6119cdd8987ca01f5b60b2f00c68b185eb414 1 parent cfddc6c
flyingdeath authored
View
1  3d_ui_colorProject/doc_test_01.html
@@ -154,6 +154,7 @@
<script type="text/javascript" src="oop/dummyControlsClass.js"></script>
<script type="text/javascript" src="oop/waterPsychicsClass.js"></script>
<script type="text/javascript" src="oop/geometric3dShapes.js"></script>
+ <script type="text/javascript" src="oop/hudPanels.js"></script>
<script type="text/javascript" src="main.js"></script>
View
79 3d_ui_colorProject/main.js
@@ -21,17 +21,31 @@
});
var userControlObj = new userControlsClass({'element': element,
- 'containerId': containerId});
-
+ 'containerId': containerId,
+ 'mouseDownCallBack':mouseDownCallBack,
+ 'mouseMoveCallBack':mouseMoveCallBack,
+ 'mouseUpCallBack':mouseUpCallBack });
+ var controlRadius = 250;
+
var controls = userControlObj.createControls(sceneObj.camera,
{conType:'firstPerson',
lookSpeed: 0.095,
movementSpeed:60.0,
- initPos: new THREE.Vector3(20,20,20),
+ rotateSpeed: 1.0,
+ zoomSpeed: 1.2,
+ panSpeed: 0.2,
+ noZoom: false,
+ noPan: false,
+ staticMoving: false,
+ dynamicDampingFactor: 0.3,
+ minDistance: controlRadius * 1.1,
+ maxDistance: controlRadius * 100,
+ keys: [ 65, 83, 68 ], // [ rotateKey, zoomKey, panKey ]
+ initPos: new THREE.Vector3(0,0,0),
initLookAtPos: new THREE.Vector3(2,10,2)
// initPos: new THREE.Vector3(752,431,-48),
// initLookAtPos: new THREE.Vector3(653,445,-44)
- });
+ },sceneObj.renderer);
//var wp = new waterPsychicsClass({'scene':sceneObj.scene, 'containerId': containerId,
@@ -42,8 +56,8 @@
var sd = new screenDebuggerClass({'scene':sceneObj.scene, 'containerId': containerId});
- sd.createBaseGridStd();
- sd.createOrthogonalLines(10000);
+ // sd.createBaseGridStd();
+ // sd.createOrthogonalLines(10000);
element.stats = sd.createStats();
// element.pointLight = new lightControllerClass({'scene':sceneObj.scene}).createPiontLight({ bg: 0xffffff, o:0.75,
@@ -59,15 +73,26 @@
element.pointLight4.intensity = i;
//100, 600, 0
var geo = new geometric3dShapes({'scene':sceneObj.scene,initipos: new THREE.Vector3( 0, 0, 0 )});
+
+ var hud = new hudPanels({'scene':sceneObj.scene,'size':20,initipos: new THREE.Vector3( 0, 0, 0 )});
+ element.sceneObj = sceneObj;
element.scene = sceneObj.scene;
element.camera = sceneObj.camera;
element.renderer = sceneObj.renderer;
element.controls = controls;
- //element.wp = wp;
+ //element.wp = wp;
+ element.geo = geo;
+ element.hud = hud;
+ element.d = (new debugClass({createNode:1, nodeId: 'test2'}))
+ element.containerId = containerId;
element.renderCallBack = sceneObj.options.renderCallBack;
-
+/*
+element.mouseMoveCallBack = sceneObj.options.mouseMoveCallBack;
+ element.mouseDownCallBack = sceneObj.options.mouseDownCallBack;
+ element.mouseUpCallBack = sceneObj.options.mouseUpCallBack;
+ */
userControlObj.regKeyAction('DOM_VK_M', function(eventObj){
var pos = owl.deepCopy(modelObj.getModelPosition(film_case));
// pos.y = -1*pos.y
@@ -97,6 +122,44 @@
// return element.wp.waterMovementStep(element);
}
+ var mouseMoveCallBack = function(pos,element){
+ var objects = element.geo.getViewableObjects();
+ element.hud.updatePosition(element.camera);
+ /*
+ if(intersects.length > 0){
+ YAHOO.util.Dom.setStyle(element.containerId,'cursor', 'pointer');
+ }else{
+ YAHOO.util.Dom.setStyle(element.containerId,'cursor', 'auto');
+ }
+ return 0;
+ */
+
+ }
+
+ var mouseDownCallBack = function(element){
+ /*
+
+ return 0;
+ */
+ }
+
+ var mouseUpCallBack = function(ray,element){
+ var direction = new THREE.Vector3( ray.direction.x, ray.direction.y, ray.direction.z );
+
+ var origin = ray.origin.normalize();
+ var vector = origin.add(origin, direction);
+
+ var rho = element.geo.rho(vector);
+ var phi = element.geo.phi(vector, rho);
+ var theta = element.geo.theta(vector);
+ var point = element.geo.getCartesian(phi,theta, rho * 200);
+ var color = element.geo.calculateColor(point)
+ element.hud.changeColorOfPanel(color);
+ element.hud.updatePosition(element.camera);
+ }
+
+
+
/*---------------------------------------------------------------------------------------*/
var sky_ready = function(element, geometry, fname){
View
132 3d_ui_colorProject/oop/geometric3dShapes.js
@@ -22,32 +22,36 @@
}
geometric3dShapes.prototype.initialize = function(){
- var rezStep = 200;
- var shapeType = 'sphere'
+ var rezStep = 200;
+ var shapeType = 'sphere'
var shape = this.init_model_shape(shapeType, rezStep);
- var inside = this.init_plain({ width:this.size, height:this.size,
+ this.inside = this.init_plain({ width:this.size, height:this.size,
sHeight:rezStep, sWidth:rezStep,
'shape': shape, scaler: -1, 'shapeType':shapeType});
- var outside = this.init_plain({ width:this.size, height:this.size,
+ this.outside = this.init_plain({ width:this.size, height:this.size,
sHeight:rezStep, sWidth:rezStep,
'shape': shape, scaler: 1, 'shapeType':shapeType });
- inside.rotation.x = Math.PI;
- outside.rotation.x = -Math.PI*2;
+ // this.inside.rotation.x = Math.PI;
+ this.outside.rotation.x = -Math.PI*2;
+ //this.inside.rotation.y = Math.PI*(3/4);
- inside.position.set( this.initipos.x, this.initipos.y, this.initipos.z );
- outside.position.set( this.initipos.x, this.initipos.y, this.initipos.z );
+ this.inside.position.set( this.initipos.x, this.initipos.y, this.initipos.z );
+ this.outside.position.set( this.initipos.x, this.initipos.y, this.initipos.z );
//this.mapPlain(inside,shape, -1);
- this.scene.add(inside);
- this.scene.add(outside);
+ this.scene.add(this.inside);
+ this.scene.add(this.outside);
// this.scene.add(shape);
}
+ geometric3dShapes.prototype.getViewableObjects = function(){
+ return [this.outside];
+ }
geometric3dShapes.prototype.init_model_shape = function(sType,rezStep){
var ret;
@@ -73,11 +77,8 @@
}
switch(options.shapeType){
- case 'tube':
- this.mapColorWheel(geometry,options.scaler, this.scaleColorTube);
- break;
default:
- this.mapColorWheel(geometry,options.scaler, this.scaleColorTube);
+ this.mapColorWheel(geometry,options.scaler, this.scaleColor);
break;
}
@@ -115,18 +116,66 @@
for( var j = 0; j < n; j++ ) {
vertexIndex = f[ faceIndices[ j ] ];
p = geometry.vertices[ vertexIndex ].position;
- color = new THREE.Color( 0xffffff );
- var hue = scalcerFunc(p.x,scaler, this.size);
- var value = scalcerFunc(p.y,scaler, this.size);
- var Sat = scalcerFunc(p.z,scaler, this.size);
- color.setHSV( hue , Sat ,value );
- f.vertexColors[ j ] = color;
+ f.vertexColors[ j ] = this.calculateColor_p(p,scaler, 0);
}
}
}
+ geometric3dShapes.prototype.getFaceColor = function(face){
+ var pos = this.getFaceColor_p(this.outside.geometry, 1,face);
+ return this.calculateColor(pos);
+ }
+
+ geometric3dShapes.prototype.getFaceColor_p = function(geometry,scaler,f){
+ var colors = []
+ var faceIndices = [ 'a', 'b', 'c', 'd' ];
+ var p, n, vertexIndex;
+ n = ( f instanceof THREE.Face3 ) ? 3 : 4;
+ for( var j = 0; j < n; j++ ) {
+ vertexIndex = f[ faceIndices[ j ] ];
+ p = geometry.vertices[ vertexIndex ].position;
+ break;
+ }
+ return p;
+ }
+
+
+
+ geometric3dShapes.prototype.calculateColor= function(pos){
+ return this.calculateColor_p(pos, -1, 0)
+ }
+
+ geometric3dShapes.prototype.calculateColor_p = function(pos, scaler, rawDiff){
+ var value = this.scaleColor(pos.y,scaler, this.size);
+ var color = new THREE.Color( 0xffffff );
+ var color2d = this.postionColor(this.size, [pos.x + rawDiff,
+ pos.z + rawDiff]);
+ var phi = this.phi(pos, this.rho(pos));
+ var theta = this.theta(pos);
+ color.setHSV(color2d[0],color2d[1] ,value );
+ return color;
+ }
+
+
+ geometric3dShapes.prototype.postionColor = function(radius,point) {
+ var currentX = point[0];
+ var currentY = point[1];
+
+ var theta = Math.atan2(currentY, currentX);
+ var d = currentX * currentX + currentY * currentY;
+
+ if (d > this.radiusSquared) {
+ currentX = radius * Math.cos(theta);
+ currentY = radius * Math.sin(theta);
+ theta = Math.atan2(currentY, currentX);
+ d = currentX * currentX + currentY * currentY;
+ }
+ return [(theta + Math.PI) / (Math.PI * 2),
+ Math.sqrt(d) / radius];
+ }
+
- geometric3dShapes.prototype.scaleColorSphere = function(v,scaler,size){
+ geometric3dShapes.prototype.scaleColorSphere_old = function(v,scaler,size){
var ret = (-1*scaler*v+ size)/(size*2);
if(isNaN(parseInt(ret))){
ret = 1.0;
@@ -136,8 +185,12 @@
return ret;
}
- geometric3dShapes.prototype.scaleColorTube = function(v,scaler,size){
- var ret = (-1*scaler*v+ size)/(size*2);
+ geometric3dShapes.prototype.scaleColor = function(v,scaler,size){
+ return this.clipColor((-1*scaler*v+ size)/(size*2));
+ }
+
+ geometric3dShapes.prototype.clipColor = function(v){
+ var ret = v;
if(isNaN(parseInt(ret))){
ret = 1.0;
}else if(ret >= 1.0 ){
@@ -180,6 +233,39 @@
new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true, opacity: 1 } )) ;
return object ;
}
+
+ geometric3dShapes.prototype.rho = function(pos){
+ var r = Math.sqrt(Math.pow(pos.x,2) + Math.pow(pos.y,2) + Math.pow(pos.z,2));
+ return r;
+ }
+
+ geometric3dShapes.prototype.phi = function(pos, rho){
+ return Math.acos(pos.y/ rho);
+ }
+
+ geometric3dShapes.prototype.theta = function(pos){
+ var s = this.s(pos)
+ var ret = 0;
+ if(0 <= pos.x){
+ ret = Math.asin(pos.z/ s);
+ }else{
+ ret = Math.PI - Math.asin(pos.z/ s);
+ }
+ return ret;
+ }
+
+ geometric3dShapes.prototype.s = function(pos){
+ var r = Math.sqrt(Math.pow(pos.x,2) + Math.pow(pos.z,2));
+ return r;
+ }
+
+ geometric3dShapes.prototype.getCartesian = function(phi, theta, p){
+ var targetPosition = new THREE.Vector3(0, 0, 0);
+ targetPosition.x = p * Math.sin( phi ) * Math.cos( theta );
+ targetPosition.y = p * Math.cos( phi );
+ targetPosition.z = p * Math.sin( phi ) * Math.sin( theta );
+ return targetPosition;
+}
View
7 3d_ui_colorProject/oop/sceneControllerClass.js
@@ -46,6 +46,10 @@ function sceneControllerClass(options){
return dims;
}
+ sceneControllerClass.prototype.getDimsP = function(){
+ return this.dims;
+ }
+
sceneControllerClass.prototype.createRenderer = function(){
var renderer = new THREE.WebGLRenderer( { clearColor: 0xaaccff, clearAlpha: 1 } );
renderer.setClearColorHex( this.options.backgroundColor, this.options.backgroundOpacity );
@@ -63,7 +67,8 @@ function sceneControllerClass(options){
var delta = element.renderCallBack(element);
if(!element.cutoff){
element.controls.update(delta);
- }
+ }
+ element.renderer.clear();
element.renderer.render( element.scene, element.camera );
element.stats.update();
})();
View
75 3d_ui_colorProject/oop/userControlsClass.js
@@ -5,6 +5,8 @@ function userControlsClass(options){
this.initializeOptions(options);
this.initialize();
this.keyActions = {};
+
+ this.projector = new THREE.Projector();
this.d = new debugClass({createNode:1})
}catch(err){
debugger;
@@ -33,13 +35,78 @@ function userControlsClass(options){
userControlsClass.prototype.setupMouseControls = function(element){
var paramSet = {instanceObj: this, 'element':element};
+
YAHOO.util.Event.addListener(document.body, "mousewheel", this.mousePage, paramSet);
YAHOO.util.Event.addListener(document.body, "DOMMouseScroll", this.mousePage, paramSet);
+
YAHOO.util.Event.addListener(this.containerId, "mouseout", this.mouseCut, paramSet);
YAHOO.util.Event.addListener(this.containerId, "mouseover", this.mouseGue, paramSet);
+
+
+ YAHOO.util.Event.addListener(this.containerId, 'mousemove', this.mouseMove, paramSet );
+
+ YAHOO.util.Event.addListener(this.containerId, 'mousedown', this.mouseDown, paramSet );
+ YAHOO.util.Event.addListener(this.containerId, 'mouseup', this.mouseUp, paramSet );
+
}
+ userControlsClass.prototype.mouseMove = function( eventObj, paramSet) {
+ paramSet.instanceObj.mouseMove_p(eventObj, paramSet.element);
+ }
+
+ userControlsClass.prototype.mouseMove_p = function( event,element ) {
+ // event.preventDefault();
+ this.mouse ={};
+ this.mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
+ this.mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
+
+ /*
+ var camera = element.camera;
+
+
+ var vector = new THREE.Vector3( this.mouse.x, this.mouse.y, 0.5 );
+ this.projector.unprojectVector( vector, camera );
+
+ var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
+ */
+ if(this.mouseMoveCallBack){
+ this.mouseMoveCallBack(this.mouse,element);
+ }
+ }
+
+ userControlsClass.prototype.mouseDown = function(eventObj, paramSet) {
+ paramSet.instanceObj.mouseDown_p(eventObj, paramSet.element);
+ }
+
+ userControlsClass.prototype.mouseDown_p = function( event,element ) {
+
+ // event.preventDefault();
+
+ if(this.mouseDownCallBack){
+ this.mouseDownCallBack(element);
+ }
+ }
+
+ userControlsClass.prototype.mouseUp = function( eventObj, paramSet) {
+ paramSet.instanceObj.mouseUp_p(eventObj, paramSet.element);
+ }
+
+ userControlsClass.prototype.mouseUp_p = function( event,element ) {
+ // event.preventDefault();
+ var camera = element.camera;
+ this.mouse ={};
+ this.mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
+ this.mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
+ var vector = new THREE.Vector3( this.mouse.x, this.mouse.y, 0.5 );
+ this.projector.unprojectVector( vector, camera );
+
+ var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
+
+ if(this.mouseUpCallBack){
+ this.mouseUpCallBack(ray,element);
+ }
+ }
userControlsClass.prototype.mouseCut = function(eventObj, paramSet){
paramSet.instanceObj.mouseCut_p(eventObj, paramSet.element);
@@ -77,7 +144,7 @@ function userControlsClass(options){
}
- userControlsClass.prototype.createControls = function(camera, options){
+ userControlsClass.prototype.createControls = function(camera, options, ren){
var controls;
switch(options.conType){
@@ -85,7 +152,7 @@ function userControlsClass(options){
controls = new THREE.FirstPersonControls(camera);
break;
case 'trackball':
- controls = new THREE.TrackballControls(camera);
+ controls = new THREE.TrackballControls(camera, ren.domElement);
break;
case 'roll':
controls = new THREE.RollControls(camera);
@@ -99,7 +166,9 @@ function userControlsClass(options){
break;
}
- controls.translate(options.initPos);
+ camera.position.setX(options.initPos.x);
+ camera.position.setY(options.initPos.y);
+ camera.position.setZ(options.initPos.z);
if(options.initLookAtPos){
controls.updateCords(options.initLookAtPos);
View
BIN  3d_ui_colorProject/project_one.tws
Binary file not shown
View
28 3d_ui_colorProject/three_js/src/cameras/Camera.js
@@ -5,12 +5,12 @@
THREE.Camera = function () {
- THREE.Object3D.call( this );
+ THREE.Object3D.call( this );
- this.matrixWorldInverse = new THREE.Matrix4();
+ this.matrixWorldInverse = new THREE.Matrix4();
- this.projectionMatrix = new THREE.Matrix4();
- this.projectionMatrixInverse = new THREE.Matrix4();
+ this.projectionMatrix = new THREE.Matrix4();
+ this.projectionMatrixInverse = new THREE.Matrix4();
};
@@ -19,14 +19,22 @@ THREE.Camera.prototype.constructor = THREE.Camera;
THREE.Camera.prototype.lookAt = function ( vector ) {
- // TODO: Add hierarchy support.
+ // TODO: Add hierarchy support.
+ this.target = vector;
+ this.matrix.lookAt( this.position, vector, this.up );
- this.matrix.lookAt( this.position, vector, this.up );
+ if ( this.rotationAutoUpdate ) {
- if ( this.rotationAutoUpdate ) {
+ this.rotation.getRotationFromMatrix( this.matrix );
- this.rotation.getRotationFromMatrix( this.matrix );
-
- }
+ }
};
+
+THREE.Camera.prototype.getTarget = function ( ) {
+ return this.target;
+}
+
+
+
+
View
10 3d_ui_colorProject/three_js/src/extras/controls/FirstPersonControls.js
@@ -79,8 +79,8 @@ THREE.FirstPersonControls = function ( object, domElement ) {
switch ( event.button ) {
- case 0: this.moveForward = true; break;
- case 2: this.moveBackward = true; break;
+ // case 0: this.moveForward = true; break;
+ // case 2: this.moveBackward = true; break;
}
@@ -99,8 +99,8 @@ THREE.FirstPersonControls = function ( object, domElement ) {
switch ( event.button ) {
- case 0: this.moveForward = false; break;
- case 2: this.moveBackward = false; break;
+ // case 0: this.moveForward = false; break;
+ // case 2: this.moveBackward = false; break;
}
@@ -200,7 +200,7 @@ THREE.FirstPersonControls = function ( object, domElement ) {
}
/*********************************************************************************************/
-
+/**/
var actualMoveSpeed = this.tdiff * this.movementSpeed;
if ( this.moveForward || ( this.autoForward && !this.moveBackward ) ) this.object.translateZ( - ( actualMoveSpeed + this.autoSpeedFactor ) );
Please sign in to comment.
Something went wrong with that request. Please try again.