Hi,
I have been trying to create a scaling feature in my project and then implmenet DragControls on that. I am attaching the script as well as the screenshots below. To scale the project, I have used a normalization factor (nf in the script) and I am normalizing the following
- Object Sizes
- Object Positions
- Camera Positions (Perspective Camera)
- Camera Near and Far Plane
I then execute a function which will implement dragcontrols whenever my mouse pointer goes on top of an object, else dragcontrols will not be enabled. On every ‘mousemove’ activity, the function will check if the raycaster is intersecting the object and if yes, then dragcontrols will be enabled.
This works perfectly when nf = 1 and works erratically till about nf = 6. From this point, it stops working altogether. The dragcontrols and never enabled and raycaster doesn’t intersect any object. I think the issue is related to normalization of mouse vectors, but I can’t nail it down. Any help here will be appreciated. Attaching screenshots as well as the script. Uses three.js and DragControls.js
DragControls working for nf = 1
DragControls not working for nf = 10
var nf = 10;
var scene = new THREE.Scene();
scene.background = new THREE.Color("rgb(40,40,40)");
var near = 0.1/nf;
var far = 100/nf;
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, near,far);
var renderer = new THREE.WebGLRenderer();
var ambientlight = new THREE.AmbientLight(0xFFFFFF);
scene.add(ambientlight);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.BoxBufferGeometry(10/nf,10/nf,10/nf);
var material = new THREE.MeshStandardMaterial({color: 0xFF0000});
var camerax = 40/nf;
var cameray = 40/nf;
var cameraz = 40/nf;
camera.position.set(camerax, cameray, cameraz);
camera.lookAt(0,0,0);
renderer.render(scene, camera);
var mouse = new THREE.Vector2();
var raycaster = new THREE.Raycaster();
var objects = [];
//First Group Geometry
var mesh = new THREE.Mesh(geometry, material);
var mesh2 = new THREE.Mesh(geometry, material);
mesh2.position.x = 20/nf;
var grid = new THREE.Group();
grid.add(mesh);
grid.add(mesh2);
var gridbox = new THREE.Box3();
var gridhelper = new THREE.BoxHelper(grid, 0xf0f2f5);
gridbox.setFromObject(grid);
scene.add(grid);
scene.add(gridbox);
scene.add(gridhelper);
//Second Group Geometry
var mesh3 = new THREE.Mesh(geometry, material);
var mesh4 = new THREE.Mesh(geometry, material);
var grid2 = new THREE.Group();
mesh4.position.x = 20/nf;
grid2.add(mesh3);
grid2.add(mesh4);
grid2.position.y = 20/nf;
var gridbox2 = new THREE.Box3();
var gridhelper2 = new THREE.BoxHelper(grid2, 0xf0f2f5);
gridbox2.setFromObject(grid2);
scene.add(grid2);
scene.add(gridbox2);
scene.add(gridhelper2);
function highlight(){
window.addEventListener('mousemove', highlightedobject);
function highlightedobject(event){
mouse.x = (event.clientX / window.innerWidth)*2 - 1;
mouse.y = -(event.clientY / window.innerHeight)*2 + 1;
document.getElementById("mouseco").innerHTML = event.clientX + "," + event.clientY;
raycaster.setFromCamera(mouse,camera);
var intersects = raycaster.intersectObjects(scene.children, true);
if(typeof intersects[0] !== 'undefined' && intersects[0].object.parent.type === 'Group'){
objects.push(intersects[0].object.parent);
var controls = new THREE.DragControls(objects, camera, renderer.domElement);
controls.enabled = true;
controls.addEventListener('dragstart', function(event){
console.log("Start")
gridhelper.update();
gridbox.setFromObject(grid);
gridhelper2.update();
gridbox2.setFromObject(grid2);
});
controls.addEventListener('dragend', function(event){
console.log("End");
objects = [];
intersects = [];
});
}
else{
console.log("Yo Mama");
objects = [];
intersects = [];
}
objects = [];
intersects = [];
}
}
function animate() {
renderer.render( scene, camera );
requestAnimationFrame( animate );
gridhelper.update();
gridbox.setFromObject(grid);
gridhelper2.update();
gridbox2.setFromObject(grid2);
}
animate();
highlight();