A
A
abrillian2020-01-18 07:09:40
three.js
abrillian, 2020-01-18 07:09:40

Texture not updating in Three.js. What's wrong?

$(window).load(function(){
  var container, w, h, canvas;
  var camera, controls, scene, renderer, light;
  var meshes= [], textureCarpet, manager, loader, objLoader, carpet, mapHeightCarpet;
  container = document.getElementById( 'DesignView' );
  container.innerHTML = "";
  var raycaster = new THREE.Raycaster();
  var mouse = new THREE.Vector2();
  init();
  animate();
  getCanvasData('model/texture/textur2.jpg')
  function getCanvasData(urlImage) {
    var img = new Image();
    img.src = urlImage;
    img.onload = function() {
      canvas = document.createElement('canvas');
      canvas.width = img.width;
      canvas.height = img.height;
      canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
      return canvas
    }
  }
  function init() {
    w = container.offsetWidth;
    h = container.offsetHeight;
    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( w, h, false );
    renderer.setClearColor( 0xFFFFFF );
    container.appendChild( renderer.domElement );
    scene = new THREE.Scene();
    scene.background = new THREE.Color( 0xffffff );
    camera = new THREE.PerspectiveCamera( 45, w/h, 1, 100000 );
    camera.position.z = 1900;
    light = new THREE.AmbientLight( 0xffffff, 1);
    scene.add(light);
      	var url = 'model/texture/tokyo.jpg'
 		manager = new THREE.LoadingManager();
    loader  = new THREE.ImageLoader( manager );
    textureCarpet = new THREE.Texture();
    loader.load( url, function ( image ) {
      textureCarpet.image = image;
      textureCarpet.needsUpdate = true;
    });
    var material = new THREE.MeshPhongMaterial({map: textureCarpet, specular: 0xfceed2, shininess: 25});
    var loadingElem = document.querySelector('#loading');
    var progressBarElem = loadingElem.querySelector('.progressbar');
    manager.onLoad = () => {
      loadingElem.style.display = 'none';
      var geometry = new THREE.BoxGeometry( 960, 1347, 10 );
      var mesh = new THREE.Mesh(geometry, material);
      scene.add(mesh);
    };
    	manager.onProgress = (urlOfLastItemLoaded, itemsLoaded, itemsTotal) => {
    		var progress = itemsLoaded / itemsTotal;
    		progressBarElem.style.transform = 'scaleX(${progress})';
    	};

    container.addEventListener( 'mousemove', onMouseMove, false );
    container.addEventListener( 'mousedown', onMouseClik, false );

    window.addEventListener( 'resize', onWindowResize, false );
    controls = new THREE.TrackballControls( camera, container );
    controls.rotateSpeed = 3.0;
    controls.zoomSpeed = 1.0;
    controls.panSpeed = 1.0;
    controls.enabled = false;
  }
  function onWindowResize() {
    w = container.offsetWidth;
    h = container.offsetHeight;
    camera.aspect = w / h;
    camera.updateProjectionMatrix();
    renderer.setSize( w, h );
  }
  function animate() {
    requestAnimationFrame( animate );
    render();
  }
  function render() {
    controls.update();
    renderer.render( scene, camera );
  }
  function ControlsReset() {
    controls.reset();
  }
  $('#ResetDesign').click(function() {
    ControlsReset();
  });
  function onMouseClik(event) {
    var rect = renderer.domElement.getBoundingClientRect();
    mouse.x = ( ( event.clientX - rect.left ) / rect.width ) * 2 - 1;
    mouse.y = - ( ( event.clientY - rect.top ) / rect.height ) * 2 + 1;
    console.log('x: ' + mouse.x+ '|    y:'+ mouse.y);
    raycaster.setFromCamera( mouse, camera );
    var intersects = raycaster.intersectObjects( scene.children, true );
    if(intersects.length){
      var x = Number(intersects[0].point.x.toFixed(0))+Number((intersects[0].object.geometry.parameters.width/2))
      var y = Math.abs(Number(intersects[0].point.y.toFixed(0))-Number((intersects[0].object.geometry.parameters.height/2)))
      var pixelData = canvas.getContext('2d').getImageData(x, y, 1, 1).data;
          	var r = pixelData[0], g = pixelData[1], b = pixelData[2]
          	var colorPic = rgbToHsl(r, g, b)
      console.log(colorPic);
    }
  }
  function onMouseMove( event ) {
    var rect = renderer.domElement.getBoundingClientRect();
    mouse.x = ( ( event.clientX - rect.left ) / rect.width ) * 2 - 1;
    mouse.y = - ( ( event.clientY - rect.top ) / rect.height ) * 2 + 1;
    //console.log('x: ' + mouse.x+ '|    y:'+ mouse.y);
    raycaster.setFromCamera( mouse, camera );
    var intersects = raycaster.intersectObjects( scene.children, true );
    for ( var i = 0; i < intersects.length; i++ ) {
      //console.log(intersects[i]);
      controls.enabled = true;
    }
  }
  function adaptTexture() {
    var image = new Image();
    image.src = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD...';
    var texture = new THREE.Texture();
    texture.image = image;
    image.onload = function() {
      texture.needsUpdate = true;
    };
    var material = new THREE.MeshPhongMaterial({map: texture, specular: 0xfceed2, shininess: 25});
  }
  $('#Order').on('click',function() {
    adaptTexture()
  })
});

Base64 specifically shorten in question

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question