lume.github.io/examples/texture-shadow/example.html at main · lume/lume.github.io · GitHub

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
<script src="../../importmap.js"></script>

<style>
	html,
	body {
		height: 100%;
		margin: 0;
	}
</style>

<lume-scene
	webgl
	physically-correct-lights
	style="background: #999"
	shadow-mode="pcfsoft"
	fog-mode="linear"
	fog-near="800"
	fog-far="2000"
	fog-color="#999"
>
	<lume-ambient-light intensity="0.8"></lume-ambient-light>

	<lume-point-light id="light" position="200 -200 200" intensity="350">
		<lume-sphere size="10 10 10" cast-shadow="false" receive-shadow="false" has="basic-material"></lume-sphere>
	</lume-point-light>

	<lume-camera-rig vertical-angle="40" min-vertical-angle="1"></lume-camera-rig>

	<!-- The trick is to use alpha-test to drop pixels that have an opacity less than the given value. -->
	<lume-plane
		receive-shadow="false"
		texture="../../examples/mini-galaxy/sun.png"
		alpha-test="0.1"
		opacity="0.99999"
		size="100 100"
		mount-point="0.5 1"
		sidedness="double"
	></lume-plane>

	<lume-plane color="white" size="10000 10000" rotation="90 0 0" mount-point="0.5 0.5"></lume-plane>
</lume-scene>

<script type="module">
	import 'lume'
	light.position = (x, y, z, t) => [100 * Math.sin(t * 0.001)]
</script>