"control.setRotationSnap" TransformControls.js (Three.js) 中的功能无法正常工作

Question

我试图让“TransformControls.js”脚本中的“control.setRotationSnap”功能正常工作，但不幸的是它没有。

在做我的研究时，我刚刚发现有人编写代码可能还没有完全包含在内... (https://discourse.threejs.org/t/transform-controls-rotation-snapping/8632)

我尝试使用该功能的当前代码：

let renderer, scene, camera, light1, light2, light3, orbit, control, texture, material, loader, mesh;

let renderer = new THREE.WebGLRenderer();
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 3000);
let light1 = new THREE.DirectionalLight(0xfffffe, 2);
let light2 = new THREE.DirectionalLight(0xfffeff, 1.75);
let light3 = new THREE.DirectionalLight(0xfeffff, 0.75);
let orbit = new THREE.OrbitControls(camera, renderer.domElement);
let control = new THREE.TransformControls(camera, renderer.domElement);
let material = new THREE.MeshPhongMaterial({ color: 0x888888, specular: 0x111111, shininess: 2 });
let loader = new THREE.STLLoader();

// renderer
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// scene
scene.add(new THREE.GridHelper(500, 50));

// camera
camera.position.set(0, 25, 100);
camera.lookAt(0, 0, 0);

// light
light1.position.y = +10;
light1.position.x = +10;
light1.position.z = +10;
light2.position.y = 0;
light2.position.x = -10;
light2.position.z = -10;
light3.position.y = -10;
light3.position.x = 0;
light3.position.z = 0;
scene.add(light1);
scene.add(light2);
scene.add(light3);

// orbit
orbit.update();
orbit.addEventListener('change', render);

// control
control.addEventListener('change', render);
control.addEventListener('dragging-changed', function (event) {
    orbit.enabled = !event.value;
});

// loader
loader.load('./stl/1.stl', function (geometry) {

    // mesh
    mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(0, 0, 0);
    scene.add(mesh);

    // control
    control.attach(mesh);
    scene.add(control);

    render();
});

// window resize
window.addEventListener('resize', onWindowResize, false);
// key controls
window.addEventListener('keydown', function (event) {
    switch (event.keyCode) {
        case 81: // Q
            control.setSpace(control.space === "local" ? "world" : "local");
            break;
        case 17: // Ctrl
            control.setTranslationSnap(10);
// ************************* THIS LINE BETWEEN ISN'T WORKING AT ALL *************************
            control.setRotationSnap(Math.degToRad(90));
// ************************* THIS LINE BETWEEN ISN'T WORKING AT ALL *************************
            break;
        case 87: // W
            control.setMode("translate");
            break;
        case 69: // E
            control.setMode("rotate");
            break;
        case 82: // R
            control.setMode("scale");
            break;
        case 187:
        case 107: // +, =, num+
            control.setSize(control.size + 0.1);
            break;
        case 189:
        case 109: // -, _, num-
            control.setSize(Math.max(control.size - 0.1, 0.1));
            break;
        case 88: // X
            control.showX = !control.showX;
            break;
        case 89: // Y
            control.showY = !control.showY;
            break;
        case 90: // Z
            control.showZ = !control.showZ;
            break;
        case 32: // Spacebar
            control.enabled = !control.enabled;
            break;
    }
});
// key controls (2)
window.addEventListener('keyup', function (event) {
    switch (event.keyCode) {
        case 17: // Ctrl
            control.setTranslationSnap(null);
            control.setRotationSnap(null);
            break;
    }
});
render();


// FUNCTION window resize
function onWindowResize() {
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    render();
}
// FUNCTION render
function render() {
    renderer.render(scene, camera);
}

这些是 TransformControls.js 脚本中实现旋转捕捉功能的代码行：

// Apply rotation snap

if ( this.rotationSnap ) rotationAngle = Math.round( rotationAngle / this.rotationSnap ) * this.rotationSnap;

    this.rotationAngle = rotationAngle;

仅此而已...

我想要实现的目标：“control.setRotationSnap”应该让 3D 对象 (STL) 以 90 度的步长捕捉...

如果我尝试使用它，它根本不起作用。

也许有人有同样的问题？

此致，里昂

Answer 1

当然，解决方案比我想象的要简单得多...

它根本不起作用的原因是因为“TransformControls.js”脚本不包含他们在示例代码中使用的“Math.degToRad”函数。

只需粘贴这一小段代码：

// Converts from degrees to radians.
Math.degToRad = function (degrees) {
    return degrees * Math.PI / 180;
};

加入你的，它将尽可能完美地工作！

Answer 2

带捕捉的原始示例在这里： https://github.com/mrdoob/three.js/blob/master/examples/misc_controls_transform.html

看起来您现在应该使用代码：

case 16: // Shift
  control.setTranslationSnap( 100 );
  control.setRotationSnap( THREE.Math.degToRad( 15 ) );
  control.setScaleSnap( 0.25 );
  break;

"control.setRotationSnap" TransformControls.js (Three.js) 中的功能无法正常工作

"control.setRotationSnap" functionality in TransformControls.js (Three.js) not working

javascript

math

controls

rotation

three.js