From 38cba28a5f91b6d689f680f2be8f5e36a1ccaecf Mon Sep 17 00:00:00 2001
From: Amira Abdel-Rahman <amira-rahman@aucegypt.edu>
Date: Sun, 24 Nov 2019 18:09:00 -0500
Subject: [PATCH] try to enclose threejs
---
.../assembly/main.js | 17 +-
.../physical_computing_interface/index.html | 2 +-
.../threejs/main.js | 366 +++++++++---------
3 files changed, 199 insertions(+), 186 deletions(-)
diff --git a/01_Code/physical_computing_interface/assembly/main.js b/01_Code/physical_computing_interface/assembly/main.js
index 3ba2c18..d9be7bb 100644
--- a/01_Code/physical_computing_interface/assembly/main.js
+++ b/01_Code/physical_computing_interface/assembly/main.js
@@ -782,14 +782,6 @@ function updateAngles(robotIndex){
}
-
-function ik_2d(x, y, d1, d2) {
- let dist = Math.sqrt(x ** 2 + y ** 2);
- let theta1 = Math.atan2(y, x) - Math.acos((dist ** 2 + d1 ** 2 - d2 ** 2) / (2 * d1 * dist));
- let theta2 = Math.atan2(y - d1 * Math.sin(theta1), x - d1 * Math.cos(theta1));
- return {theta1, theta2};
-}
-
function getNormalAdjustment(robotIndex,n,vnormal,forward){//n is normal degree
var result=new THREE.Vector3(0,0,0);
@@ -909,11 +901,11 @@ function createPath(robotIndex,start,end){
var enormal=new THREE.Vector3(0,0,1);
var robotUp=new THREE.Vector3(0,0,1);
var p1=start.clone();
- p1.add(snormal.clone().multiplyScalar(1));
+ p1.add(snormal.clone().multiplyScalar(0));
var p2=new THREE.Vector3(0,0,0);
var p3=new THREE.Vector3(0,0,0);
var p4=end.clone();
- p4.add(enormal.clone().multiplyScalar(1));
+ p4.add(enormal.clone().multiplyScalar(0));
var nor = snormal.clone();
nor.add(enormal);
@@ -2195,6 +2187,9 @@ function buildHelperMeshes(robotIndex){
var material = new THREE.MeshLambertMaterial({ color:0xff7171,});
var geometry = new THREE.SphereGeometry(0.5, 0.5, 0.5);
targetPositionMesh[robotIndex] = new THREE.Mesh(geometry, material);
+ targetPositionMesh[robotIndex].scale.x=0.8;
+ targetPositionMesh[robotIndex].scale.y=0.8;
+ targetPositionMesh[robotIndex].scale.z=0.8;
scene.add(targetPositionMesh[robotIndex]);
for (var count=0; count<startLocations.length;count++)
@@ -2215,7 +2210,7 @@ function showTargetPosition(robotIndex,targetPos,show){
targetPositionMesh[robotIndex].position.x=targetPos.x;
targetPositionMesh[robotIndex].position.y=targetPos.y;
- targetPositionMesh[robotIndex].position.z=targetPos.z;
+ targetPositionMesh[robotIndex].position.z=targetPos.z+voxelSpacing/2;
carriedVoxel[robotIndex].visible=true;
targetPositionMesh[robotIndex].visible=true;
diff --git a/01_Code/physical_computing_interface/index.html b/01_Code/physical_computing_interface/index.html
index 825190e..d84376c 100644
--- a/01_Code/physical_computing_interface/index.html
+++ b/01_Code/physical_computing_interface/index.html
@@ -108,7 +108,7 @@
<!-- code -->
<script src="./main.js"></script> <!-- event handling and main json structure -->
<script src="./threejs/assembly.js"></script><!-- assembly and timestep handling -->
-<script src="./threejs/grid.js"></script><!-- threejs visualization -->
+<script src="./threejs/main.js"></script><!-- threejs visualization -->
<script src="./graph/main.js"></script><!-- graph flow visualization-->
<script src="./json/main.js"></script><!-- json -->
diff --git a/01_Code/physical_computing_interface/threejs/main.js b/01_Code/physical_computing_interface/threejs/main.js
index dde1a78..b9714c9 100644
--- a/01_Code/physical_computing_interface/threejs/main.js
+++ b/01_Code/physical_computing_interface/threejs/main.js
@@ -1,194 +1,212 @@
function threejs(){
- var camera, scene, renderer;
- var plane;
- var mouse, raycaster, isShiftDown = false;
- var rollOverMesh, rollOverMaterial;
- var cubeGeo, cubeMaterial;
- var objects = [];
- var container = document.getElementById( 'webgl' );
- var container1 = document.getElementById( 'threejs' );
- var controls;
+ this.camera=[];
+ this.scene=[];
+ this.renderer=[];
+ this.plane=[];
+ this.mouse=[];
+ this.raycaster=[];
+ this.isShiftDown = false;
+ this.rollOverMesh=[];
+ this.rollOverMaterial;
+ this.cubeGeo=[];
+ this.cubeMaterial=[];
+ this.objects = [];
+ this.container = document.getElementById( 'webgl' );
+ this.container1 = document.getElementById( 'threejs' );
+ this.controls=[];
+}
- init();
- // render();
- function init() {
- camera = new THREE.PerspectiveCamera( 45, getWidth() / getHeight() , 1, 10000 );
- camera.position.set( 500, 800, 1300 );
- camera.lookAt( 0, 0, 0 );
- scene = new THREE.Scene();
- scene.background = new THREE.Color( 0xffffff );
- // roll-over helpers
- var rollOverGeo = new THREE.BoxBufferGeometry( 50, 50, 50 );
- rollOverMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, opacity: 0.5, transparent: true } );
- rollOverMesh = new THREE.Mesh( rollOverGeo, rollOverMaterial );
- scene.add( rollOverMesh );
- // cubes
- cubeGeo = new THREE.BoxBufferGeometry( 50, 50, 50 );
- cubeMaterial = new THREE.MeshPhongMaterial( { color: 0x1c5c61 } );
- // grid
- var gridHelper = new THREE.GridHelper( 1000, 20 );
- scene.add( gridHelper );
- //
- raycaster = new THREE.Raycaster();
- mouse = new THREE.Vector2();
- var geometry = new THREE.PlaneBufferGeometry( 1000, 1000 );
- geometry.rotateX( - Math.PI / 2 );
- plane = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { visible: false } ) );
- scene.add( plane );
- objects.push( plane );
- // lights
- var ambientLight = new THREE.AmbientLight( 0x606060 );
- scene.add( ambientLight );
- var directionalLight = new THREE.DirectionalLight( 0xffffff );
- directionalLight.position.set( 1, 0.75, 0.5 ).normalize();
- scene.add( directionalLight );
- renderer = new THREE.WebGLRenderer( { antialias: true } );
- renderer.setPixelRatio( window.devicePixelRatio );
- // renderer.setSize( window.innerWidth, window.innerHeight );
- renderer.setSize(getWidth(),getHeight());
-
- renderer = new THREE.WebGLRenderer();
-
- container.appendChild( renderer.domElement );
- controls = new THREE.OrbitControls( camera, renderer.domElement );
- controls.update();
- // document.body.appendChild( renderer.domElement );
- onWindowResize();
- container.addEventListener( 'mousemove', onDocumentMouseMove, false );
- container.addEventListener( 'mousedown', onDocumentMouseDown, false );
- window.addEventListener( 'keydown', onDocumentKeyDown, false );
- window.addEventListener( 'keyup', onDocumentKeyUp, false );
- //
- window.addEventListener( 'mouseup', onWindowResize, false );
- window.addEventListener( 'resize', onWindowResize, false );
- animate();
-
-
-
- }
- function animate() {
+// init();
+// render();
+
+
+threejs.prototype.animate=function() {
+
+ requestAnimationFrame(this.animate.bind(this));
- requestAnimationFrame( animate );
+ this.render();
+}
+
+
+
+threejs.prototype.render=function() {
+ this.renderer.render( this.scene, this.camera );
+ this.controls.update();
+}
+
+threejs.prototype.getWidth=function(){
+ // return container.style.width;
+ return $('#threejs').width() ;
+}
+
+threejs.prototype.getHeight=function(){
+ // return container.style.height;
+ return $('#threejs').height() ;
+}
+
+
+
+threejs.prototype.init=function() {
+ this.camera = new THREE.PerspectiveCamera( 45, this.getWidth() / this.getHeight() , 1, 10000 );
+ this.camera.position.set( 500, 800, 1300 );
+ this.camera.lookAt( 0, 0, 0 );
+ this.scene = new THREE.Scene();
+ this.scene.background = new THREE.Color( 0xffffff );
+ // roll-over helpers
+ var rollOverGeo = new THREE.BoxBufferGeometry( 50, 50, 50 );
+ this.rollOverMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, opacity: 0.5, transparent: true } );
+ this.rollOverMesh = new THREE.Mesh( rollOverGeo, this.rollOverMaterial );
+ this.scene.add( this.rollOverMesh );
+ // cubes
+ this.cubeGeo = new THREE.BoxBufferGeometry( 50, 50, 50 );
+ this.cubeMaterial = new THREE.MeshPhongMaterial( { color: 0x1c5c61 } );
+ // grid
+ var gridHelper = new THREE.GridHelper( 1000, 20 );
+ this.scene.add( gridHelper );
+ //
+ this.raycaster = new THREE.Raycaster();
+ this.mouse = new THREE.Vector2();
+ var geometry = new THREE.PlaneBufferGeometry( 1000, 1000 );
+ geometry.rotateX( - Math.PI / 2 );
+ this.plane = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { visible: false } ) );
+ this.scene.add( this.plane );
+ this.objects.push( this.plane );
+ // lights
+ var ambientLight = new THREE.AmbientLight( 0x606060 );
+ this.scene.add( ambientLight );
+ var directionalLight = new THREE.DirectionalLight( 0xffffff );
+ directionalLight.position.set( 1, 0.75, 0.5 ).normalize();
+ this.scene.add( directionalLight );
+ this.renderer = new THREE.WebGLRenderer( { antialias: true } );
+ this.renderer.setPixelRatio( window.devicePixelRatio );
+ // renderer.setSize( window.innerWidth, window.innerHeight );
+ this.renderer.setSize(this.getWidth(),this.getHeight());
+
+ this.renderer = new THREE.WebGLRenderer();
- render();
- }
+ this.container.appendChild( this.renderer.domElement );
+ this.controls = new THREE.OrbitControls( this.camera, this.renderer.domElement );
+ this.controls.update();
+ // document.body.appendChild( renderer.domElement );
+ onWindowResizeThree();
+ this.container.addEventListener( 'mousemove', onDocumentMouseMoveThree, false );
+ this.container.addEventListener( 'mousedown', onDocumentMouseDownThree, false );
+ window.addEventListener( 'keydown', onDocumentKeyDownThree, false );
+ window.addEventListener( 'keyup', onDocumentKeyUpThree, false );
+ //
+ window.addEventListener( 'mouseup', onWindowResizeThree, false );
+ window.addEventListener( 'resize', onWindowResizeThree, false );
+ this.animate();
+ // requestAnimationFrame( this.animate );
- function onWindowResize() {
- camera.aspect = getWidth() / getHeight();
- camera.updateProjectionMatrix();
- renderer.setSize( getWidth() , getHeight() );
- }
- function onDocumentMouseMove( event ) {
- event.preventDefault();
- mouse.set( ( event.clientX / getWidth() ) * 2 - 1, - ( event.clientY / getHeight() ) * 2 + 1 );
- raycaster.setFromCamera( mouse, camera );
- var intersects = raycaster.intersectObjects( objects );
- if ( intersects.length > 0 ) {
- var intersect = intersects[ 0 ];
- rollOverMesh.position.copy( intersect.point ).add( intersect.face.normal );
- rollOverMesh.position.divideScalar( voxelSpacing ).floor().multiplyScalar( voxelSpacing ).addScalar( voxelSpacing/2 );
- }
- render();
+
+}
+
+
+var three=new threejs();
+three.init();
+
+function onDocumentMouseMoveThree( event ) {
+ // console.log(three.mouse)
+ // three.mouse = new THREE.Vector2();
+ event.preventDefault();
+ three.mouse.set( ( event.clientX / three.getWidth() ) * 2 - 1, - ( event.clientY / three.getHeight() ) * 2 + 1 );
+ three.raycaster.setFromCamera( three.mouse, three.camera );
+ var intersects = three.raycaster.intersectObjects( three.objects );
+ if ( intersects.length > 0 ) {
+ var intersect = intersects[ 0 ];
+ three.rollOverMesh.position.copy( intersect.point ).add( intersect.face.normal );
+ three.rollOverMesh.position.divideScalar( voxelSpacing ).floor().multiplyScalar( voxelSpacing ).addScalar( voxelSpacing/2 );
}
+ three.render();
+}
- function onDocumentMouseDown( event ) {
- event.preventDefault();
- mouse.set( ( event.clientX / getWidth() ) * 2 - 1, - ( event.clientY / getHeight() ) * 2 + 1 );
- raycaster.setFromCamera( mouse, camera );
- var intersects = raycaster.intersectObjects( objects );
- if ( intersects.length > 0 ) {
- var intersect = intersects[ 0 ];
- // delete cube
- if ( isShiftDown ) {
- // console.log("shiftt iss dowwn");
- if ( intersect.object !== plane ) {
- // scene.remove( intersect.object );
- // console.log(intersect.object.name);
- var pos=getXYZfromName(intersect.object.name);
- removeNode(pos.x,pos.y,pos.z);
- // objects.splice( objects.indexOf( intersect.object ), 1 );
- }
- // create cube
- } else {
- var voxel = new THREE.Mesh( cubeGeo, cubeMaterial );
-
-
- voxel.position.copy( intersect.point ).add( intersect.face.normal );
-
- var x=Math.floor(voxel.position.x/voxelSpacing)+gridSize/2;
- var y=Math.floor(voxel.position.y/voxelSpacing);
- var z=Math.floor(voxel.position.z/voxelSpacing)+gridSize/2;
- if(y<0){
- y=0;
- }
-
- addNode (x,z ,y); //y is up
- // voxel.name='[' +x +"," +z+","+y+']';
-
- // voxel.position.divideScalar( voxelSpacing ).floor().multiplyScalar( voxelSpacing ).addScalar( voxelSpacing/2 );
- // scene.add( voxel );
- // objects.push( voxel );
-
-
+function onDocumentMouseDownThree( event ) {
+ event.preventDefault();
+ three.mouse = new THREE.Vector2();
+ three.mouse.set( ( event.clientX / three.getWidth() ) * 2 - 1, - ( event.clientY / three.getHeight() ) * 2 + 1 );
+ three.raycaster.setFromCamera( three.mouse, three.camera );
+ var intersects = three.raycaster.intersectObjects( three.objects );
+ if ( intersects.length > 0 ) {
+ var intersect = intersects[ 0 ];
+ // delete cube
+ if ( three.isShiftDown ) {
+ // console.log("shiftt iss dowwn");
+ if ( intersect.object !== three.plane ) {
+ // scene.remove( intersect.object );
+ // console.log(intersect.object.name);
+ var pos=getXYZfromName(intersect.object.name);
+ removeNode(pos.x,pos.y,pos.z);
+ // objects.splice( objects.indexOf( intersect.object ), 1 );
+ }
+ // create cube
+ } else {
+ var voxel = new THREE.Mesh( three.cubeGeo, three.cubeMaterial );
+
+
+ voxel.position.copy( intersect.point ).add( intersect.face.normal );
+
+ var x=Math.floor(voxel.position.x/voxelSpacing)+gridSize/2;
+ var y=Math.floor(voxel.position.y/voxelSpacing);
+ var z=Math.floor(voxel.position.z/voxelSpacing)+gridSize/2;
+ if(y<0){
+ y=0;
}
- render();
- }
- }
- document.addEventListener('addNode', function (e) {
- var voxel = new THREE.Mesh( cubeGeo, cubeMaterial );
-
- // voxel.position.copy( intersect.point ).add( intersect.face.normal );
- // var x=Math.floor(voxel.position.x/voxelSpacing)+gridSize/2;
- // var y=Math.floor(voxel.position.y/voxelSpacing);
- // var z=Math.floor(voxel.position.z/voxelSpacing)+gridSize/2;
- voxel.position.x=e.detail.posX;
- voxel.position.y=e.detail.posZ;
- voxel.position.z=e.detail.posY;
-
- voxel.name='[' +e.detail.x +"," +e.detail.y+","+e.detail.z+']';
- // voxel.position.divideScalar( voxelSpacing ).floor().multiplyScalar( voxelSpacing ).addScalar( voxelSpacing/2 );
- scene.add( voxel );
- objects.push( voxel );
-
- }, false);
-
- document.addEventListener('removeNode', function (e) {
- var name='[' +e.detail.x +"," +e.detail.y+","+e.detail.z+']';
- var object = scene.getObjectByName( name );
- scene.remove( object );
- objects.splice( objects.indexOf( object ), 1 );
-
- }, false);
-
- function onDocumentKeyDown( event ) {
- switch ( event.keyCode ) {
- case 16: isShiftDown = true; break;
- }
- }
+ addNode (x,z ,y); //y is up
+ // voxel.name='[' +x +"," +z+","+y+']';
- function onDocumentKeyUp( event ) {
- switch ( event.keyCode ) {
- case 16: isShiftDown = false; break;
+ // voxel.position.divideScalar( voxelSpacing ).floor().multiplyScalar( voxelSpacing ).addScalar( voxelSpacing/2 );
+ // scene.add( voxel );
+ // objects.push( voxel );
+
+
}
+ three.render();
}
+}
- function render() {
- renderer.render( scene, camera );
- controls.update();
- }
+document.addEventListener('addNode', function (e) {
+ var voxel = new THREE.Mesh( three.cubeGeo, three.cubeMaterial );
+
+ // voxel.position.copy( intersect.point ).add( intersect.face.normal );
+ // var x=Math.floor(voxel.position.x/voxelSpacing)+gridSize/2;
+ // var y=Math.floor(voxel.position.y/voxelSpacing);
+ // var z=Math.floor(voxel.position.z/voxelSpacing)+gridSize/2;
+ voxel.position.x=e.detail.posX;
+ voxel.position.y=e.detail.posZ;
+ voxel.position.z=e.detail.posY;
+
+ voxel.name='[' +e.detail.x +"," +e.detail.y+","+e.detail.z+']';
+ // voxel.position.divideScalar( voxelSpacing ).floor().multiplyScalar( voxelSpacing ).addScalar( voxelSpacing/2 );
+ three.scene.add( voxel );
+ three.objects.push( voxel );
+
+}, false);
- function getWidth(){
- // return container.style.width;
- return $('#threejs').width() ;
- }
+document.addEventListener('removeNode', function (e) {
+ var name='[' +e.detail.x +"," +e.detail.y+","+e.detail.z+']';
+ var object = scene.getObjectByName( name );
+ three.scene.remove( object );
+ three.objects.splice( objects.indexOf( object ), 1 );
+
+}, false);
- function getHeight(){
- // return container.style.height;
- return $('#threejs').height() ;
+function onDocumentKeyDownThree( event ) {
+ switch ( event.keyCode ) {
+ case 16: three.isShiftDown = true; break;
}
+}
+function onDocumentKeyUpThree( event ) {
+ switch ( event.keyCode ) {
+ case 16: three.isShiftDown = false; break;
+ }
}
-threejs();
+function onWindowResizeThree(){
+ three.camera.aspect = three.getWidth() / three.getHeight();
+ three.camera.updateProjectionMatrix();
+ three.renderer.setSize( three.getWidth() , three.getHeight() );
+}
--
GitLab