Hello professionals
I am trying to make a simple setup to position a selected box, but the orbitControls isn’t working right, when mousedown even triggers, a box is selected. regardless of where I click. I don’t know what am I doing wrong.
any help would be much appreciated.
Please see https://jsfiddle.net/jayeomer/rakdjzmb/2/
Well, it looks like that I fixed it, update https://jsfiddle.net/jayeomer/rakdjzmb/9/, the issue was click event on transform controls and mouse down on orbit controls, so I changed to dblclick to attach transform controls.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/controls/TransformControls.js"></script>
<style>
html,body {
width: 100vw;
height: 100vh;
padding: 0px;
margin: 0px;
}
#canvas {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
border: 1px solid #fbfbfb;
}
</style>
<title>Raycaster</title>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>
var renderer, scene, camera, orbitControls, transformControls, geometry, material, INTERSECTED, selected, selectedBox, selectedBoxHelper, hoverBox, hoverBoxHelper, showHoverBox = true;
const pointer = new THREE.Vector2();
let raycaster = new THREE.Raycaster();
var canvas = $("#canvas");
var width = canvas.width();
var height = canvas.height();
/*
____ ____ _ _ ____ ____ ____
| |__| |\/| |___ |__/ |__|
|___ | | | | |___ | \ | |
*/
camera = new THREE.PerspectiveCamera(90, width / height, 1, 1000);
camera.position.set(250, 50, 250);
function init() {
/*
____ ____ _ _ ___ ____ ____ ____ ____
|__/ |___ |\ | | \ |___ |__/ |___ |__/
| \ |___ | \| |__/ |___ | \ |___ | \
*/
renderer = new THREE.WebGLRenderer({
canvas: canvas[0],
antialias: true,
alpha: true
});
renderer.setSize(width, height);
/*
____ ____ ____ _ _ ____
[__ | |___ |\ | |___
___] |___ |___ | \| |___
*/
scene = new THREE.Scene();
/*
__ __ __ ___ __ ___ __
/ \ |__) |__) | | / | |__) |
\__/ | \ |__) | | \__ | | \ |__
*/
orbitControls = new THREE.OrbitControls( camera, renderer.domElement );
orbitControls.update();
orbitControls.addEventListener( 'change', render );
/*
___ ____ ____ _ _ ____ ____ ____ ____ _ _ ____ ___ ____ _
| |__/ |__| |\ | [__ |___ | | |__/ |\/| | | |__/ |
| | \ | | | \| ___] | |__| | \ | | |___ | | \ |___
*/
transformControls = new THREE.TransformControls( camera, renderer.domElement );
transformControls.size = 0.6;
transformControls.addEventListener( 'change', function ( event ) {
selectedBox.setFromObject(selected, true);
hoverBox.setFromObject(selected, true);
animate();
});
transformControls.addEventListener( 'dragging-changed', function ( event ) {
orbitControls.enabled = ! event.value;
});
transformControls.addEventListener('mouseDown', function () {
showHoverBox = false;
orbitControls.enabled = false;
});
transformControls.addEventListener('mouseUp', function () {
showHoverBox = true;
orbitControls.enabled = true;
});
setTranformKeys();
scene.add( transformControls );
/*
_ _ ____ _ _ ___
| | | __ |__| |
|___ | |__] | | |
*/
const light = new THREE.DirectionalLight(0xffffff, 0.5);
light.position.set(5, 10, 7.5);
scene.add(light);
/*
___ __ ___ __ __
|__| |__ | |__) |__ |__) /__`
| | |___ |___ | |___ | \ .__/
*/
selectedBox = new THREE.Box3();
selectedBox.setFromCenterAndSize(new THREE.Vector3(1, 1, 1), new THREE.Vector3(2, 1, 3));
selectedBoxHelper = new THREE.Box3Helper(selectedBox, 0x00ffff);
scene.add(selectedBoxHelper);
hoverBox = new THREE.Box3();
hoverBox.setFromCenterAndSize(new THREE.Vector3(1, 1, 1), new THREE.Vector3(2, 1, 3));
hoverBoxHelper = new THREE.Box3Helper(hoverBox, 0xffff00);
scene.add(hoverBoxHelper);
/*
____ ___ ___ ____ ___ _ ____ ____ ___ ____
|__| | \ | \ | | |__] | |___ | | [__
| | |__/ |__/ |__| |__] _| |___ |___ | ___]
*/
var g = new THREE.Group();
const geometry = new THREE.BoxGeometry(18, 6, 18, 3, 1);
for (var r = 0; r < 20; r++) {
for (var c = 0; c < 20; c++) {
const material = new THREE.MeshStandardMaterial({
color: 0xefefef
});
const cube = new THREE.Mesh(geometry, material);
var x = c * 24,
z = r * 24;
cube.position.set(x, 3, z);
g.add(cube);
}
}
scene.add(g);
}
/*
____ _ _ _ _ ____ ___ _ ____ _ _ ____
|___ | | |\ | | | | | | |\ | [__
| |__| | \| |___ | | |__| | \| ___]
*/
function setTranformKeys() {
$('#canvas').hover(function() {
this.focus();
}, function() {
this.blur();
});
$(window).keydown(function(event) {
switch ( event.keyCode ) {
case 81: // Q
transformControls.setSpace( transformControls.space === 'local' ? 'world' : 'local' );
break;
case 16: // Shift
transformControls.setTranslationSnap( 100 );
transformControls.setRotationSnap( THREE.MathUtils.degToRad( 15 ) );
transformControls.setScaleSnap( 0.25 );
break;
case 71: // G
transformControls.setMode( 'translate' );
break;
case 82: // R
transformControls.setMode( 'rotate' );
break;
case 83: // S
transformControls.setMode( 'scale' );
break;
case 67: // C
const position = currentCamera.position.clone();
currentCamera = currentCamera.isPerspectiveCamera ? camera : cameraPersp;
currentCamera.position.copy( position );
controls.object = currentCamera;
transformControls.camera = currentCamera;
currentCamera.lookAt( controls.target.x, controls.target.y, controls.target.z );
onWindowResize();
break;
case 86: // V
const randomFoV = Math.random() + 0.1;
const randomZoom = Math.random() + 0.1;
camera.fov = randomFoV * 160;
camera.bottom = - randomFoV * 500;
camera.top = randomFoV * 500;
cameraPersp.zoom = randomZoom * 5;
camera.zoom = randomZoom * 5;
onWindowResize();
break;
case 187:
case 107: // +, =, num+
transformControls.setSize( transformControls.size + 0.1 );
break;
case 189:
case 109: // -, _, num-
transformControls.setSize( Math.max( transformControls.size - 0.1, 0.1 ) );
break;
case 88: // X
transformControls.showX = ! transformControls.showX;
break;
case 89: // Y
transformControls.showY = ! transformControls.showY;
break;
case 90: // Z
transformControls.showZ = ! transformControls.showZ;
break;
case 32: // Spacebar
transformControls.enabled = ! transformControls.enabled;
break;
case 27: // Esc
transformControls.reset();
break;
}
});
}
function animate() {
requestAnimationFrame(animate);
orbitControls.update();
render();
}
function render() {
renderer.render(scene, camera);
}
$(document).ready(function() {
init();
animate();
$(document).on('mouseup', '#canvas', function(event) {
orbitControls.enabled = true;
});
$(document).on('dblclick', '#canvas', function(event) {
canvas = $(this);
pointer.x = (event.offsetX / canvas.width()) * 2 - 1;
pointer.y = -(event.offsetY / canvas.height()) * 2 + 1;
raycaster.setFromCamera(pointer, camera);
const all_intersects = raycaster.intersectObjects(scene.children, true);
const intersects = all_intersects.filter(function(x){return x.object.type=='Mesh' && x.object.parent.type !== 'TransformControlsGizmo' && x.object.parent.parent.type !== 'TransformControlsGizmo'});
console.log(intersects);
if (intersects.length > 0) {
selected = intersects[0].object;
transformControls.attach(selected);
selectedBox.setFromObject(INTERSECTED, true);
if (selectedBox.isEmpty() === false && selectedBoxHelper.visible == false) {
selectedBoxHelper.visible = true;
}
} else {
selectedBoxHelper.visible = false;
transformControls.detach(selected);
selected = null;
INTERSECTED = null;
}
});
$(document).on('mousemove', '#canvas', function(event) {
canvas = $(this);
pointer.x = (event.offsetX / canvas.width()) * 2 - 1;
pointer.y = -(event.offsetY / canvas.height()) * 2 + 1;
raycaster.setFromCamera(pointer, camera);
const all_intersects = raycaster.intersectObjects(scene.children, true);
const intersects = all_intersects.filter(function(x){return x.object.type=='Mesh' && x.object.parent.type !== 'TransformControlsGizmo' && x.object.parent.parent.type !== 'TransformControlsGizmo'});
if (intersects.length > 0) {
if (INTERSECTED != intersects[0].object) {
INTERSECTED = intersects[0].object;
if (INTERSECTED.type == 'Mesh' && showHoverBox == true) {
hoverBox.setFromObject(INTERSECTED, true);
if (hoverBox.isEmpty() === false && hoverBoxHelper.visible == false && showHoverBox == true) {
hoverBoxHelper.visible = true;
}
} else {
hoverBoxHelper.visible = false;
}
}
} else {
INTERSECTED = null;
hoverBoxHelper.visible = false;
}
});
$(document).on('keyup', '#canvas', function(event) {
switch ( event.keyCode ) {
case 16: // Shift
transformControls.setTranslationSnap( null );
transformControls.setRotationSnap( null );
transformControls.setScaleSnap( null );
break;
}
});
});