Gecko [ dp-client.com ]

Name	Size	Permission
.pkexec	[ DIR ]	drwxr-xr-x
123	[ DIR ]	drwxr-xr-x
GCONV_PATH=.	[ DIR ]	drwxr-xr-x
Left	[ DIR ]	drwxr-xr-x
ModelPatternGlb	[ DIR ]	drwxr-xr-x
Right	[ DIR ]	drwxr-xr-x
Texture	[ DIR ]	drwxr-xr-x
new	[ DIR ]	drwxr-xr-x
.mad-root	0 B	-rw-r--r--
Crystalsmettalic.glb	435.22 KB	-rw-r--r--
Left mirror.glb	15.54 KB	-rw-r--r--
Right mirror.glb	15.08 KB	-rw-r--r--
backup_test-1.php	21.4 KB	-rw-r--r--
backup_test-2.php	8.01 KB	-rw-r--r--
backup_test.php	21.38 KB	-rw-r--r--
beads test 2.glb	87.66 MB	-rw-r--r--
beads test 2new.glb	64.21 MB	-rw-r--r--
index.html	8.53 KB	-rw-r--r--
left_1.glb	2.08 MB	-rw-r--r--
left_2.glb	4.31 MB	-rw-r--r--
left_3.glb	2.47 MB	-rw-r--r--
maniq2.glb	1.69 MB	-rw-r--r--
molded.glb	2 MB	-rw-r--r--
pwnkit	10.99 KB	-rwxr-xr-x
right_1.glb	2.08 MB	-rw-r--r--
right_2.glb	4.31 MB	-rw-r--r--
right_3.glb	2.47 MB	-rw-r--r--
test-Crystalsmettalic.php	19.09 KB	-rw-r--r--
test-new.php	19.09 KB	-rw-r--r--
test.php	20.46 KB	-rw-r--r--
texture_border.php	23.48 KB	-rw-r--r--

Code Editor : backup_test-1.php

<html class="iframe"><head>
  
  <script match="false">self.lessonSettings = {"glDebug":false}</script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <title>Three.js - Load .GLTF</title>
    <style>
html, body {
  margin: 0;
  height: 100%;
}
#c {
  width: 50%;
  height: 215% !important;
  
 margin-top: 20px !important;
}
</style>

</head>
  <body class="iframe">
    <button class="top_Button_gltf"   >change Texture </button>
    <div style="width: 1000px !important;    height: 600px !important;">
    <canvas id="c" data-engine="three.js r149" width="242" height="160" style="touch-action: none;"></canvas>
</div>

function main() {
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({canvas});
  renderer.outputEncoding = THREE.sRGBEncoding;

const fov = 10;
  const aspect = 10;  // the canvas default
  const near = 50;
  const far = 20;
  var root;
  var dummy;
  
  var top_gltf;
  var botfront_gltf;
  var botback_gltf;
  var botside_gltf;
  var manager;
    var orange;
  var blue;
  var darkred;
  
    var stoneleft;
   var molded;
   var mirror;
   var lightpurpleleft;
   var blueleft;
   var darkpurpleleft;
   var left_1;
   var left_2;
   var left_3;
  
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.set(10, 100, 20);

const controls = new THREE.OrbitControls(camera, canvas);
  controls.target.set(0, 5, 0);
  controls.update();

const scene = new THREE.Scene();
  scene.background = new THREE.Color('white');

// const top = document.getElementById('top_Button');
// top.addEventListener( 'click', change_model_top );
// top.myParam = $(top).attr("data-userid");

var top = document.getElementsByClassName("top_Button");

for (var i = 0; i < top.length; i++) {
    
    var fv= $(top[i]).attr("data-userid");
    top[i].addEventListener('click', change_model_top);
    //alert(top.myParam);
    
}

const bottomfront = document.getElementById('bottmfront_Button');
bottomfront.addEventListener( 'click', change_model_bfront );
bottomfront.myParam = $(bottomfront).attr("data-userid");

const bottomback = document.getElementById('bottomback_Button');
bottomback.addEventListener( 'click', change_model_bback );
bottomback.myParam = $(bottomback).attr("data-userid");

const sidemodel = document.getElementById('side_Button');
sidemodel.addEventListener( 'click', change_model_side );
sidemodel.myParam = $(sidemodel).attr("data-userid");

const changetext = document.getElementById('change_text');
changetext.addEventListener( 'click', change_texture );

const rotatedum = document.getElementById('rotate');
rotatedum.addEventListener( 'click', rotate_dum );

var top = document.getElementsByClassName("top_Button_gltf");

for (var i = 0; i < top.length; i++) {
    
    var fv= $(top[i]).attr("data-userid");
    top[i].addEventListener('click', change_model_top_gltf);
    //alert(top.myParam);
    
}

// const texture = new THREE.TextureLoader().load( "221010051610.jpg" );
// texture.wrapS = THREE.RepeatWrapping;
// texture.wrapT = THREE.RepeatWrapping;
// texture.repeat.set( 4, 4 );

{
    const planeSize = 0;

//initializing material

//const material = new THREE.MeshBasicMaterial( { map: texture } );

}

{
    const skyColor =  'white';  // light blue
    const groundColor =  'white';  // brownish orange
    const intensity = 1;
    const light = new THREE.HemisphereLight(skyColor, groundColor, intensity);
    scene.add(light);
  }

{
    const color = 'white';
    const intensity = 1;
    const light = new THREE.DirectionalLight(color, intensity);
    light.position.set(5, 10, 2);
    scene.add(light);
    scene.add(light.target);
  }

function frameArea_rotate(sizeToFitOnScreen, boxSize, boxCenter, camera) {

const halfSizeToFitOnScreen = sizeToFitOnScreen * 0.5;
    const halfFovY = THREE.MathUtils.degToRad(camera.fov * .5);
    const distance = halfSizeToFitOnScreen / Math.tan(halfFovY);
    // compute a unit vector that points in the direction the camera is now
    // in the xz plane from the center of the box
    const direction = (new THREE.Vector3(5,5,5))
        .subVectors(camera.position, boxCenter)
        .multiply(new THREE.Vector3(5, 0, 1))
        .normalize();

// move the camera to a position distance units way from the center
    // in whatever direction the camera was from the center already
    camera.position.copy(direction.multiplyScalar(distance).add(boxCenter));

// pick some near and far values for the frustum that
    // will contain the box.
    camera.near = boxSize / 100;
    camera.far = boxSize * 100;

camera.updateProjectionMatrix();

// point the camera to look at the center of the box
    camera.lookAt(boxCenter.x, boxCenter.y, boxCenter.z);

}

function frameArea(sizeToFitOnScreen, boxSize, boxCenter, camera) {
    const halfSizeToFitOnScreen = sizeToFitOnScreen * 0.8;
    const halfFovY = THREE.MathUtils.degToRad(camera.fov * .8);
    const distance = halfSizeToFitOnScreen / Math.tan(halfFovY);
    // compute a unit vector that points in the direction the camera is now
    // in the xz plane from the center of the box
    const direction = (new THREE.Vector3())
        .subVectors(camera.position, boxCenter)
        .multiply(new THREE.Vector3(0, 0, 1))
        .normalize();

// pick some near and far values for the frustum that
    // will contain the box.
    camera.near = boxSize / 100;
    camera.far = boxSize * 100;

camera.updateProjectionMatrix();

// point the camera to look at the center of the box
    camera.lookAt(boxCenter.x, boxCenter.y, boxCenter.z);
  }

{
      
      
     manager = new THREE.LoadingManager();
manager.onStart = function ( url, itemsLoaded, itemsTotal ) {

//console.log( 'Started loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' );

};

manager.onLoad = function ( ) {

//console.log( 'Loading complete!');

};

manager.onProgress = function ( url, itemsLoaded, itemsTotal ) {

//console.log( 'Loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' );

};

manager.onError = function ( url ) {

//console.log( 'There was an error loading ' + url );

};

const gltfLoader = new THREE.GLTFLoader(manager );
    
   // https://360.competitionsuitshop.com/3DModel/3D/Render/Models/Vest/Bottom/6Button/maniq.gltf
    
    gltfLoader.load('Crystalsmettalic.glb', (gltf) => {
       dummy = gltf.scene;
      scene.add(dummy);
      //loadTexture('texture/mirror.jpg',dummy); 
      // compute the box that contains all the stuff
      // from root and below
      const box = new THREE.Box3().setFromObject(dummy);

const boxSize = box.getSize(new THREE.Vector3()).length();
      const boxCenter = box.getCenter(new THREE.Vector3());

// set the camera to frame the box
      frameArea(boxSize * 0.9, boxSize, boxCenter, camera);

// update the Trackball controls to handle the new size
      controls.maxDistance = boxSize * 10;
      controls.target.copy(boxCenter);
      controls.update();
    });
    
    /*gltfLoader.load('molded.glb', (gltf) => {
       blueleft = gltf.scene;
       scene.add(blueleft);
       //loadTexture('texture/mirror.jpg',blueleft);
     });
     
     gltfLoader.load('left_1.glb', (gltf) => {
       left_1 = gltf.scene;
       scene.add(left_1);
       loadTexture('Texture/orange.png',left_1);
     });
     
     gltfLoader.load('left_2.glb', (gltf) => {
       left_2 = gltf.scene;
       scene.add(left_2);
       loadTexture('Texture/orange.png',left_2);
     });
     
     gltfLoader.load('left_3.glb', (gltf) => {
       left_3 = gltf.scene;
       scene.add(left_3);
       loadTexture('Texture/orange.png',left_3);
     });

gltfLoader.load('Left mirror.glb', (gltf) => {
       blueleft = gltf.scene;
       scene.add(blueleft);
       //loadTexture('texture/mirror.jpg',blueleft);
     });
     
     gltfLoader.load('right_1.glb', (gltf) => {
       blueleft = gltf.scene;
       scene.add(blueleft);
       loadTexture('Texture/orange.png',blueleft);
     });
     
     gltfLoader.load('right_2.glb', (gltf) => {
       blueleft = gltf.scene;
       scene.add(blueleft);
       loadTexture('Texture/orange.png',blueleft);
     });
     
     gltfLoader.load('right_3.glb', (gltf) => {
       blueleft = gltf.scene;
       scene.add(blueleft);
       loadTexture('Texture/orange.png',blueleft);
     });

gltfLoader.load('Right mirror.glb', (gltf) => {
       blueleft = gltf.scene;
       scene.add(blueleft);
       //loadTexture('texture/mirror.jpg',blueleft);
     });*/
   
   
// gltfLoader.load('Blue left mirror.glb', (gltf) => {
//       blueleft = gltf.scene;
//       scene.add(blueleft);
//       loadTexture('texture/mirror.jpg',blueleft);
//     }); 
      
//ss red
     /* gltfLoader.load('Blue.glb', (gltf) => {
      blue = gltf.scene;
      scene.add(blue);
      loadTexture('texture/Blue.jpg',blue);
    }); */

/* gltfLoader.load('Dark purple left mirror.glb', (gltf) => {
      darkpurpleleft = gltf.scene;
      scene.add(darkpurpleleft);
      //loadTexture('texture/mirror.jpg',middle);
    }); */
//ss  darkred
   /* gltfLoader.load('Dark_purple.glb', (gltf) => {
      darkred = gltf.scene;
      scene.add(darkred);
      loadTexture('texture/Dark_purple.jpg',darkred);
    });*/

/*gltfLoader.load('Light purple left mirror.glb', (gltf) => {
      lightpurpleleft = gltf.scene;
      scene.add(lightpurpleleft);
      //loadTexture('texture/Light_Purple.jpg',middle);
    }); */
//ss oraNGE
/*gltfLoader.load('Light_purple.glb', (gltf) => {
      orange = gltf.scene;
      scene.add(orange);
      loadTexture('texture/Light_Purple.jpg',orange);
    });

gltfLoader.load('Mirror.glb', (gltf) => {
      mirror = gltf.scene;
      scene.add(mirror);
      loadTexture('texture/mirror.jpg',mirror);
    }); */
/*

gltfLoader.load('molded.glb', (gltf) => {
      molded = gltf.scene;
      scene.add(molded);
      //loadTexture('texture/Light_Purple.jpg',middle);
    });

gltfLoader.load('stone left mirror.glb', (gltf) => {
      stoneleft = gltf.scene;
      scene.add(stoneleft);
      //loadTexture('texture/Light_Purple.jpg',middle);
    }); */

// gltfLoader.load('../360/sneaker_glb/Sneaker_Laces.glb', (gltf) => {
    //   top_gltf = gltf.scene;
    //   scene.add(top_gltf);
      
    //   //loadTexture('../360/sneaker_glb/green.jpg',top_gltf);
      
    // });   
   
    //   gltfLoader.load('../360/sneaker_glb/Sneaker_sole.glb', (gltf) => {
    //   top_gltf = gltf.scene;
    //   scene.add(top_gltf);
    // });

//   gltfLoader.load('../360/sneaker_glb/Sneaker_colour.glb', (gltf) => {
    //   top_gltf = gltf.scene;
    //   scene.add(top_gltf);
    // });       
    
   
//       gltfLoader.load('new/Molded.gltf', (gltf) => {
//         top_gltf = gltf.scene;
//       scene.add(top_gltf);
      
      
//       const texture = new THREE.TextureLoader().load( "new/Adjustable/Screenshot_20230109_154823.jpg" );
// //const texture = new THREE.TextureLoader().load( "gltf-texture/resources/rss/Screenshot_20230109_154823.png" );
// texture.wrapS = THREE.RepeatWrapping;
// texture.wrapT = THREE.RepeatWrapping;
// //texture.repeat.set( 4, 4 );

//  	top_gltf.traverse( function ( child ) {
		
// 		if (child instanceof THREE.Mesh) {
// 		    //create a global var to reference later when changing textures
// 		    //apply texture

// 	    	child.material.map = texture;
// 	    	child.material.needsUpdate = true;
// 	    	child.material.map.needsUpdate = true;

// 		}
// 	});
      
      
//     });  
    
    // gltfLoader.load('new/Molded.gltf', (gltf) => {
    //   top_gltf = gltf.scene;
    //  // top_gltf.name = "Molded.gltf";
    //   scene.add(top_gltf);
    //   loadTexture('new/Adjustable/Screenshot_20230109_154823.jpg',top_gltf)
      
      
    // });  
   
  // loadTexture('new/Adjustable/Screenshot_20230109_154823.jpg',top_gltf);

//   gltfLoader.load('new/new/Front_scoop.gltf', (gltf) => {
    //   botfront_gltf = gltf.scene;
    //   scene.add(botfront_gltf);
      
    //   loadTexture('new/Adjustable/Screenshot_20230109_154823.jpg',botfront_gltf)
      
      
    // });  
    
    //   gltfLoader.load('new/new/Brazillian.gltf', (gltf) => {
    //   botback_gltf = gltf.scene;
    //   scene.add(botback_gltf);
    //   loadTexture('new/Adjustable/Screenshot_20230109_154823.jpg',botback_gltf)
      
    // });  
    
       
    //  gltfLoader.load('new/new/bottom_side.gltf', (gltf) => {
    //   botside_gltf = gltf.scene;
    //   scene.add(botside_gltf);
      
    //   loadTexture('new/Adjustable/Screenshot_20230109_154823.jpg',botside_gltf)
      
    // });  
    
//     new THREE.TextureLoader().load('221010051610.jpg', texture => {
 
//   const material = new THREE.MeshBasicMaterial( { map: texture } );
//   material.map = texture;
//  // material.side = BackSide;
//   material.needsUpdate = true;
// });

//const material = new THREE.MeshBasicMaterial( { map: texture } );

}

function loadTexture(path, object) {
    
    
    
const texture = new THREE.TextureLoader().load( path );
//const texture = new THREE.TextureLoader().load( "gltf-texture/resources/rss/Screenshot_20230109_154823.png" );
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 0.9, 0.9 );

object.traverse( function ( child ) {
		
		if (child instanceof THREE.Mesh) {
		    //create a global var to reference later when changing textures
		    //apply texture

child.material.map = texture;
	    	child.material.needsUpdate = true;
	    	child.material.map.needsUpdate = true;

}
	});
    
    
//   textureLoader.load(path, function(texture) {
//     object.traverse(function(child) {

//       if (child instanceof THREE.Mesh) {

//         child.material.map = texture;
//         child.material.needsUpdate = true;

//       }

//     });
//   });
}

function rotate_dum()
{
       const box = new THREE.Box3().setFromObject(dummy);

const boxSize = box.getSize(new THREE.Vector3()).length();
      const boxCenter = box.getCenter(new THREE.Vector3());

// set the camera to frame the box
      frameArea_rotate(boxSize * 0.9, boxSize, boxCenter, camera);

// update the Trackball controls to handle the new size
      controls.maxDistance = boxSize * 10;
      controls.target.copy(boxCenter);
      controls.update();
      
      alert();
}

function change_texture()
{
    
      const planeSize = 0;

//removeObject3D(top_gltf);

//var selectedObject = scene.getObjectByName(top_gltf.name);
//    scene.remove( selectedObject );
   // animate();

//   const gltfLoader = new THREE.GLTFLoader();
    //   gltfLoader.load('new/Underwire.gltf', (gltf) => {
    //   const top_gltf = gltf.scene;
    //   //scene.remove(top_gltf);
      
    //   scene.remove(scene.getObjectByName('new/Molded.gltf'));

//   scene.add(top_gltf);
    //   //requestAnimationFrame(render);
    //   //mesh.position.set(100, 100, 100);
    //   loadTexture('new/Adjustable/Screenshot_20230109_154823.jpg',top_gltf)
      
    // });

//const texture = new THREE.TextureLoader().load( "new/Adjustable/Screenshot_20230109_154823.jpg" );
const texture = new THREE.TextureLoader().load( "gltf-texture/resources/rss/Screenshot_20230109_154822 1.png" );
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 0.6, 0.6 );

top_gltf.traverse( function ( child ) {
		
		if (child instanceof THREE.Mesh) {
	    	child.material.map = texture;
	    	child.material.needsUpdate = true;
	    	child.material.map.needsUpdate = true;

}
	});

botfront_gltf.traverse( function ( child ) {
		
		if (child instanceof THREE.Mesh) {
	    	child.material.map = texture;
	    	child.material.needsUpdate = true;
	    	child.material.map.needsUpdate = true;

}
	});

botback_gltf.traverse( function ( child ) {
		
		if (child instanceof THREE.Mesh) {
	    	child.material.map = texture;
	    	child.material.needsUpdate = true;
	    	child.material.map.needsUpdate = true;

}
	});
	
 	botside_gltf.traverse( function ( child ) {
		
		if (child instanceof THREE.Mesh) {
	    	child.material.map = texture;
	    	child.material.needsUpdate = true;
	    	child.material.map.needsUpdate = true;

}
	});	
	
	
	
//console.log(stuff);

//alert(logfile);

// const loader = new THREE.ImageBitmapLoader();
// loader.load( '221010051610.jpg', function ( imageBitmap ) {

//         const texture = new THREE.CanvasTexture( imageBitmap );
//         const material = new THREE.MeshBasicMaterial( { map: texture } );

// } );

}

// var change_model_top = function() {
//     var ids = this.getAttribute("data-userid");
//     //alert(ids);
//       const gltfLoader = new GLTFLoader();
//       gltfLoader.load(ids, (gltf) => {
//       const root = gltf.scene;
//       scene.add(root);
//     });
// };

function change_model_top_gltf()
{
    
   // alert();

loadTexture('Left/Pattern 1/Orange L1.jpg',left_1);

loadTexture('Left/Pattern 1/Red L2.jpg',left_2);
      loadTexture('Left/Pattern 1/Dark_red L3.jpg',left_3);

}

function change_model_top()
{
      //alert(scene.getObjectByName(top_gltf.name));
     // alert(fv);
     
    var value = $(this).attr("data-userid");
   // alert(value); 
     
      //console.log(top.myParam);
      scene.remove(scene.remove(top_gltf));
      const gltfLoader = new THREE.GLTFLoader(manager );
      gltfLoader.load(value, (gltf) => {
      top_gltf = gltf.scene;
      scene.add(top_gltf);
      loadTexture('new/Adjustable/Screenshot_20230109_154823.jpg',top_gltf)
      
    });

}

function change_model_bfront(ids)
{
       //alert(element.myParam);
       const gltfLoader = new GLTFLoader();
      gltfLoader.load(bottomfront.myParam, (gltf) => {
      const root = gltf.scene;
      scene.add(root);
    });
}

function change_model_bback(ids)
{
       //alert(element.myParam);
       const gltfLoader = new GLTFLoader();
      gltfLoader.load(bottomback.myParam, (gltf) => {
      const root = gltf.scene;
      scene.add(root);
    });
}

function change_model_side(ids)
{
       //alert(element.myParam);
       const gltfLoader = new THREE.GLTFLoader();
      gltfLoader.load(sidemodel.myParam, (gltf) => {
      const root = gltf.scene;
      scene.add(root);
    });
}

//bottom('220818022018.gltf')
  function resizeRendererToDisplaySize(renderer) {
    const canvas = renderer.domElement;
    const width = canvas.clientWidth;
    const height = canvas.clientHeight;
    const needResize = canvas.width !== width || canvas.height !== height;
    if (needResize) {
      renderer.setSize(width, height, false);
    }
    return needResize;
  }

function render() {
    if (resizeRendererToDisplaySize(renderer)) {
      const canvas = renderer.domElement;
      camera.aspect = canvas.clientWidth / canvas.clientHeight;
      camera.updateProjectionMatrix();
    }

renderer.render(scene, camera);

requestAnimationFrame(render);
  }

requestAnimationFrame(render);
}

main();

</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

<button class="top_Button" style="display:none" data-userid="new/Underwire.gltf" >Top  Underwire</button>
<button class="top_Button" style="display:none" data-userid="new/Molded.gltf" >Top Molded</button>
<button class="top_Button" style="display:none" data-userid="new/Adjustable.gltf" >Top Adjust</button>

<button id="bottmfront_Button" style="display:none;" data-userid="bottomfront.gltf" >Bottom Front </button>
<button id="bottomback_Button"  style="display:none;" data-userid="bottomback.gltf" >Bottom Back </button>
<button id="side_Button" style="display:none;" data-userid="bottomside.gltf" >Side </button>
<button id="change_text" style="display:none;" >change texture </button>
<button id="rotate"   style="display:none;">change rotate </button>

</body></html>

${this.title}

Code Editor : backup_test-1.php