-
Notifications
You must be signed in to change notification settings - Fork 3
/
HoverMaterialOpacity.html
25 lines (23 loc) · 1.42 KB
/
HoverMaterialOpacity.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
<!DOCTYPE html>
<title>HoverMaterialOpacity 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 => {
// Hovering over red cube will decrease cube opacity to 5%.
let obj = new THREE.Mesh(new THREE.BoxBufferGeometry(2, 2, 2), new THREE.MeshBasicMaterial({ transparent: true, opacity: 0.5, color: 'red' }));
obj.addBehavior(new altspaceutil.behaviors.HoverMaterialOpacity({ beginDuration: 100, endDuration: 600, opacity: -0.45 }));
app.anchor.add(obj);
// Hovering over green cubes will increase opacity of the cubes below them.
obj = new THREE.Mesh(new THREE.BoxBufferGeometry(2, 2, 2), new THREE.MeshBasicMaterial({ transparent: true, opacity: 0.5, color: 'green' }));
obj.position.set(0, 0, 5);
obj.addBehavior(new altspaceutil.behaviors.HoverMaterialOpacity({ opacity: 0.3, hoverChildren: true }));
app.anchor.add(obj);
for(let parent = obj, i = 0; i < 3; ++i) {
let child = new THREE.Mesh(new THREE.BoxBufferGeometry(1, 1, 1), new THREE.MeshBasicMaterial({ transparent: true, opacity: 0.3, color: 'green' }));
child.position.set(0, 2, 0);
child.addBehavior(new altspaceutil.behaviors.HoverMaterialOpacity({ opacity: 0.7, hoverChildren: true }));
parent.add(child);
parent = child;
}
});
</script>