FilesExpand file tree

main

/

intro-example.html

Copy path

Blame

More file actions

Blame

More file actions

Latest commit

 

History

History

History

216 lines (183 loc) · 5.98 KB

main

/

intro-example.html

Copy path

Top

File metadata and controls

• Code
• Blame

216 lines (183 loc) · 5.98 KB

Raw

Copy raw file

Download raw file

Open symbols panel

Edit and raw actions

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

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

<script src="./importmap.js"></script>

<style>

html,

body {

height: 100%;

margin: 0;

}

</style>

<lume-scene

id="scene"

webgl

environment="./examples/nasa-astrobee-robot/luna-station.jpg"

background="./examples/nasa-astrobee-robot/luna-station.jpg"

equirectangular-background="true"

>

<lume-ambient-light color="white" intensity="0.3"></lume-ambient-light>

<lume-camera-rig align-point="0.5 0.5 0.5" max-distance="6000" distance="3000">

<lume-point-light slot="camera-child" position="500 500 200" intensity="800"></lume-point-light>

</lume-camera-rig>

<lume-element3d align-point="0.5 0.5 0.5">

<!-- Load a 3D model from an FBX file. We make it have a metallic look down below. -->

<lume-fbx-model

id="mando"

rotation="0 0 0"

size="40 40 40"

scale="10 10 10"

src="./models/mando-helmet.fbx"

center-geometry

></lume-fbx-model>

<!-- A sphere with a frosty surface. -->

<lume-sphere

id="sphere"

mount-point="0.5 0.5 0.5"

position="-500"

has="physical-material"

receive-shadow="false"

size="400 400 400"

sidedness="double"

opacity="1"

color="white"

clearcoat="1"

transmission="1"

metalness="0.0"

roughness="0.55"

>

<!-- An inner sphere to make the outer sphere seem to glow from inside, using a shader-material for a custom shader. -->

<lume-sphere

id="innerSphere"

align-point="0.5 0.5 0.5"

mount-point="0.5 0.5 0.5"

has="shader-material"

receive-shadow="false"

size="360 360 360"

sidedness="double"

uniforms='{

"iTime": { "value": 0 },

"iResolution": { "value": {"x": 1, "y": 1, "z": 1} }

}'

></lume-sphere>

</lume-sphere>

<!-- A star shape, with a shader-material to make its shader be custom. -->

<lume-shape

id="shape"

size="300 300 300"

position="500"

align-point="0.5 0.5 0.5"

mount-point="0.5 0.5 0.5"

sidedness="double"

receive-shadow="false"

color="red"

fitment="cover"

bevel

bevel-thickness="1"

has="shader-material"

uniforms='{

"iTime": { "value": 0 },

"iResolution": { "value": {"x": 1, "y": 1, "z": 1} }

}'

></lume-shape>

</lume-element3d>

</lume-scene>

<script type="module">

import {html, createEffect, Motor} from 'lume'

import {MeshPhysicalMaterial} from 'three/src/materials/MeshPhysicalMaterial.js'

import {toCreasedNormals} from 'three/examples/jsm/utils/BufferGeometryUtils.js'

import {starPath} from './js/starPath.js'

shape.shape = starPath

const vertexShader = /*glsl*/ `

varying vec2 vUv;

void main() {

vUv = uv;

gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

}

`

const fragmentShader = /*glsl*/ `

#include <common>

uniform vec3 iResolution;

uniform float iTime;

// The following is the default shader when you start a new shadertoy example.

// By iq: https://www.shadertoy.com/user/iq

// license: Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

// BEGIN SHADERTOY CODE {

void mainImage( out vec4 fragColor, in vec2 fragCoord ) {

// Normalized pixel coordinates (from 0 to 1)

vec2 uv = fragCoord/iResolution.xy;

// Time varying pixel color

vec3 col = 0.5 + 0.5*cos(iTime+uv.xyx+vec3(0,2,4));

// Output to screen

fragColor = vec4(col,1.0);

//fragColor = vec4(1.0, 0.3, 0.1, 1.0);

}

// END SHADERTOY CODE }

varying vec2 vUv;

void main() {

mainImage(gl_FragColor, vUv / 2.0 * gl_FragCoord.xy);

}

`

// Apply a custom shader to the inner glowing sphere, and the star shape.

innerSphere.vertexShader = vertexShader

innerSphere.fragmentShader = fragmentShader

shape.vertexShader = vertexShader

shape.fragmentShader = fragmentShader

animateShader(innerSphere)

animateShader(shape, 2000)

// Animates

async function animateShader(targetBox, timeOffset = 0) {

createEffect(() => {

const mat = targetBox.behaviors.get('shader-material')

if (!mat?.meshComponent) return

mat.uniforms.iResolution.value.x = targetBox.calculatedSize.x * 10

mat.uniforms.iResolution.value.y = targetBox.calculatedSize.y * 10

targetBox.needsUpdate()

})

Motor.addRenderTask(t => {

const mat = targetBox.behaviors.get('shader-material')

if (!mat?.meshComponent) return

mat.uniforms.iTime.value = (t + timeOffset) * 0.001

targetBox.needsUpdate()

})

}

tiltOnPointerMove(scene, sphere)

tiltOnPointerMove(scene, mando)

tiltOnPointerMove(scene, shape)

function tiltOnPointerMove(pointerContext, rotationTarget, rotationAmount = 15) {

let pointers = new Set()

pointerContext.addEventListener('pointerdown', event => pointers.add(event.pointerId))

pointerContext.addEventListener('pointerup', event => pointers.delete(event.pointerId))

// Slightly rotate the given element based on pointer movement.

pointerContext.addEventListener('pointermove', event => {

if (pointers.size) return

rotationTarget.rotation.y = (event.clientX / pointerContext.offsetWidth) * (rotationAmount * 2) - rotationAmount

rotationTarget.rotation.x = -(

(event.clientY / pointerContext.offsetHeight) * (rotationAmount * 2) -

rotationAmount

)

})

}

// Wait for the model to be loaded so we can style metal parts of the

// helmet with a metallic material, and the visor with a black

// plastic-like material.

mando.on('MODEL_LOAD', () => {

// Once loaded, let's traverse the tree to visit all the mesh parts.

mando.three.traverse(obj => {

// Skip non-mesh nodes.

if (obj.isMesh) {

// Make the parts of the helmet look metallic or plastic.

if (obj.material.name.startsWith('Chrome') || obj.material.name.startsWith('Steel')) {

// metal

obj.material = new MeshPhysicalMaterial({color: 'white', metalness: 1, roughness: 0.15})

} else {

// black plastic visor

obj.material = new MeshPhysicalMaterial({

color: '#111111',

metalness: 0.2,

roughness: 0.2,

clearcoat: 1,

})

obj.geometry = toCreasedNormals(obj.geometry, 360) // smooth out the visor normals (the imported model had strange normals)

}

}

})

})

</script>