Does anyone know why clamp position isn't working in this code?

Questions
, ,
1

Attempting to clamp the position of this rubber ball such that when dragged, it doesn’t go that far. Currently can be dragged all the way to the sides of the screen. I’d like it to move quite a bit less than that. I don’t get any errors when I run this, but the clamp doesn’t appear to work. What have I done wrong?


let g_camera, g_scene, g_renderer;
let g_canvaContainer, g_controls;
let g_goalMesh;
let g_goalMeshPrevious = new THREE.Vector3(0,0,0);
let g_jiggleVertMesh;
let g_jiggleVertPrevious = new THREE.Vector3(0,0,0);
const renderer = new THREE.WebGLRenderer({ alpha: true });
let DatGuiContext = function () {

this.damping = 0.01;
this.stifness = 0.05;    
this.jiggleButton = jiggleButtonCallback;

};
let g_datGuiContext = new DatGuiContext();

window.addEventListener(“load”, jigglePointV1InitUI);

function jigglePointV1InitUI()
{
setValue();

if(true)
{
}

};

function setValue()
{
g_goalMesh.position.set(0,0,0);
g_jiggleVertMesh.position.set(0,0,0);
g_jiggleVertPrevious = new THREE.Vector3(0,0,0);
g_goalMeshPrevious = new THREE.Vector3(0,0,0);
}

function jiggleButtonCallback(){
g_goalMesh.position.set(0,0,0);
g_jiggleVertMesh.position.set(0,0,0);
g_jiggleVertPrevious = new THREE.Vector3(0,0,0);
g_goalMeshPrevious = new THREE.Vector3(0,0,0);
}

function init_scene()
{
let container = document.createElement(‘div’);
document.body.appendChild(container);

g_camera = new THREE.PerspectiveCamera(50, innerWidth / innerHeight, 1, 150);
g_camera.position.set(10, 100, 140);    
g_scene = new THREE.Scene();
g_scene.background = null;


let light2 = new THREE.DirectionalLight(0xbbbbbb);
light2.position.set(0, 200, 100);
light2.castShadow = false;
g_scene.add(light2);
g_renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
g_renderer.setPixelRatio(window.devicePixelRatio);
g_renderer.setSize(innerWidth, innerHeight);
g_renderer.shadowMap.enabled = false; 
document.body.style.margin = 0;
document.body.style.padding = 0;
document.body.style.position = 'fixed';
container.appendChild(g_renderer.domElement);

g_controls = new /*THREE.*/OrbitControls(g_camera, g_renderer.domElement);

}

function init()
{

init_scene();  

let draggableObjects = [];

let sphereGeometry = new THREE.SphereBufferGeometry(1.0, 50, 50);    
{
    let invertEllipsoid = false;
    let material = new THREE.MeshLambertMaterial({
		map: new THREE.TextureLoader().load(
    		'https://i.imgur.com/EW7s2zy.jpeg'
    )
});

    g_jiggleVertMesh = new THREE.Mesh(sphereGeometry, material);
    g_jiggleVertMesh.scale.set(50, 50, 50);
    g_jiggleVertMesh.castShadow = false;
    g_jiggleVertMesh.renderOrder = 0;
    g_scene.add(g_jiggleVertMesh);

    g_jiggleVertPrevious.copy( g_jiggleVertMesh.position );
}

let bone = new THREE.MeshPhongMaterial({             color: 0x777777, 
        transparent: true, 
        opacity: 0,  
        depthWrite: false });
g_goalMesh = new THREE.Mesh(sphereGeometry, bone);   
g_goalMesh.scale.set(40, 40, 40);
g_goalMesh.position.set(0, 0, 0);
g_goalMesh.castShadow = false;
g_goalMesh.userData.limit = {
min: new THREE.Vector3(-5, 0, -5),

max: new THREE.Vector3(5, 0, 5)
};
g_goalMesh.userData.update = function(){
g_goalMesh.position.clamp(g_goalMesh.userData.limit.min, g_goalMesh.userData.limit.max);
}
g_scene.add(g_goalMesh);
draggableObjects.push( g_goalMesh );

let dragControls = new DragControls(draggableObjects, g_camera, g_renderer.domElement);
dragControls.addEventListener('dragstart', function () {
    g_controls.enabled = false;      
});
dragControls.addEventListener('dragend', function () {
    g_controls.enabled = false;
});

}

function onWindowResize() {
g_camera.aspect = innerWidth / innerHeight;
g_camera.updateProjectionMatrix();
g_renderer.setSize(innerWidth, innerHeight);
}

function getPosition( pos ) {
return new THREE.Vector3(pos.x, pos.y, pos.z);
}

function animate()
{
let damping = 0.04;
let stifness = 0;
damping = g_datGuiContext.damping;
stifness = g_datGuiContext.stifness;

{ 

    let currentPosition = getPosition( g_jiggleVertMesh.position );       
    let V = getPosition( g_jiggleVertMesh.position );    

    V.sub( g_jiggleVertPrevious );        

    V.multiplyScalar(1.0 - damping); 

    g_jiggleVertMesh.position.add( V );   
    
    let goal = getPosition( g_goalMesh.position );    
    goal.sub( g_jiggleVertMesh.position );        

    goal.multiplyScalar( stifness );    
    
    g_jiggleVertMesh.position.add( goal );      

    g_jiggleVertPrevious.copy( currentPosition );     
  
    let OriginalPos = getPosition( g_goalMesh.position );
  
    g_goalMesh.position.sub( OriginalPos );   

}

requestAnimationFrame(animate);
g_renderer.render(g_scene, g_camera);    

}

init();
animate();

Here’s where I placed the clamp:

let bone = new THREE.MeshPhongMaterial({             color: 0x777777, 
        transparent: true, 
        opacity: 0,  
        depthWrite: false });
g_goalMesh = new THREE.Mesh(sphereGeometry, bone);   
g_goalMesh.scale.set(40, 40, 40);
g_goalMesh.position.set(0, 0, 0);
g_goalMesh.castShadow = false;
g_goalMesh.userData.limit = {
min: new THREE.Vector3(-5, 0, -5),

max: new THREE.Vector3(5, 0, 5)
};
g_goalMesh.userData.update = function(){
g_goalMesh.position.clamp(g_goalMesh.userData.limit.min, g_goalMesh.userData.limit.max);
}
g_scene.add(g_goalMesh);
draggableObjects.push( g_goalMesh );
2

Maybe I overlooked, but where and when do you call the function?

1 Like
3

I’m not actually sure I did haha. Where should I place it?

4

I don’t know. This is your code :slight_smile:
Maybe in the animation loop, or in the drag event of DragControls. I’d start with the last one.

5

Apologies the clamping is something I added from here:

I just am not sure I added it right. And thank you for being patient with me, I’m still learning.

If I understand right, I still need to add the part where I call the function because it’s missing? I’m also realizing you’re the poster I got this from in that thread too!

6

Try to add this:

  dragControls.addEventListener("drag", () => {
    g_goalMesh.userData.update();
  });
2 Likes
7

Thank you! This worked!

1 Like