-
Notifications
You must be signed in to change notification settings - Fork 69
/
dice-color.html
109 lines (85 loc) · 3.56 KB
/
dice-color.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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html>
<head>
<title>Polyhedral Dice</title>
<meta name="description" content="Polyhedral Dice">
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
<script src="js/aframe-v1.3.0.js"></script>
<script src="js/aframe-environment-component.js"></script>
</head>
<body>
<script>
let twoColorMaterial = new THREE.ShaderMaterial({
uniforms:
{
replaceLight: {type: 'vec3', value: new THREE.Vector3(1.0, 1.0, 1.0) },
replaceDark: {type: 'vec3', value: new THREE.Vector3(0.0, 0.0, 0.0) },
src: {type: 'map'},
},
vertexShader: `
varying vec2 vUv;
void main()
{
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
vUv = uv;
}
`,
fragmentShader: `
varying vec2 vUv;
uniform sampler2D src;
uniform vec3 replaceLight;
uniform vec3 replaceDark;
void main()
{
vec4 c = texture2D(src, vUv);
if ( (c.r + c.g + c.b) / 3.0 > 0.8 )
c.rgb *= replaceLight;
else
c.rgb *= replaceDark;
gl_FragColor = c;
}
`,
})
AFRAME.registerComponent("gltf-recolor", {
schema: {
replaceLight: {type: 'color', default: "white"},
replaceDark: {type: 'color', default: "black"}
},
init: function ()
{
let material = twoColorMaterial.clone();
material.uniforms.replaceLight.value = new THREE.Color(this.data.replaceLight);
material.uniforms.replaceDark.value = new THREE.Color(this.data.replaceDark);
this.el.addEventListener("model-loaded", function(eventData) {
let model = eventData.detail.model;
model.traverse((obj) => {
if (obj.isMesh)
{
material.uniforms.src.value = obj.material.map;
obj.material = material;
}
});
});
// material replacement complete
}
});
</script>
<a-scene environment="preset: default;" background="color: #000000;">
<a-assets>
<a-asset-item id="d6" src="models/dice/d6.glb"></a-asset-item>
<a-asset-item id="d8" src="models/dice/d8.glb"></a-asset-item>
<a-asset-item id="d10" src="models/dice/d10.glb"></a-asset-item>
<a-asset-item id="d12" src="models/dice/d12.glb"></a-asset-item>
<a-asset-item id="d20" src="models/dice/d20.glb"></a-asset-item>
<a-asset-item id="d100" src="models/dice/d100.glb"></a-asset-item>
</a-assets>
<a-entity camera look-controls wasd-controls="acceleration: 5" position="0 1.6 0"></a-entity>
<a-entity id="p6" gltf-model="#d6" position="-0.5 1.7 -1" rotation=" 0 180 -90" gltf-recolor="replaceLight: white; replaceDark: red;"></a-entity>
<a-entity id="p8" gltf-model="#d8" position=" 0.0 1.7 -1" rotation=" 60 180 -90" gltf-recolor="replaceLight: white; replaceDark: orange;"></a-entity>
<a-entity id="p12" gltf-model="#d12" position=" 0.5 1.7 -1" rotation=" 0 170 -55" gltf-recolor="replaceLight: white; replaceDark: yellow;"></a-entity>
<a-entity id="p20" gltf-model="#d20" position="-0.5 1.3 -1" rotation=" 0 0 180" gltf-recolor="replaceLight: white; replaceDark: #449944;"></a-entity>
<a-entity id="p10" gltf-model="#d10" position=" 0.0 1.3 -1" rotation="-75 0 18" gltf-recolor="replaceLight: white; replaceDark: #4488FF;"></a-entity>
<a-entity id="p100" gltf-model="#d100" position=" 0.5 1.3 -1" rotation=" 95 0 -50" gltf-recolor="replaceLight: white; replaceDark: #CC88FF;"></a-entity>
</a-scene>
</body>
</html>