Some time I can’t take proper control of the Object.
When i cleary the cached then after check then the object control not take proper work, may be some time only move the control not move object sometime not move…
// canvas initialization
async init() {
await this.addScene();
await this.addRenderer();
await this.addCamera();
await this.addLight();
await this.addGridHelper();
await this.addControl();
await setTimeout(() => {
this.addTransformControl();
this.addDragControl();
this.renderCanvas();
}, 500);
}
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);
}
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.transformControlChangeRef = this.renderCanvas.bind(this);
this.transformcontrols.addEventListener('change', this.transformControlChangeRef);
this.transformcontrolMouseDownRef = () => {
this.orbitcontrols.enabled = false;
};
this.transformcontrols.addEventListener('mouseDown', this.transformcontrolMouseDownRef);
this.transformcontrolMouseUpRef = () => {
this.orbitcontrols.enabled = true;
this.getObjectPosition();
this.getObjectRotation();
this.getObjectScale();
};
this.transformcontrols.addEventListener('mouseUp', this.transformcontrolMouseUpRef);
this.scene.add(this.transformcontrols);
}
addDragControl() {
this.dragControls = new DragControls(this.objects, this.camera, this.renderer.domElement);
this.dragControls.enabled = true;
this.dragcontrolRef = this.onHoverObject.bind(this);
this.dragControls.addEventListener('hoveron', this.dragcontrolRef);
}
renderCanvas() {
this.renderer.render(this.scene, this.camera);
}
async onHoverObject(event) {
const hoveredObject = event.object;
if (hoveredObject.isMesh || hoveredObject.isValidHoverObject) {
if (hoveredObject !== this.transformcontrols && hoveredObject !== this.orbitcontrols) {
this.delayHideTransform();
setTimeout(() => {
this.transformcontrols.attach(hoveredObject);
this.activatedObject = hoveredObject;
this.resetPanel();
this.isAttached = true;
}, 500);
this.getObjectPosition();
this.getObjectRotation();
this.getObjectScale();
this.getMaterial();
if (hoveredObject.name == 'text') {
this.getTextGeometry();
this.textEditor = true;
}
await this.cancelHideTransorm();
}
}
}
<button id="posX_dec" (mousedown)="timeoutStop();continousDecrement('posX',-200,1,'position');"
(mouseup)="timeoutStop();" (mouseleave)="timeoutStop();" [disabled]="posX <= -200"><svg
version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 20"
style="enable-background:new 0 0 100 20;" xml:space="preserve">
<style type="text/css">
.st-minus0 {
fill: #FFFFFF;
}
</style>
<rect class="st-minus0" width="100" height="20" />
</svg></button>
continousDecrement(propetyType, min, step, propName) {
if (this[propetyType] != min) {
this[propetyType] = Number(this[propetyType]) - step;
this.callFunctionAsPerProperty(propName);
}
this.counterInterval = setTimeout(() => {
this.continousDecrement(propetyType, min, step, propName)
}, 150);
}
callFunctionAsPerProperty(propType){
switch(propType){
case "text":
this.refreshText();
break;
case "material":
this.makeMaterial(true);
break;
case "position":
this.changePosition();
break;
case "rotation":
this.changeRotation();
break;
case "scale":
this.changeScale();
break;
}
}
changePosition() {
if (this.activatedObject) {
if (this.posX == null) {
this.posX = this.prevPosX;
}
if (this.posY == null) {
this.posY = this.prevPosY;
}
if (this.posZ == null) {
this.posZ = this.prevPosZ;
}
this.posX = this.prevPosX = this.checkLimitBeforeApplyForInputSlider(Math.round(this.posX), 200, -200);
this.posY = this.prevPosY = this.checkLimitBeforeApplyForInputSlider(Math.round(this.posY), 200, -200);
this.posZ = this.prevPosZ = this.checkLimitBeforeApplyForInputSlider(Math.round(this.posZ), 200, -200);
if (_.isNumber(this.posX) && _.isNumber(this.posY) && _.isNumber(this.posZ)) {
this.activatedObject.position.set(this.posX / 10, this.posY / 10, this.posZ / 10)
}
this.renderCanvas();
}
}