When I object rotation or Scalling with that control then why its change’s position also, See below Video
I want to below video result in my current code
In older packager version its perfect working but new version not work
Older Version: “^0.96.0”
Newer Version: “^0.167.1”,
This is my three js environment setup code
// canvas initialization
async init() {
await this.addScene();
await this.addRenderer();
await this.addCamera();
await this.addLight();
await this.addGridHelper();
await this.addControl();
await this.addTransformControl();
await this.addDragControl();
}
addScene() {
this.scene = new THREE.Scene();
}
addRenderer() {
this.renderer = new THREE.WebGLRenderer({
antialias: true,
canvas: this.canvas,
alpha: true,
});
// this.renderer.setClearColor(0xffffff, 1);
this.renderer.setPixelRatio(window.devicePixelRatio);
this.renderer.setSize(this.canvas.clientWidth, this.canvas.clientHeight);
}
addCamera() {
const aspectRatio = this.getAspectRatio();
this.camera = new THREE.PerspectiveCamera(45, aspectRatio, 0.1, 2000);
this.camera.position.set(0, 4, 6);
this.camera.lookAt(0, 0, 0);
}
addLight() {
var light;
this.scene.add(new THREE.AmbientLight(0x666666));
var lightobjgeo = new THREE.SphereGeometry(0.3, 4, 2);
var material = new THREE.MeshPhongMaterial({
color: new THREE.Color().setHSL(Math.random(), 1, 0.75),
flatShading: true,
specular: 0x111111,
shininess: 0
});
this.lightobj = new THREE.Mesh(lightobjgeo, material);
this.lightobj.position.set(2, 8, 4);
this.lightobj.name = 'light';
light = new THREE.DirectionalLight(0xdfebff, Math.PI * 2);
light.position.copy(this.lightobj.position);
light.castShadow = true;
light.shadow.mapSize.width = 1500;
light.shadow.mapSize.height = 1500;
light.shadow.camera.near = 0.5;
light.shadow.camera.far = 500;
this.lightobj.add(light);
this.scene.add(this.lightobj);
this.updateObjectList();
}
copyValue(tmp) {
var dummy = document.createElement("input");
document.body.appendChild(dummy);
dummy.setAttribute("id", "dummy_id");
document.getElementById("dummy_id").setAttribute('value', tmp);
dummy.select();
document.execCommand("copy");
document.body.removeChild(dummy);
this.utils.showSuccess('Copied', false, 2000);
}
addGridHelper() {
this.ground = new THREE.GridHelper(40, 40);
this.ground.name = "ground";
this.scene.add(this.ground);
}
addControl() {
this.orbitcontrols = new OrbitControls(this.camera, this.renderer.domElement);
this.orbitcontrols.rotateSpeed = 1;
this.orbitcontrols.zoomSpeed = 2;
this.orbitcontrols.panSpeed = 1;
this.orbitcontrols.minDistance = 1;
this.orbitcontrols.maxDistance = 100;
this.orbitcontrols.enableKeys = false;
this.orbitcontrols.update();
this.orbitControlChangeRef = this.renderCanvas.bind(this);
this.orbitcontrols.addEventListener('change', this.orbitControlChangeRef);
}
addTransformControl() {
this.transformcontrols = new TransformControls(this.camera, this.renderer.domElement);
this.transformcontrols.addEventListener('change', this.renderCanvas.bind(this));
this.transformcontrols.addEventListener('mouseDown', () => {
this.orbitcontrols.enabled = false;
});
this.transformcontrols.addEventListener('mouseUp', () => {
this.orbitcontrols.enabled = true;
this.getObjectPosition();
this.getObjectRotation();
this.getObjectScale();
});
this.scene.add(this.transformcontrols);
}
addDragControl() {
// Filter only Mesh objects from the scene
const meshObjects = this.objects.filter(obj => obj instanceof THREE.Mesh);
// Initialize DragControls with filtered mesh objects
this.dragControls = new DragControls(meshObjects, this.camera, this.renderer.domElement);
this.dragControls.deactivate();
this.dragControls.activate();
// Add event listeners for hover effects
this.dragControls.addEventListener('hoveron', (e) => {
// Only apply wireframe effect if the object has material and is a Mesh
if (e.object instanceof THREE.Mesh && e.object.material) {
this.onHoverObject(e); // Call your custom hover logic
}
});
// Disable DragControls while TransformControls are active
this.transformcontrols.addEventListener('dragstart', () => {
this.dragControls.enabled = false;
});
this.transformcontrols.addEventListener('dragend', () => {
this.dragControls.enabled = true;
});
}
renderCanvas() {
this.renderer.render(this.scene, this.camera);
}
This is my Object Load From the API Code
loadStl(path) {
return new Promise(resolve => {
var that = this;
var loader = new STLLoader();
loader.load(path, function (geometry) {
geometry.center();
var material = new THREE.MeshPhongMaterial({ color: 0xff5533, specular: 0x111111, shininess: 100,flatShading: true });
var mesh = new THREE.Mesh(geometry, material);
mesh.name = "stl";
mesh.position.set(0, 0, 0);
mesh.rotation.set(0, 0, 0);
mesh.castShadow = true;
that.scene.add(mesh);
that.updateObjectList();
that.renderCanvas();
resolve(null);
});
});
}
This is my Hover Object Code
onHoverObject(event) {
this.delayHideTransform();
this.transformcontrols.attach(event.object);
this.activatedObject = event.object;
this.resetPanel();
this.isAttached = true;
// to get position rotation and scale value of hovered object
this.getObjectPosition();
this.getObjectRotation();
this.getObjectScale();
this.getMaterial();
if (this.activatedObject.name == 'text') {
this.getTextGeometry();
this.textEditor = true;
}
this.cancelHideTransorm();
}
This is my Rotation and Scalling Code
getObjectPosition() {
console.log("object Position Changes");
if (this.activatedObject) {
var x: number = Number(parseFloat(this.activatedObject.position.x).toFixed(1));
var y: number = Number(parseFloat(this.activatedObject.position.y).toFixed(1));
var z: number = Number(parseFloat(this.activatedObject.position.z).toFixed(1));
this.posX = Math.round(x * 10);
this.posY = Math.round(y * 10);
this.posZ = Math.round(z * 10);
if (this.posX > 200 || this.posX < -200) {
this.changePosition();
}
if (this.posY > 200 || this.posY < -200) {
this.changePosition();
}
if (this.posZ > 200 || this.posZ < -200) {
this.changePosition();
}
}
}
getObjectRotation() {
console.log("Object Rotation Changes");
if (this.activatedObject) {
var x: number = Number(parseFloat(this.activatedObject.rotation.x).toFixed(1));
var y: number = Number(parseFloat(this.activatedObject.rotation.y).toFixed(1));
var z: number = Number(parseFloat(this.activatedObject.rotation.z).toFixed(1));
this.degX = Math.round(x * 10);
this.degY = Math.round(y * 10);
this.degZ = Math.round(z * 10);
if (this.degX > 63 || this.degX < -63) {
this.changeRotation();
}
if (this.degY > 63 || this.degY < -63) {
this.changeRotation();
}
if (this.degZ > 63 || this.degZ < -63) {
this.changeRotation();
}
}
}
getObjectScale() {
if (this.activatedObject) {
var x: number = Number(parseFloat(this.activatedObject.scale.x).toFixed(1));
var y: number = Number(parseFloat(this.activatedObject.scale.y).toFixed(1));
var z: number = Number(parseFloat(this.activatedObject.scale.z).toFixed(1));
this.scaleX = Math.round(x * 10);
this.scaleY = Math.round(y * 10);
this.scaleZ = Math.round(z * 10);
if (this.scaleX > 100 || this.scaleX < 1) {
this.changeScale();
}
if (this.scaleY > 100 || this.scaleY < 1) {
this.changeScale();
}
if (this.scaleZ > 100 || this.scaleZ < 1) {
this.changeScale();
}
}
}