|
@@ -2,16 +2,6 @@
|
|
import * as THREE from "../../libs/three.js/build/three.module.js";
|
|
import * as THREE from "../../libs/three.js/build/three.module.js";
|
|
import {Utils} from "../utils.js";
|
|
import {Utils} from "../utils.js";
|
|
|
|
|
|
-
|
|
|
|
-
|
|
|
|
-//add-------------------------------------
|
|
|
|
-const OpaWhenNotSelect = 0.75
|
|
|
|
-const ScaleRatio = 4
|
|
|
|
-const OutlineColor = 0x666666
|
|
|
|
-//----------------------------------------
|
|
|
|
-
|
|
|
|
-
|
|
|
|
-
|
|
|
|
export class TransformationTool {
|
|
export class TransformationTool {
|
|
constructor(viewer) {
|
|
constructor(viewer) {
|
|
this.viewer = viewer;
|
|
this.viewer = viewer;
|
|
@@ -37,9 +27,9 @@ export class TransformationTool {
|
|
|
|
|
|
});
|
|
});
|
|
|
|
|
|
- let red = Potree.config.axis.x.color
|
|
|
|
- let green = Potree.config.axis.y.color
|
|
|
|
- let blue = Potree.config.axis.z.color
|
|
|
|
|
|
+ let red = 0xE73100;
|
|
|
|
+ let green = 0x44A24A;
|
|
|
|
+ let blue = 0x2669E7;
|
|
|
|
|
|
this.activeHandle = null;
|
|
this.activeHandle = null;
|
|
this.scaleHandles = {
|
|
this.scaleHandles = {
|
|
@@ -125,14 +115,14 @@ export class TransformationTool {
|
|
|
|
|
|
let material = new THREE.MeshBasicMaterial({
|
|
let material = new THREE.MeshBasicMaterial({
|
|
color: handle.color,
|
|
color: handle.color,
|
|
- opacity: OpaWhenNotSelect,
|
|
|
|
|
|
+ opacity: 0.4,
|
|
transparent: true
|
|
transparent: true
|
|
});
|
|
});
|
|
|
|
|
|
let outlineMaterial = new THREE.MeshBasicMaterial({
|
|
let outlineMaterial = new THREE.MeshBasicMaterial({
|
|
- color: OutlineColor,
|
|
|
|
|
|
+ color: 0x000000,
|
|
side: THREE.BackSide,
|
|
side: THREE.BackSide,
|
|
- opacity: OpaWhenNotSelect,
|
|
|
|
|
|
+ opacity: 0.4,
|
|
transparent: true});
|
|
transparent: true});
|
|
|
|
|
|
let pickMaterial = new THREE.MeshNormalMaterial({
|
|
let pickMaterial = new THREE.MeshNormalMaterial({
|
|
@@ -141,18 +131,18 @@ export class TransformationTool {
|
|
visible: this.showPickVolumes});
|
|
visible: this.showPickVolumes});
|
|
|
|
|
|
let sphere = new THREE.Mesh(sgSphere, material);
|
|
let sphere = new THREE.Mesh(sgSphere, material);
|
|
- sphere.scale.set(2, 2, 2 );
|
|
|
|
|
|
+ sphere.scale.set(1.3, 1.3, 1.3);
|
|
sphere.name = `${handleName}.handle`;
|
|
sphere.name = `${handleName}.handle`;
|
|
node.add(sphere);
|
|
node.add(sphere);
|
|
|
|
|
|
let outline = new THREE.Mesh(sgSphere, outlineMaterial);
|
|
let outline = new THREE.Mesh(sgSphere, outlineMaterial);
|
|
- outline.scale.set(1.1, 1.1, 1.1);
|
|
|
|
|
|
+ outline.scale.set(1.4, 1.4, 1.4);
|
|
outline.name = `${handleName}.outline`;
|
|
outline.name = `${handleName}.outline`;
|
|
sphere.add(outline);
|
|
sphere.add(outline);
|
|
|
|
|
|
let pickSphere = new THREE.Mesh(sgLowPolySphere, pickMaterial);
|
|
let pickSphere = new THREE.Mesh(sgLowPolySphere, pickMaterial);
|
|
pickSphere.name = `${handleName}.pick_volume`;
|
|
pickSphere.name = `${handleName}.pick_volume`;
|
|
- pickSphere.scale.set(1.5, 1.5, 1.5);
|
|
|
|
|
|
+ pickSphere.scale.set(3, 3, 3);
|
|
sphere.add(pickSphere);
|
|
sphere.add(pickSphere);
|
|
pickSphere.handle = handleName;
|
|
pickSphere.handle = handleName;
|
|
this.pickVolumes.push(pickSphere);
|
|
this.pickVolumes.push(pickSphere);
|
|
@@ -182,7 +172,7 @@ export class TransformationTool {
|
|
});
|
|
});
|
|
|
|
|
|
pickSphere.addEventListener("mouseleave", e => {
|
|
pickSphere.addEventListener("mouseleave", e => {
|
|
- //node.setOpacity(OpaWhenNotSelect);
|
|
|
|
|
|
+ //node.setOpacity(0.4);
|
|
});
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -255,7 +245,7 @@ export class TransformationTool {
|
|
|
|
|
|
let pickSphere = new THREE.Mesh(sgLowPolySphere, pickMaterial);
|
|
let pickSphere = new THREE.Mesh(sgLowPolySphere, pickMaterial);
|
|
pickSphere.name = `${handleName}.pick_volume`;
|
|
pickSphere.name = `${handleName}.pick_volume`;
|
|
- pickSphere.scale.set(2, 2, 2);
|
|
|
|
|
|
+ pickSphere.scale.set(3, 3, 3);
|
|
box.add(pickSphere);
|
|
box.add(pickSphere);
|
|
pickSphere.handle = handleName;
|
|
pickSphere.handle = handleName;
|
|
this.pickVolumes.push(pickSphere);
|
|
this.pickVolumes.push(pickSphere);
|
|
@@ -303,7 +293,7 @@ export class TransformationTool {
|
|
});
|
|
});
|
|
|
|
|
|
pickSphere.addEventListener("mouseleave", e => {
|
|
pickSphere.addEventListener("mouseleave", e => {
|
|
- //box.setOpacity(OpaWhenNotSelect);
|
|
|
|
|
|
+ //box.setOpacity(0.4);
|
|
});
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -318,13 +308,13 @@ export class TransformationTool {
|
|
|
|
|
|
let material = new THREE.MeshBasicMaterial({
|
|
let material = new THREE.MeshBasicMaterial({
|
|
color: handle.color,
|
|
color: handle.color,
|
|
- opacity: OpaWhenNotSelect,
|
|
|
|
|
|
+ opacity: 0.4,
|
|
transparent: true});
|
|
transparent: true});
|
|
|
|
|
|
let outlineMaterial = new THREE.MeshBasicMaterial({
|
|
let outlineMaterial = new THREE.MeshBasicMaterial({
|
|
- color: OutlineColor,
|
|
|
|
|
|
+ color: 0x000000,
|
|
side: THREE.BackSide,
|
|
side: THREE.BackSide,
|
|
- opacity: OpaWhenNotSelect,
|
|
|
|
|
|
+ opacity: 0.4,
|
|
transparent: true});
|
|
transparent: true});
|
|
|
|
|
|
let pickMaterial = new THREE.MeshNormalMaterial({
|
|
let pickMaterial = new THREE.MeshNormalMaterial({
|
|
@@ -335,7 +325,7 @@ export class TransformationTool {
|
|
|
|
|
|
let box = new THREE.Mesh(boxGeometry, material);
|
|
let box = new THREE.Mesh(boxGeometry, material);
|
|
box.name = `${handleName}.handle`;
|
|
box.name = `${handleName}.handle`;
|
|
- box.scale.set(1, 1, 36);
|
|
|
|
|
|
+ box.scale.set(0.2, 0.2, 40);
|
|
box.lookAt(new THREE.Vector3(...handle.alignment));
|
|
box.lookAt(new THREE.Vector3(...handle.alignment));
|
|
box.renderOrder = 10;
|
|
box.renderOrder = 10;
|
|
node.add(box);
|
|
node.add(box);
|
|
@@ -343,13 +333,13 @@ export class TransformationTool {
|
|
|
|
|
|
let outline = new THREE.Mesh(boxGeometry, outlineMaterial);
|
|
let outline = new THREE.Mesh(boxGeometry, outlineMaterial);
|
|
outline.name = `${handleName}.outline`;
|
|
outline.name = `${handleName}.outline`;
|
|
- outline.scale.set(1.3, 1.3, 1.01);
|
|
|
|
|
|
+ outline.scale.set(3, 3, 1.03);
|
|
outline.renderOrder = 0;
|
|
outline.renderOrder = 0;
|
|
box.add(outline);
|
|
box.add(outline);
|
|
|
|
|
|
let pickVolume = new THREE.Mesh(boxGeometry, pickMaterial);
|
|
let pickVolume = new THREE.Mesh(boxGeometry, pickMaterial);
|
|
pickVolume.name = `${handleName}.pick_volume`;
|
|
pickVolume.name = `${handleName}.pick_volume`;
|
|
- pickVolume.scale.set(4, 4, 1.1);
|
|
|
|
|
|
+ pickVolume.scale.set(12, 12, 1.1);
|
|
pickVolume.handle = handleName;
|
|
pickVolume.handle = handleName;
|
|
box.add(pickVolume);
|
|
box.add(pickVolume);
|
|
this.pickVolumes.push(pickVolume);
|
|
this.pickVolumes.push(pickVolume);
|
|
@@ -373,10 +363,10 @@ export class TransformationTool {
|
|
}
|
|
}
|
|
|
|
|
|
initializeRotationHandles(){
|
|
initializeRotationHandles(){
|
|
- let adjust = 1.5;
|
|
|
|
|
|
+ let adjust = 0.5;
|
|
let torusGeometry = new THREE.TorusGeometry(1, adjust * 0.015, 8, 64, Math.PI / 2);
|
|
let torusGeometry = new THREE.TorusGeometry(1, adjust * 0.015, 8, 64, Math.PI / 2);
|
|
- let outlineGeometry = new THREE.TorusGeometry(1, adjust * 0.018, 8, 64, Math.PI / 2);
|
|
|
|
- let pickGeometry = new THREE.TorusGeometry(1, adjust * 0.07, 6, 4, Math.PI / 2);
|
|
|
|
|
|
+ let outlineGeometry = new THREE.TorusGeometry(1, adjust * 0.04, 8, 64, Math.PI / 2);
|
|
|
|
+ let pickGeometry = new THREE.TorusGeometry(1, adjust * 0.1, 6, 4, Math.PI / 2);
|
|
|
|
|
|
for(let handleName of Object.keys(this.rotationHandles)){
|
|
for(let handleName of Object.keys(this.rotationHandles)){
|
|
let handle = this.handles[handleName];
|
|
let handle = this.handles[handleName];
|
|
@@ -385,16 +375,14 @@ export class TransformationTool {
|
|
|
|
|
|
let material = new THREE.MeshBasicMaterial({
|
|
let material = new THREE.MeshBasicMaterial({
|
|
color: handle.color,
|
|
color: handle.color,
|
|
- opacity: OpaWhenNotSelect,
|
|
|
|
- transparent: true
|
|
|
|
- });
|
|
|
|
|
|
+ opacity: 0.4,
|
|
|
|
+ transparent: true});
|
|
|
|
|
|
let outlineMaterial = new THREE.MeshBasicMaterial({
|
|
let outlineMaterial = new THREE.MeshBasicMaterial({
|
|
- color: OutlineColor,
|
|
|
|
|
|
+ color: 0x000000,
|
|
side: THREE.BackSide,
|
|
side: THREE.BackSide,
|
|
- opacity: OpaWhenNotSelect,
|
|
|
|
- transparent: true
|
|
|
|
- });
|
|
|
|
|
|
+ opacity: 0.4,
|
|
|
|
+ transparent: true});
|
|
|
|
|
|
let pickMaterial = new THREE.MeshNormalMaterial({
|
|
let pickMaterial = new THREE.MeshNormalMaterial({
|
|
opacity: 0.2,
|
|
opacity: 0.2,
|
|
@@ -404,7 +392,7 @@ export class TransformationTool {
|
|
|
|
|
|
let box = new THREE.Mesh(torusGeometry, material);
|
|
let box = new THREE.Mesh(torusGeometry, material);
|
|
box.name = `${handleName}.handle`;
|
|
box.name = `${handleName}.handle`;
|
|
- box.scale.set(30, 30, 30);
|
|
|
|
|
|
+ box.scale.set(20, 20, 20);
|
|
box.lookAt(new THREE.Vector3(...handle.alignment));
|
|
box.lookAt(new THREE.Vector3(...handle.alignment));
|
|
node.add(box);
|
|
node.add(box);
|
|
handle.translateNode = box;
|
|
handle.translateNode = box;
|
|
@@ -681,7 +669,7 @@ export class TransformationTool {
|
|
if(this.activeHandle === handle){
|
|
if(this.activeHandle === handle){
|
|
handle.node.setOpacity(1.0);
|
|
handle.node.setOpacity(1.0);
|
|
}else{
|
|
}else{
|
|
- handle.node.setOpacity(OpaWhenNotSelect)
|
|
|
|
|
|
+ handle.node.setOpacity(0.4)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@@ -691,7 +679,7 @@ export class TransformationTool {
|
|
if(this.activeHandle === handle){
|
|
if(this.activeHandle === handle){
|
|
handle.node.setOpacity(1.0);
|
|
handle.node.setOpacity(1.0);
|
|
}else{
|
|
}else{
|
|
- handle.node.setOpacity(OpaWhenNotSelect)
|
|
|
|
|
|
+ handle.node.setOpacity(0.4)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@@ -701,10 +689,10 @@ export class TransformationTool {
|
|
//if(this.activeHandle === handle){
|
|
//if(this.activeHandle === handle){
|
|
// handle.node.setOpacity(1.0);
|
|
// handle.node.setOpacity(1.0);
|
|
//}else{
|
|
//}else{
|
|
- // handle.node.setOpacity(OpaWhenNotSelect)
|
|
|
|
|
|
+ // handle.node.setOpacity(0.4)
|
|
//}
|
|
//}
|
|
|
|
|
|
- handle.node.setOpacity(OpaWhenNotSelect);
|
|
|
|
|
|
+ handle.node.setOpacity(0.4);
|
|
}
|
|
}
|
|
|
|
|
|
for(let handleName of Object.keys(this.scaleHandles)){
|
|
for(let handleName of Object.keys(this.scaleHandles)){
|
|
@@ -715,21 +703,21 @@ export class TransformationTool {
|
|
|
|
|
|
let relatedFocusHandle = this.focusHandles[handle.name.replace("scale", "focus")];
|
|
let relatedFocusHandle = this.focusHandles[handle.name.replace("scale", "focus")];
|
|
let relatedFocusNode = relatedFocusHandle.node;
|
|
let relatedFocusNode = relatedFocusHandle.node;
|
|
- relatedFocusNode.setOpacity(OpaWhenNotSelect);
|
|
|
|
|
|
+ relatedFocusNode.setOpacity(0.4);
|
|
|
|
|
|
for(let translationHandleName of Object.keys(this.translationHandles)){
|
|
for(let translationHandleName of Object.keys(this.translationHandles)){
|
|
let translationHandle = this.translationHandles[translationHandleName];
|
|
let translationHandle = this.translationHandles[translationHandleName];
|
|
- translationHandle.node.setOpacity(OpaWhenNotSelect);
|
|
|
|
|
|
+ translationHandle.node.setOpacity(0.4);
|
|
}
|
|
}
|
|
|
|
|
|
//let relatedTranslationHandle = this.translationHandles[
|
|
//let relatedTranslationHandle = this.translationHandles[
|
|
// handle.name.replace("scale", "translation").replace(/[+-]/g, "")];
|
|
// handle.name.replace("scale", "translation").replace(/[+-]/g, "")];
|
|
//let relatedTranslationNode = relatedTranslationHandle.node;
|
|
//let relatedTranslationNode = relatedTranslationHandle.node;
|
|
- //relatedTranslationNode.setOpacity(OpaWhenNotSelect);
|
|
|
|
|
|
+ //relatedTranslationNode.setOpacity(0.4);
|
|
|
|
|
|
|
|
|
|
}else{
|
|
}else{
|
|
- handle.node.setOpacity(OpaWhenNotSelect)
|
|
|
|
|
|
+ handle.node.setOpacity(0.4)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@@ -779,7 +767,7 @@ export class TransformationTool {
|
|
|
|
|
|
let ws = node.parent.getWorldScale(new THREE.Vector3());
|
|
let ws = node.parent.getWorldScale(new THREE.Vector3());
|
|
|
|
|
|
- let s = (ScaleRatio / pr);
|
|
|
|
|
|
+ let s = (7 / pr);
|
|
let scale = new THREE.Vector3(s, s, s).divide(ws);
|
|
let scale = new THREE.Vector3(s, s, s).divide(ws);
|
|
|
|
|
|
let rot = new THREE.Matrix4().makeRotationFromEuler(node.rotation);
|
|
let rot = new THREE.Matrix4().makeRotationFromEuler(node.rotation);
|