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 : index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Test</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.2/jquery.min.js"></script>
   
  <script src="https://cdn.jsdelivr.net/npm/three@0.115/build/three.js"></script>

</head>
<body>

<button class="top_Button_gltf Grey-color"  data-userid="Grey.jpg" data-types="middle" >Change Texture</button>

var rotate=1;
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 text_image='';
  
  var top_gltf;
  var botfront_gltf;
  var botback_gltf;
  var botside_gltf;
  var orange;
  var blue;
  var darkred;
  var middle;
  var manager;
  var rotate_flag=1;
  
     var stoneleft;
   var molded;
   var mirror;
   var lightpurpleleft;
   var darkpurpleleft;
  
  const camera = new THREE.PerspectiveCamera(22, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.set(10, 100, 20);

const controls = new THREE.OrbitControls(camera, canvas);
  controls.target.set(10, 50, 0);
  
  controls.autoRotate = true;
  controls.autoRotateSpeed=4.1;
  controls.update();

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

{
    const planeSize = 0;

}

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

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

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

function frameArea(sizeToFitOnScreen, boxSize, boxCenter, camera) {
    const halfSizeToFitOnScreen = sizeToFitOnScreen * 0.2;
    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(9, 0, 0))
        .normalize();
    camera.position.copy(direction.multiplyScalar(distance).add(boxCenter));
    // 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);
  }

{
      
      
    const gltfLoader = new THREE.GLTFLoader( );

gltfLoader.load('Blue left mirror.glb', (gltf) => {
       dummy = gltf.scene;
       scene.add(dummy);
    //loadTexture('texture/Blue.jpg',dummy); 
      const box = new THREE.Box3().setFromObject(dummy);
      const boxSize = box.getSize(new THREE.Vector3()).length();
      const boxCenter = box.getCenter(new THREE.Vector3());
      frameArea(boxSize * 0.7, boxSize, boxCenter, camera);
      controls.maxDistance = boxSize * 10;
      controls.target.copy(boxCenter);
      controls.update();
    }); 
   
      
//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);
    });

}

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

function loadTextures(urls, callback) {
    var textures = [];

var onLoad = function() {
        callback(null, textures);
        console.log( 'Loading complete!');
    };

var onProgress = function() {};

var onError = function(url) {
        callback(new Error('Cannot load ' + url));
    };

var manager = new THREE.LoadingManager(onLoad, onProgress, onError);

var loader = new THREE.TextureLoader(manager);

for (var i=0; i<urls.length; i++) {
        textures.push(loader.load(urls[i]));
    }
}

function change_model_top_gltf()
{
    
   // alert();

loadTexture('txt/Orange.jpg',orange);

loadTexture('texture/Red.jpg',blue);
      loadTexture('txt/Dark_red.jpg',darkred);

}

function loadTexture(path, object) {

const texture = new THREE.TextureLoader(manager).load( path );
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.opacity = 1;

texture.needsUpdate = true;
texture.repeat.set( 0.9, 0.9 );

object.traverse( function ( child ) {    
    if (child instanceof THREE.Mesh) {
        child.material.map = texture;
        child.material.needsUpdate = true;
        child.material.map.needsUpdate = true;
    }
    
    //scene.add(object);
  });
 
}

//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);
    }
    renderer.domElement.addEventListener("mouseover", fmouseover, true);
    renderer.domElement.addEventListener("mousedown", fmouseout, true);
    return needResize;
  }
function fmouseover()
{
  rotate=0;

}
function fmouseout()
{
    alert();
     rotate=1;
        controls.autoRotate = true;
       controls.update();    
}
  function render() {
    if (resizeRendererToDisplaySize(renderer)) {
      const canvas = renderer.domElement;
      camera.aspect = canvas.clientWidth / canvas.clientHeight;
      camera.updateProjectionMatrix();
    }
   
   if(rotate)
   {
       //controls.update();   
       scene.rotation.x = 1;
   }
   
    renderer.render(scene, camera);

requestAnimationFrame(render);
  }

requestAnimationFrame(render);
}

main();
</script>

</body>
</html>

${this.title}

Code Editor : index.html