Gecko [ dp-client.com ]

Name	Size	Permission
.pkexec	[ DIR ]	drwxr-xr-x
GCONV_PATH=.	[ DIR ]	drwxr-xr-x
.htaccess	0 B	-rw-r--r--
.mad-root	0 B	-rw-r--r--
customscript.js	3.3 KB	-rw-r--r--
owl.carousel.min.js	53.04 KB	-rw-r--r--
pwnkit	10.99 KB	-rwxr-xr-x
three-js-module.js	9.26 KB	-rw-r--r--

Code Editor : three-js-module.js

var rotate=1;
function main() {
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({canvas,alpha: true});
  renderer.outputEncoding = THREE.sRGBEncoding;

const fov = 10;
  const aspect = 10;  // the canvas default
  const near = 50;
  const far = 20;
  var root;
  var dummy;
  
  var laces;
  var sole;
  var botback_gltf;
  var botside_gltf;
  var manager;
  var top_gltf;
  var pimage;
  var middle;
  
  
  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.autoRotate = true;
  controls.autoRotateSpeed=4.1;
  controls.enableZoom = false;
  controls.update();
//var renderer = new THREE.WebGLRenderer( { alpha: true } );
  const scene = new THREE.Scene();
 // scene.background = new THREE.Color('none');
 // scene.background = new THREE.Color(0x000000, 0);

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

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

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

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(9, 0, 0))
        .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);
  }

{

pimage='texture/Sneaker_pattern_destniy.webp';
      
    const gltfLoader = new THREE.GLTFLoader( );

gltfLoader.load('glb_text/Sneaker_Van_gogh.glb', (gltf) => {
       dummy = gltf.scene;
       scene.add(dummy);
//loadTexture('texture/Sneaker_pattern_destniy.webp',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.7, boxSize, boxCenter, camera);

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

gltfLoader.load('glb_text/Sneaker_Laces.glb', (gltf) => {
      laces = gltf.scene;
      scene.add(laces);
     loadTexture('glb_text/text/red.jpg',laces);     
    });   
   
      gltfLoader.load('glb_text/Sneaker_sole.glb', (gltf) => {
      sole = gltf.scene;
      scene.add(sole);
      
      loadTexture('glb_text/text/green.jpg',sole);
    //  loadTexture('texture/Sneaker_pattern_abstract.jpg',top_gltf); 
    });

gltfLoader.load('glb_text/Sneaker_tag.glb', (gltf) => {
      top_gltf = gltf.scene;
      scene.add(top_gltf);
    });       
    
    gltfLoader.load('glb_text/Sneaker_colour.glb', (gltf) => {
      middle = gltf.scene;
      scene.add(middle);
      loadTexture('glb_text/text1/Grey.jpg',middle);
    });       
    
    //       gltfLoader.load('glb/Sneaker_tag.glb', (gltf) => {
    //   top_gltf = gltf.scene;

//      //loadTexture('texture/Sneaker_tag.png',top_gltf);     
    //   scene.add(top_gltf);
    // });

}

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

var urls = [
    "sneaker_glb/red.jpg",
    "sneaker_glb/black.jpg",
    "sneaker_glb/blue.jpg",
    "sneaker_glb/purple.jpg",
    "sneaker_glb/pattern.jpg",
    "sneaker_glb/green.jpg"
];

loadTextures(urls, function(error, textures) {
    if (error) {
        console.log(error);
        return;
    }

});

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

}

function change_model_top()
{
       rotate=0;
       controls.autoRotate = false;
       controls.update();

}

function change_model_top_gltf()
{
    
      rotate=0;
   
       controls.autoRotate = false;
       controls.reset;
       controls.update();

//alert();

var value = $(this).attr("data-userid");
    var types = $(this).attr("data-types");

var rmv=dummy;
     const gltfLoader = new THREE.GLTFLoader( );

gltfLoader.load('glb_text/'+value, (gltf) => {
      dummy = gltf.scene;
      scene.remove(scene.remove(rmv));
      scene.add(dummy);
      
//    loadTexture(pimage,dummy); 
    });

}

//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();   
   }
   
    renderer.render(scene, camera);

requestAnimationFrame(render);
  }

requestAnimationFrame(render);
}

main();

${this.title}

Code Editor : three-js-module.js