-
Notifications
You must be signed in to change notification settings - Fork 3
/
TransformControls.html
51 lines (43 loc) · 3.07 KB
/
TransformControls.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<title>TransformControls Behavior Example</title>
<script src="https://cdn.jsdelivr.net/combine/npm/three@0.95.0/build/three.min.js,npm/altspace@2.9.0/dist/altspace.min.js,npm/altspacevr-behaviors@1.1.5/js/altspaceutil.min.js"></script>
<script>
altspaceutil.getFullspaceApp().then(app => {
let transformCube = new THREE.Mesh(new THREE.BoxBufferGeometry(0.5, 0.5, 0.5), new THREE.MeshBasicMaterial({ color: 'purple', transparent: true, opacity: 0.5 }));
transformCube.addBehavior(new altspaceutil.behaviors.TransformControls({ controlType: 'none', showButtons: true }));
app.anchor.add(transformCube);
transformCube.position.set(0, 1, 0);
transformCube.getBehaviorByType('TransformControls').setActiveControl('none');
transformCube.addEventListener('transform-controls-dragbegin', event => {
console.log('transform-controls-dragbegin', event);
});
transformCube.addEventListener('transform-controls-dragmove', event => {
event.detail.transformTarget.material.color.r += event.detail.transformDelta.x;
event.detail.transformTarget.material.color.g += event.detail.transformDelta.y;
event.detail.transformTarget.material.color.b += event.detail.transformDelta.z;
});
transformCube.addEventListener('transform-controls-dragend', event => {
console.log('transform-controls-dragend', event);
});
transformCube = new THREE.Mesh(new THREE.BoxBufferGeometry(0.5, 0.5, 0.5), new THREE.MeshBasicMaterial({ color: 'purple', transparent: true, opacity: 0.5 }));
transformCube.addBehavior(new altspaceutil.behaviors.TransformControls({ controlType: 'position' }));
app.anchor.add(transformCube);
transformCube.position.set(2, 1, 0);
transformCube = new THREE.Mesh(new THREE.BoxBufferGeometry(0.5, 0.5, 0.5), new THREE.MeshBasicMaterial({ color: 'purple', transparent: true, opacity: 0.5 }));
transformCube.addBehavior(new altspaceutil.behaviors.TransformControls({ controlType: 'rotate' }));
app.anchor.add(transformCube);
transformCube.position.set(4, 1, 0);
transformCube = new THREE.Mesh(new THREE.BoxBufferGeometry(0.5, 0.5, 0.5), new THREE.MeshBasicMaterial({ color: 'purple', transparent: true, opacity: 0.5 }));
transformCube.addBehavior(new altspaceutil.behaviors.TransformControls({ controlType: 'scale' }));
app.anchor.add(transformCube);
transformCube.position.set(6, 1, 0);
let transformParent = new THREE.Object3D();
transformParent.addBehavior(new altspaceutil.behaviors.TransformControls({ controlType: 'position', followTarget: false, target: transformCube }));
app.anchor.add(transformParent);
transformParent.position.set(8, 1, 0);
transformCube = new THREE.Mesh(new THREE.BoxBufferGeometry(0.5, 0.5, 0.5), new THREE.MeshBasicMaterial({ color: 'purple', transparent: true, opacity: 0.5 }));
transformCube.addBehavior(new altspaceutil.behaviors.TransformControls({ controlType: 'none', showButtons: true, positionAxisLock: { x: false, y: true, z: false }, rotateAxisLock: { x: true, y: false, z: false }, scaleAxisLock: { x: true, y: true, z: false } }));
app.anchor.add(transformCube);
transformCube.position.set(10, 1, 0);
});
</script>