-
Notifications
You must be signed in to change notification settings - Fork 3
/
HoverMaterialColor.html
25 lines (23 loc) · 1.37 KB
/
HoverMaterialColor.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>HoverMaterialColor 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 change cube color to blue
let obj = new THREE.Mesh(new THREE.BoxBufferGeometry(2, 2, 2), new THREE.MeshBasicMaterial({ color: 'red' }));
obj.addBehavior(new altspaceutil.behaviors.HoverMaterialColor({ beginDuration: 100, endDuration: 600, color: new THREE.Color('blue') }));
app.anchor.add(obj);
// Hovering over small yellow cubes will change colors of the cubes below them.
obj = new THREE.Mesh(new THREE.BoxBufferGeometry(2, 2, 2), new THREE.MeshBasicMaterial({ color: 'green' }));
obj.position.set(0, 0, 5);
obj.addBehavior(new altspaceutil.behaviors.HoverMaterialColor({ color: new THREE.Color('yellow'), 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({ color: 'green' }));
child.position.set(0, 2, 0);
child.addBehavior(new altspaceutil.behaviors.HoverMaterialColor({ color: new THREE.Color('yellow'), hoverChildren: true }));
parent.add(child);
parent = child;
}
});
</script>