Как Zoom`ить объекты на сцене, а не Gizmo (как в 3DS Max) в Three.js?

Question

[sozercanie_kosmosa]

Gizmo - элемент управления привязка которого делается к определенной опорной точке объекта. За Gizmo можно перетаскивать, вращать и масштабировать объект (прямая аналогия с 3DSM, Maya и им подобным)

Есть две сцены на одной находятся объекты (кубы, шары ...) на другой объекты Gizmo (точнее он один больше и не требуется).

Как сделать так что бы объекты на обоих сценах при изменении положения (перенос, поворот, Zoom...) камеры, вели себя как всегда, лишь с тем отличием что приближение и удаление камеры не сказывалось на объектах второй сцены т.е. объектах Gizmo?

Другими словами, чтобы Gizmo не Scale'лся и не Zoom'ился

-------------------

updateWorld: function(){

        this.orbitCameraControl.update(); // обновляем контроллер камеры(OrbitControls.js)

        this.renderer.clear();
        this.renderer.render(this.sceneObject, this.camera); // рендерим сцену с объектами
        this.renderer.clear(false, true, false); 
        this.renderer.render(this.sceneGizmo, this.camera);  // рендерим сцену с Gizmo
    }

на второй картинке видно, что при приближении камеры размер объектов обеих сцен меняется. Все правильно, но мне нужно чтобы размер Gizmo(2-я сцена) при zoom'е не изменялся.

Comments

[trushka]

Непонятно немного.. Хотя бы кусок кода.. Я так понимаю, Gizmo нужен для управления первой сценой?

Answer 1

[sozercanie_kosmosa]

Помог с решением проблемы - @trushka

решение от @trushka:
делать таки с одной камерой и скалить Gizmo в зависимости от расстояния до неё. Ну вот, допустим
var base=1000 - расстояние до камеры, при котором Gizmo не скалится
Тогда при движении камеры если s - расстояние до точки просмотра:
Gizmo.scale.x=Gizmo.scale.y=Gizmo.scale.z=s/base;

var v1 = this.camera.position.clone();
    var v2 = Gizmo.position.clone();
    var len  = v1.sub(v2).length();
        
    var v = new THREE.Vector3(1,1,1);
    v.multiplyScalar(len/1039); // 1039 - расстояние от камеры до точки просмотра
    Gizmo.applyMatrix(obj.mLocal.clone().scale(v));

.....
спустя какое то время пришло понимание что этот код работает несколько не правильно
так как при большом отдалении начинали высыпать баги фишки артефакты неизвестного характера, разбираться сними честно не хотелось. Собрав информацию с других ресурсов стало понятно, как решить данный вопрос.
собственно код:

var cameraPos = this.world.camera.position.clone();
var gizmoPos = E.select.mLocal.getPosition().clone();
cameraPos.sub( ( cameraPos.clone().sub( gizmoPos ) ).normalize().multiplyScalar( 1000 ) );

немного прокомментирую, находим направление камеры на Gizmo
так:
( cameraPos.clone().sub( gizmoPos ) ).normalize()
увеличиваем результат в 1000 раз
так:

.multiplyScalar( 1000 ) // это кстати удаление Gizmo от камеры

и вычитаем результат из позиции камеры.
cameraPos.sub( ... );
суть метода заключается в банальном удерживании камеры на равном расстоянии(1000) от камеры.

У меня все, благодарю за помощь.

Answer 2

[trushka]

Так надо и две камеры сделать, изначально с одинаковыми координатами, потом для каждой инициализировать свой OrbitControl, потом для того, который управляет 2-й камерой задать noZoom=true, а потом рендерить каждую сцену со своей камерой
типа:

control1= new THREE.OrbitControls( camera1 );
control2 = new THREE.OrbitControls( camera2);
control2.noZoom=true;
....................................
updateWorld: function(){

       control1.update();  control2.update(); // обновляем контроллеры камер(OrbitControls.js)

        this.renderer.clear();
        this.renderer.render(this.sceneObject, this.camera1); // рендерим сцену с объектами
        this.renderer.clear(false, true, false); 
        this.renderer.render(this.sceneGizmo, this.camera2);  // рендерим сцену с Gizmo
    }

По идее, должно работать)))

Comments

[sozercanie_kosmosa]

все так и делал, но получается такая штука:
выделяю нужную кость, появляется Gizmo

потом приближаю камеру

но Gizmo съезжает вниз, в общем не получается (((

[trushka]

Ну да, это я не учёл немного.. Просто не пользовался этой штукой, в смысле OrbitControls.js - вращал и зуммил непосредственно объекты.. Тогда, может, сделать такой вариант: делать таки с одной камерой и скалить Gizmo в зависимости от расстояния до неё. Ну вот, допустим
var base=1000 - расстояние до камеры, при котором Gizmo не скалится
Тогда при движении камеры если s - расстояние до точки просмотра:
Gizmo.scale.x=Gizmo.scale.y=Gizmo.scale.z=s/base;

[sozercanie_kosmosa]

@trushka, все вроде бы как хорошо
выделяем объект, появляется Gizmo:

делаю Zoom, все замечательно:

но теперь при переносе точки просмотра возникают искажения:

так же искажения возникают при Zoom'ировании из определенных положении камеры:

не получилось ((( может быть я что то не так сделал?

делал так:

var v1 = this.camera.position.clone();
	var v2 = this.orbitControl.target.clone();
	var len  = v1.sub(v2).length();
		
	var v = new THREE.Vector3(1,1,1);
	v.multiplyScalar(len/1039); // 1039 - расстояние от камеры до точки просмотра
	Gizmo.applyMatrix(obj.mLocal.clone().scale(v));

Answer 3

[sozercanie_kosmosa]

@trushka, все вроде бы как хорошо
выделяем объект, появляется Gizmo:

делаю Zoom, все замечательно:

но теперь при переносе точки просмотра возникают искажения:

так же искажения возникают при Zoom'ировании из определенных положении камеры:

не получилось ((( может быть я что то не так сделал?

делал так:

var v1 = this.camera.position.clone();
	var v2 = this.orbitControl.target.clone();
	var len  = v1.sub(v2).length();
		
	var v = new THREE.Vector3(1,1,1);
	v.multiplyScalar(len/1039); // 1039 - расстояние от камеры до точки просмотра
	Gizmo.applyMatrix(obj.mLocal.clone().scale(v));

Comments

[trushka]

а зачем с orbitControl.target что-то мутить? Нам же нужно только расстояние от gizmo до камеры, независимо от того, куда она смотрит.. то есть

var v1 = this.camera.position.clone().sub(Gizmo.position); // вычитаем из позиции камеры позицию gizmo
    var len  = v1.length();
    with (Gizmo.scale) {x=y=z=len/1039}

[sozercanie_kosmosa]

@trushka, огрмная благодарность с моей стороны! Да ошибка у меня довольно глупая, просто мысль замылилась )))