How to change scale

Questions
1

Hi Guys,

I am working on 3D model on marker. successfully i have placed model on marker, but when i am try to scale using
something like:
object.scale.set(this.state.x, this.state.y, this.state.z);

actually I am working with ReactJs, so I put slider over there, when slider change scale should change.
my state is changing but how to render object so that change (scale change) will reflect on object.

I want to render whole canvas if scale will change. Don’t know how to render canvas or object.

Thanks in advanced

2

Do you have some code to show?

Do you have a render loop?

function loop() {

  requestAnimationFrame(loop)

  renderer.render(scene, camera)
}

You can also update an obj with obj.updateMatrix()
Here is a link how to update things

3

@Fluqz
_createThreeDModel = () => {
const loadedMaterials = [];
if (this.props.uploadedThreeDModel) {
const objMaterialUrl = this.props.uploadedThreeDModel.materials.filter(
material =>
material.fileName
.split(’.’)
.pop()
.toLowerCase() === ‘mtl’
);

  const manager = new THREE.LoadingManager();

  const texture = new THREE.Texture();
  const loader = new THREE.ImageLoader(manager);
  const arrOfTexture = this.props.uploadedThreeDModel.textures;
  for (let i = 0, length = arrOfTexture.length; i < length; i++) {
    loader.load(arrOfTexture[i].url, img => {
      texture.image = img;
      texture.mapping = THREE.UVMapping;
      texture.needsUpdate = true;
    });
  }

  // for multiple mtl files loader
  const mtlLoader = new MTLLoader(manager);
  for (let i = 0, length = objMaterialUrl.length; i < length; i++) {
    mtlLoader.load(objMaterialUrl[i].url, materials => {
      materials.preload();
      loadedMaterials.push(materials);
    });
  }

  manager.onLoad = () => {
    if (loadedMaterials.length > 0) {
      const objLoader = new OBJLoader();
      objLoader.setMaterials(loadedMaterials[0]);
      objLoader.load(this.props.uploadedThreeDModel.model.url, object => {
        object.traverse(child => {
          if (child instanceof THREE.Mesh) {
            child.material = child.material || new THREE.MeshPhongMaterial();
            child.material['map'] = texture;
          }
        });
        object.receiveShadow = true;
        object.castShadow = true;
        object.name = this.props.uploadedThreeDModel.name;
        object.matrixAutoUpdate = true;
        object.updateMatrix();
        const geometry = new THREE.Geometry().fromBufferGeometry(object.children[0]['geometry']);
        const cylBleu = new THREE.MeshNormalMaterial({ transparent: true, opacity: 0 });
        const newMesh = new THREE.Mesh(geometry, cylBleu);

        newMesh.scale.set(
          this.state.iacContentObject.scale.x === 1 ? 20 : this.state.iacContentObject.scale.x,
          this.state.iacContentObject.scale.y === 1 ? 20 : this.state.iacContentObject.scale.y,
          this.state.iacContentObject.scale.z === 1 ? 20 : this.state.iacContentObject.scale.z
        );
        newMesh.geometry.computeBoundingBox();
        const sizeOfObject = newMesh.geometry.boundingBox.clone();

        newMesh.add(object);
        newMesh.name = this.props.uploadedThreeDModel.name;

        this.scene.add(newMesh);
        meshs.push(newMesh);
        this.pushMeshInArrayOfTwoDText(newMesh, 'THREEDMODEL', this.props.uploadedThreeDModel.id);

        this.addDragControl();
        this.transformControl.attach(newMesh);
      });
    }
  };
}

};

This is my code for uploading OBJLoader and MTLLoader.
then I will change value of scale using slider and then I will set that scale in object.
and try to render object. but 3D model will not change.

4

This code will only run once as soon as the model is loaded. So as I understand, you are loading the model (here it fires once) and then you use a slider to set the scale value afterwards? You need to have this code in a function to call when the slider event is fired.

5

@Fluqz
Yeah, I also tried to put this snippet in function which will execute when slider will change.
but 3D Model scale is not render or change !

handleScaleSliderChange = (event, value) => {
this.setState(
{
…this.state,
iacContentObject: {
…this.state.iacContentObject,
contentSizeSliderValue: value
}
},
() => {
this.newMesh.scale.set(
this.state.iacContentObject.scale.x === 1 ? 20 : this.state.iacContentObject.scale.x,
this.state.iacContentObject.scale.y === 1 ? 20 : this.state.iacContentObject.scale.y,
this.state.iacContentObject.scale.z === 1 ? 20 : this.state.iacContentObject.scale.z
);
// this.renderCanvas();
// this.renderer.render(this.scene, this.camera);
}
);
};