0a88630612
Analysis confirms that the Placement module already provides full TransformControls functionality for dragging live registered nodes in the operational dashboard. Key findings: - Placement module initialized in app.js (line 285-287) - TransformControls created and attached to any node mesh (placement.js:238-288) - Position persistence via mothership API (placement.js:419-427) - Node meshes created by Viz3D from registry_state (viz3d.js:263-294) The pre-deployment simulator uses its own separate TransformControls (simulate.js), which may have created the impression that the live dashboard lacked this feature. No implementation changes needed - functionality is already operational.
73 lines
2.9 KiB
HTML
73 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>TransformControls Test</title>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/TransformControls.js"></script>
|
|
</head>
|
|
<body>
|
|
<h1>TransformControls Verification Test</h1>
|
|
<div id="container" style="width: 600px; height: 400px;"></div>
|
|
<div id="output"></div>
|
|
|
|
<script>
|
|
// Test if TransformControls is available
|
|
const output = document.getElementById('output');
|
|
|
|
if (typeof THREE === 'undefined') {
|
|
output.innerHTML = '<p style="color:red">ERROR: THREE.js not loaded</p>';
|
|
} else if (typeof THREE.TransformControls === 'undefined') {
|
|
output.innerHTML = '<p style="color:red">ERROR: TransformControls not loaded</p>';
|
|
} else {
|
|
output.innerHTML = '<p style="color:green">✓ TransformControls is available</p>';
|
|
|
|
// Create a simple scene to test TransformControls
|
|
const scene = new THREE.Scene();
|
|
scene.background = new THREE.Color(0x1a1a2e);
|
|
|
|
const camera = new THREE.PerspectiveCamera(60, 600/400, 0.1, 1000);
|
|
camera.position.set(5, 5, 5);
|
|
|
|
const renderer = new THREE.WebGLRenderer();
|
|
renderer.setSize(600, 400);
|
|
document.getElementById('container').appendChild(renderer.domElement);
|
|
|
|
// Add grid
|
|
const grid = new THREE.GridHelper(10, 10);
|
|
scene.add(grid);
|
|
|
|
// Add a test cube
|
|
const geometry = new THREE.BoxGeometry(1, 1, 1);
|
|
const material = new THREE.MeshBasicMaterial({ color: 0x4fc3f7 });
|
|
const cube = new THREE.Mesh(geometry, material);
|
|
cube.position.set(0, 0.5, 0);
|
|
scene.add(cube);
|
|
|
|
// Add OrbitControls
|
|
const orbitControls = new THREE.OrbitControls(camera, renderer.domElement);
|
|
|
|
// Add TransformControls
|
|
const transformControls = new THREE.TransformControls(camera, renderer.domElement);
|
|
transformControls.attach(cube);
|
|
scene.add(transformControls.getHelper());
|
|
|
|
// Disable orbit while dragging
|
|
transformControls.addEventListener('dragging-changed', function (event) {
|
|
orbitControls.enabled = !event.value;
|
|
});
|
|
|
|
output.innerHTML += '<p style="color:green">✓ TransformControls attached to cube</p>';
|
|
output.innerHTML += '<p style="color:blue">Try dragging the RGB arrows on the cube!</p>';
|
|
|
|
// Animation loop
|
|
function animate() {
|
|
requestAnimationFrame(animate);
|
|
orbitControls.update();
|
|
renderer.render(scene, camera);
|
|
}
|
|
animate();
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|