Gecko [ dp-client.com ]

Name	Size	Permission
123	[ 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
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--
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 : test-Crystalsmettalic.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">
    <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');
  var 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 text_image='';
  
 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;
   var left_3;
   var rotate_flag=1;
  
  
  const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(22, window.innerWidth / window.innerHeight, 1, 1000);
 camera.position.set(0, 2, 18);
 camera.lookAt(scene.position);

const controls = new THREE.OrbitControls(camera, canvas);

controls.enabled = true;
                 controls.addEventListener( 'change', render );
                 controls.enableDamping = true;
                 controls.dampingFactor = 1;
                 controls.enableKeys = true;
                 controls.minPolarAngle = 75 * THREE.MathUtils.DEG2RAD;
                 controls.maxPolarAngle = 60 * THREE.MathUtils.DEG2RAD;
                 controls.screenSpacePanning = true;
                 controls.enablePan = true;
                 controls.enableRotate = true;
                // controls.mouseButtons = { PAN: THREE.MOUSE.LEFT };
                 //controls.autoRotate = true;
                 controls.enableZoom = true;
                 controls.minDistance = controls.target.distanceTo(camera.position) / 1.5;
                 controls.maxDistance = controls.target.distanceTo(camera.position) * 1.5;
                 controls.target.set(0, 0, 0);
                 controls.update();
                 scene.background = new THREE.Color('white');

camera.lookAt(scene.position);
var increment =1;
const mesh = new THREE.Mesh();

scene.add(mesh)
scene.updateMatrixWorld(true);

// 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 planeSize = 0;

}

{

var   light = {
                    Hemisphere: new THREE.HemisphereLight(0xffffff, 0xffffff, 0.20),
                    Directional: new THREE.DirectionalLight(0xffffff, 0.4),
                    PointLightL: new THREE.PointLight(0xffffff, 0.3, 100),
                    PointLightR: new THREE.PointLight(0xffffff, 1.2, 100),
                    PointLightF: new THREE.PointLight(0xffffff, 0.4, 100),
                    PointLightB: new THREE.PointLight(0xffffff, 0.85, 100)
                };

light.Hemisphere.position.set(0, 10, 0);
                light.Directional.position.set(0, 5, 5);
                light.PointLightL.position.set(-5, 3, -3);
                light.PointLightR.position.set(5, 3, 3);
                light.PointLightF.position.set(-1.5, 0, 5);
                light.PointLightB.position.set(0, -0.25, -5);
     
 //scene.add(light);  
       Sz.each(light, function (name, dummy) {

dummy.name = name;

scene.add(dummy);
                });

renderer.outputEncoding = THREE.sRGBEncoding;
                    renderer = new THREE.WebGLRenderer({
                    canvas: canvas,
                    alpha: true,
                    antialias: true,
                    stencil: false,
                    outputEncoding:THREE.sRGBEncoding,
                    powerPreference: "high-performance"
                });

renderer.setPixelRatio(window.devicePixelRatio);

}

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

var rotObjectMatrix;

var rotWorldMatrix;
// Rotate an object around an arbitrary axis in world space

function frameArea(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())
        .subVectors(camera.position, boxCenter)
        .multiply(new THREE.Vector3(0, 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);
  }

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

$(".progressbar-wrapper").html('');
$(".progressbar-wrapper").show();
//progressBar.style.width = (loaded / total * 100) + '%';

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

};

manager.onLoad = function ( ) {

//console.log( 'Loading complete!');
$(".progressbar-wrapper").hide();

};

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

//var tg=(itemsLoaded / itemsTotal * 100) + '%';
var tg=(itemsLoaded / itemsTotal * 100);
tg=tg.split('.');
//tg=Math.round(tg);

$(".progressbar-wrapper").html(tg[0] + '%');

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

};

manager.onError = function ( url ) {

$(".progressbar-wrapper").hide();

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

};

const loader = new THREE.GLTFLoader(manager);

// this utility function allows you to use any three.js
// loader with promises and async/await
function modelLoader(url) {
  return new Promise((resolve, reject) => {
    loader.load(url, data=> resolve(data), null, reject);
  });
}
      
      
      async function main() {
   var gltfData = await modelLoader("Crystalsmettalic.glb");

dummy = gltfData.scene;

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();

/*var gltfData = await modelLoader("new/adjustable cloth.glb");
      blueleft = gltfData.scene;
      scene.add(blueleft);
      loadTexture('new/Outlaw models/Textures/Outlaw top front.png',blueleft);

var gltfData = await modelLoader("new/adjustable trim.glb");
      blueleft = gltfData.scene;
      scene.add(blueleft);
      loadTexture('new/trim 1.jpg',blueleft);*/

const loader = new THREE.ImageBitmapLoader(manager);
loader.load(
	// resource URL
	text_image,

function ( imageBitmap ) {
		const texture = new THREE.CanvasTexture( imageBitmap );
		const material = new THREE.MeshBasicMaterial( { map: texture } );
	const	geometry = new THREE.BoxGeometry( 10, 10, 10 );
    const   mesh = new THREE.Mesh( geometry, material );
	// Add the mesh to the scene
	//scene.add(mesh);
	texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 5,  6);
//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;

// 		}
// 	});

//scene.remove(scene.remove(rmv));
	 //scene.add(top_gltf);
	},

// onProgress callback currently not supported
	undefined,

// onError callback
	function ( err ) {
	    console.log(err);
		console.log( 'An error happened' );
	}
);   
          
      
      scene.add(top_gltf);      
      scene.add(botfront_gltf);      
      scene.add(dummy);
      scene.add(botback_gltf);
      scene.add(botside_gltf);
       dosomething(dummy);
}

main().catch(error => {
  console.error(error);
});

function dosomething(dummy)
{
     
 //   $(".top_Button").first().trigger('click');
  // $(".top_Button").children().eq(3).trigger('click');
  // $(".top_Button").children().eq(1).trigger('click');
    //$(".frontbottom").first().trigger('click');
   // $(".backbottom").first().trigger('click');
 //   $(".sidebottom").first().trigger('click');    
    
      
    
}

}

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( 1.5, 1.5 );
//texture.repeat.set( 0.6, 0.6 );
 	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;

}
	});

}

function change_mtexture()
{
    
      const planeSize = 0;

//DesignOptions.Fabric.id = $(this).data("id");
           var fd=$(this).data("id");
            var fds=$(this).data("value");
            $(".mbfabric-color").val(fds);
            $(".mbfabric-color-img").removeClass("bordercls");
            $("#mbimg"+fd).addClass("bordercls");
//alert($(this).data("img"));

var value = fd + "." +$(this).data("img");

text_image="3DModel/3D/Render/Textures/Fabric/"+value;

const loader = new THREE.ImageBitmapLoader(manager);
loader.load(
	// resource URL
	text_image,

function ( imageBitmap ) {
		const texture = new THREE.CanvasTexture( imageBitmap );
		const material = new THREE.MeshBasicMaterial( { map: texture } );
	const	geometry = new THREE.BoxGeometry( 10, 10, 10 );
    const   mesh = new THREE.Mesh( geometry, material );
	// Add the mesh to the scene
	//scene.add(mesh);
	texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 1.5, 1.5 );
//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;

}
	});	
	
	 //scene.remove(scene.remove(rmv));
	 //scene.add(top_gltf);
	},

// onProgress callback currently not supported
	undefined,

// onError callback
	function ( err ) {
	    console.log(err);
		console.log( 'An error happened' );
	}
);

}

function change_texture()
{
    
      const planeSize = 0;

// DesignOptions.Fabric.id = $(this).data("id");
           var fd=$(this).data("id");
            var fds=$(this).data("value");
            $(".fabric-color").val(fds);
            $(".fabric-color-img").removeClass("bordercls");
            $("#img"+fd).addClass("bordercls");
//  ($(this).data("img"));

var value = fd + "." +$(this).data("img");

//const texture = new THREE.TextureLoader(manager).load( "3DModel/3D/Render/Textures/Fabric/"+value);

text_image="3DModel/3D/Render/Textures/Fabric/"+value;

// texture.wrapS = THREE.RepeatWrapping;
// texture.wrapT = THREE.RepeatWrapping;
// texture.repeat.set( 1.5, 1.5 );

const loader = new THREE.ImageBitmapLoader(manager);
loader.load(
	// resource URL
	text_image,

function ( imageBitmap ) {
		const texture = new THREE.CanvasTexture( imageBitmap );
		const material = new THREE.MeshBasicMaterial( { map: texture } );
	const	geometry = new THREE.BoxGeometry( 10, 10, 10 );
    const   mesh = new THREE.Mesh( geometry, material );
	// Add the mesh to the scene
	//scene.add(mesh);
	texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 1.5, 1.5 );
//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;

}
	});

}
	});	
	
	 //scene.remove(scene.remove(rmv));
	 //scene.add(top_gltf);
	},

// onProgress callback currently not supported
	undefined,

// onError callback
	function ( err ) {
	    console.log(err);
		console.log( 'An error happened' );
	}
);

}

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);

}

const loaders = new THREE.GLTFLoader(manager);

function modelLoaders(url) {
  return new Promise((resolve, reject) => {
    loaders.load(url, data=> resolve(data), null, reject);
  });
}

//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();
    }

//scene.rotation.x = -90 *
//scene.rotation.y += 0.001;
   if(rotate_flag)
   {
   // scene.rotation.y += 0.002;       
   }
//object.updateMatrix();
   //console.log(scene.rotation.y);
    renderer.render(scene, camera);

requestAnimationFrame(render);
  }

requestAnimationFrame(render);
}

main();

</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 : test-Crystalsmettalic.php