Как изменить текстуру 3D модели по клику?

Question

[Alfieros]

Добрый день! Не получается изменить текстуру 3Д модели по клику в Realtime, не могу найти в гугле что отвечает за перерисовку объекта. Смотрел в справочнике Three.js примеры, не могу все равно понять что и за что отвечает :( Помогите разобраться.
Функция работает, и переменная получает значение новой текстуры, но естественно изменения не происходят.

// Сhange material color
   
          const color_white = { materials: "white" };
          const color_grey  = { materials: "grey"  };
          const color_craft = { materials: "craft" };

          changeColor = function(input) {
            if (input.value === "craft") {
              materials = color_craft.materials;
            } else if (input.value === "grey") {
              materials = color_grey.materials;
            } else if (input.value === "white") {
              materials = color_white.materials;
            }
            console.log(materials);
          };
        // Create Camera
          camera = new THREE.PerspectiveCamera(current_box.perCam, window.innerWidth / window.innerHeight, 0.25, 20);
          camera.position.x = current_box.posX;
          camera.position.y = current_box.posY;
          camera.position.z = current_box.posZ;
          camera.rotation.y += 1 * (Math.PI/180);
        // Create a Controls 
          controls = new THREE.OrbitControls(camera, container);
          controls.enablePan = false;
          controls.enableZoom = true;
          controls.minDistance = current_box.minDistance;
          controls.maxDistance = current_box.maxDistance;
          controls.update();

        // Object resize
        function resize() {
          camera.aspect = w / h;
          camera.updateProjectionMatrix();
          
          renderer.setSize( w, h );

          animate();
          console.log('element resized: ' + w + 'x' + h);
        }
        window.addEventListener('resize', resize);

        // Create a Lights 
        const pointLight = new THREE.PointLight( 0xffffff, 1.0, 3000 );
              pointLight.position.set( 1500, 1500, 1300 );

        const ambientLight = new THREE.AmbientLight( 0x999999 ); // soft white light

          scene.add(ambientLight, pointLight, );
          var onProgress = function ( xhr ) {

					if ( xhr.lengthComputable ) {

						var percentComplete = xhr.loaded / xhr.total * 100;
						console.log( Math.round( percentComplete, 2 ) + '% downloaded' );

					}
				};
        renderer = new THREE.WebGLRenderer();
        renderer.setPixelRatio( window.devicePixelRatio);
        container.append( renderer.domElement );

       function loadModel() {

					object.traverse( function ( obj ) {

            if ( obj.isMesh )
                obj.material.map = texture;
                material.needsUpdate = true;
					} );

          object.position.y = 0;
          object.position.x = 0;
          object.position.z = 0;
          
          scene.add( object );
          resize();
          animate();
				}

				var manager = new THREE.LoadingManager( loadModel );

				manager.onProgress = function ( item, loaded, total ) {

					console.log( item, loaded, total );

        };
        // Load texture
				var textureLoader = new THREE.TextureLoader( manager );
        var texture = textureLoader.load(basePath+'materials/'+materials+'.jpg', function(){
          material.map = texture;
          material.needsUpdate = true;
        });
        
        var mtlLoader = new THREE.MTLLoader( manager );
        mtlLoader.load(basePath+models+'.mtl', function(materials) {
  
          materials.preload();

          var loader = new THREE.OBJLoader( manager );
          loader.load(basePath+models+'.obj', function ( obj ) {
           
            object = obj;
            scene.add(obj);
            scene.updateMatrixWorld(true);

          }, onProgress, onError);
        });
				function onProgress( xhr ) {

					if ( xhr.lengthComputable ) {

						var percentComplete = xhr.loaded / xhr.total * 100;
						console.log( 'model ' + Math.round( percentComplete, 2 ) + '% downloaded' );

					}

				}
        function onError() {}
        
        // Render scene
        function animate() {
        renderer.render(scene,camera);
        requestAnimationFrame(animate);
      }

Comments

[profesor08]

Залей на codesanbox или codepen

Answer 1

[profesor08]

Возможно ты забыл про material.needsUpdate = true;, при обновлении текстуры, надо сообщить, что она обновилась, установив флаг. Иначе изменения будут проигнорированы в угоду производительности.