Gecko [ dp-client.com ]

Name	Size	Permission
.pkexec	[ DIR ]	drwxr-xr-x
GCONV_PATH=.	[ DIR ]	drwxr-xr-x
.mad-root	0 B	-rw-r--r--
Achkan.glb	3.17 MB	-rw-r--r--
index.html	7.53 KB	-rw-r--r--
pwnkit	10.99 KB	-rwxr-xr-x

Code Editor : index.html

// const videoContainer = document.querySelector('#videoContainer');
// const video = document.querySelector('#video');

// videoContainer.addEventListener('touchstart', handleTouchStart, false);
// videoContainer.addEventListener('touchmove', handleTouchMove, false);

// let xDown = null;
// let yDown = null;

// function handleTouchStart(evt) {
//   xDown = evt.touches[0].clientX;
//   yDown = evt.touches[0].clientY;
// }

// function handleTouchMove(evt) {
//   if (!xDown || !yDown) {
//     return;
//   }

//   const xUp = evt.touches[0].clientX;
//   const yUp = evt.touches[0].clientY;

//   const xDiff = xDown - xUp;
//   const yDiff = yDown - yUp;

//   if (Math.abs(xDiff) > Math.abs(yDiff)) {
//     if (xDiff > 0) {
//       video.currentTime -= 0.1;
//     } else {
//       video.currentTime += 0.1;
//     }
//   }

//   xDown = null;
//   yDown = null;
// }

// registerVideo("#bound-one", "#bound-one video");

registerVideo("#bound-two", "#bound-two video")

registerVideo("#bound-three", "#bound-three video")
   </script>

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 laces;
  var sole;
  var botback_gltf;
  var botside_gltf;
  var manager;
  var top_gltf;
  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 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);
  }

{

const gltfLoader = new THREE.GLTFLoader( );

gltfLoader.load('Achkan.glb', (gltf) => {
       dummy = gltf.scene;
      scene.add(dummy);
//loadTexture('sneaker_glb/pattern.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.7, boxSize, boxCenter, camera);

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

}

function loadTexture(path, object) {
 const texture = new THREE.TextureLoader().load( path );
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.opacity = 1;
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);
    }
    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>

${this.title}

Code Editor : index.html