8000 Merge pull request #35 from anaconda/webgl-box · Nullinteger65/pyscript@4a2057b · GitHub
[go: up one dir, main page]
Skip to content

Commit 4a2057b

Browse files
fpligerfpliger
authored
Merge pull request pyscript#35 from anaconda/webgl-box
Webgl icosahedron demo
2 parents 8c8b641 + f889c70 commit 4a2057b

File tree

3 files changed

+252
-0
lines changed

3 files changed

+252
-0
lines changed

‎pyscriptjs/examples/index.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,5 +65,8 @@ <h2 class="text-2xl font-bold text-blue-600"><a href="./simple_script2.html" tar
6565

6666
<h2 class="text-2xl font-bold text-blue-600"><a href="./todo.html" target=”_blank”>TODO App</a></h2>
6767
<p>Demo showing how would a Simple TODO App would look like in PyScript</code> tag</p>
68+
69+
<h2 class="text-2xl font-bold text-blue-600"><a href="./webgl/raycaster/index.html" target=”_blank”>Webgl Icosahedron Example</a></h2>
70+
<p>Demo showing how a Simple Webgl scene would work in PyScript</code> tag</p>
6871
</body>
6972
</html>

‎pyscriptjs/examples/webgl/raycaster/index.html

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
<!DOCTYPE html>
2+
<html lang="en" >
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Raycaster</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="stylesheet" href="./style.css">
8+
</head>
9+
<body>
10+
<div class="container-fluid fixed-top header disable-selection">
11+
<div class="row">
12+
<div class="col"></div>
13+
<div class="col-md-6">
14+
<div class="row">
15+
<div class="col">
16+
</div>
17+
</div>
18+
</div>
19+
<div class="col"></div>
20+
</div>
21+
</div>
22+
<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js'></script>
23+
24+
<script defer src="/build/pyscript.js"></script>
25+
<link rel="stylesheet" href="/build/pyscript.css" />
26+
<script>
27+
28+
</script>
29+
<py-script>
30+
from pyodide import create_proxy, to_js
31+
from js import window
32+
from js import Math
33+
from js import THREE
34+
from js import performance
35+
from pyodide import to_js
36+
from js import Object
37+
38+
39+
40+
mouse = THREE.Vector2.new();
41+
42+
renderer = THREE.WebGLRenderer.new({"antialias":True})
43+
renderer.setSize(1000, 1000)
44+
renderer.shadowMap.enabled = False
45+
renderer.shadowMap.type = THREE.PCFSoftShadowMap
46+
renderer.shadowMap.needsUpdate = True
47+
48+
document.body.appendChild( renderer.domElement )
49+
50+
import js, pyodide
51+
def onMouseMove(event):
52+
event.preventDefault();
53+
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
54+
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
55+
js.document.addEventListener('mousemove', pyodide.create_proxy(onMouseMove))
56+
57+
camera = THREE.PerspectiveCamera.new( 35, window.innerWidth / window.innerHeight, 1, 500 )
58+
scene = THREE.Scene.new()
59+
cameraRange = 3
60+
61+
camera.aspect = window.innerWidth / window.innerHeight
62+
camera.updateProjectionMatrix()
63+
renderer.setSize( window.innerWidth, window.innerHeight )
64+
65+
setcolor = "#000000"
66+
67+
scene.background = THREE.Color.new(setcolor)
68+
scene.fog = THREE.Fog.new(setcolor, 2.5, 3.5);
69+
70+
sceneGruop = THREE.Object3D.new();
71+
particularGruop = THREE.Object3D.new();
72+
73+
def mathRandom(num = 1):
74+
setNumber = - Math.random() * num + Math.random() * num
75+
return setNumber
76+
77+
particularGruop = THREE.Object3D.new();
78+
modularGruop = THREE.Object3D.new();
79+
80+
perms = {"flatShading":True, "color":"#111111", "transparent":False, "opacity":1, "wireframe":False}
81+
perms = Object.fromEntries(to_js(perms))
82+
83+
particle_perms = {"color":"#FFFFFF", "side":THREE.DoubleSide}
84+
particle_perms = Object.fromEntries(to_js(particle_perms))
85+
86+
def create_cubes(mathRandom, modularGruop):
87+
i = 0
88+
while i < 30:
89+
geometry = THREE.IcosahedronGeometry.new();
90+
material = THREE.MeshStandardMaterial.new(perms);
91+
cube = THREE.Mesh.new(geometry, material);
92+
cube.speedRotation = Math.random() * 0.1;
93+
cube.positionX = mathRandom();
94+
cube.positionY = mathRandom();
95+
cube.positionZ = mathRandom();
96+
cube.castShadow = True;
97+
cube.receiveShadow = True;
98+
newScaleValue = mathRandom(0.3);
99+
cube.scale.set(newScaleValue,newScaleValue,newScaleValue);
100+
cube.rotation.x = mathRandom(180 * Math.PI / 180);
101+
cube.rotation.y = mathRandom(180 * Math.PI / 180);
102+
cube.rotation.z = mathRandom(180 * Math.PI / 180);
103+
cube.position.set(cube.positionX, cube.positionY, cube.positionZ);
104+
modularGruop.add(cube);
105+
i += 1
106+
107+
create_cubes(mathRandom, modularGruop)
108+
109+
110+
def generateParticle(mathRandom, particularGruop, num, amp = 2):
111+
gmaterial = THREE.MeshPhysicalMaterial.new(particle_perms);
112+
gparticular = THREE.CircleGeometry.new(0.2,5);
113+
i = 0
114+
while i < num:
115+
pscale = 0.001+Math.abs(mathRandom(0.03));
116+
particular = THREE.Mesh.new(gparticular, gmaterial);
117+
particular.position.set(mathRandom(amp),mathRandom(amp),mathRandom(amp));
118+
particular.rotation.set(mathRandom(),mathRandom(),mathRandom());
119+
particular.scale.set(pscale,pscale,pscale);
120+
particular.speedValue = mathRandom(1);
121+
particularGruop.add(particular);
122+
i += 1
123+
124+
generateParticle(mathRandom, particularGruop, 200, 2)
125+
126+
sceneGruop.add(particularGruop);
127+
scene.add(modularGruop);
128+
scene.add(sceneGruop);
129+
130+
camera.position.set(0, 0, cameraRange);
131+
cameraValue = False;
132+
133+
ambientLight = THREE.AmbientLight.new(0xFFFFFF, 0.1);
134+
135+
light = THREE.SpotLight.new(0xFFFFFF, 3);
136+
light.position.set(5, 5, 2);
137+
light.castShadow = True;
138+
light.shadow.mapSize.width = 10000;
139+
light.shadow.mapSize.height = light.shadow.mapSize.width;
140+
light.penumbra = 0.5;
141+
142+
lightBack = THREE.PointLight.new(0x0FFFFF, 1);
143+
lightBack.position.set(0, -3, -1);
144+
145+
scene.add(sceneGruop);
146+
scene.add(light);
147+
scene.add(lightBack);
148+
149+
rectSize = 2
150+
intensity = 100
151+
rectLight = THREE.RectAreaLight.new( 0x0FFFFF, intensity, rectSize, rectSize )
152+
rectLight.position.set( 0, 0, 1 )
153+
rectLight.lookAt( 0, 0, 0 )
154+
scene.add( rectLight )
155+
156+
rectLightHelper = THREE.RectAreaLightHelper.new( rectLight );
157+
raycaster = THREE.Raycaster.new();
158+
uSpeed = 0.1
159+
160+
time = 0.0003;
161+
camera.lookAt(scene.position)
162+
163+
while True:
164+
time = performance.now() * 0.0003;
165+
i = 0
166+
while i < particularGruop.children.length:
167+
newObject = particularGruop.children[i];
168+
newObject.rotation.x += newObject.speedValue/10;
169+
newObject.rotation.y += newObject.speedValue/10;
170+
newObject.rotation.z += newObject.speedValue/10;
171+
i += 1
172+
173+
i = 0
174+
while i < modularGruop.children.length:
175+
newCubes = modularGruop.children[i];
176+
newCubes.rotation.x += 0.008;
177+
newCubes.rotation.y += 0.005;
178+
newCubes.rotation.z += 0.003;
179+
180+
newCubes.position.x = Math.sin(time * newCubes.positionZ) * newCubes.positionY;
181+
newCubes.position.y = Math.cos(time * newCubes.positionX) * newCubes.positionZ;
182+
newCubes.position.z = Math.sin(time * newCubes.positionY) * newCubes.positionX;
183+
i += 1
184+
185+
particularGruop.rotation.y += 0.005;
186+
187+
modularGruop.rotation.y -= ((mouse.x * 4) + modularGruop.rotation.y) * uSpeed;
188+
modularGruop.rotation.x -= ((-mouse.y * 4) + modularGruop.rotation.x) * uSpeed;
189+
190+
renderer.render( scene, camera )
191+
await asyncio.sleep(0.02)
192+
193+
194+
</py-script>
195+
</body>
196+
</html>

‎pyscriptjs/examples/webgl/raycaster/style.css

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
body {
2+
margin: 0;
3+
text-align: center;
4+
background-color: black;
5+
cursor: crosshair;
6+
}
7+
canvas {
8+
display: block;
9+
width: 100%;
10+
height: 100%;
11+
}
12+
.header {
13+
/*top:45%;*/
14+
top: 45%;
15+
color: #DDDDDD;
16+
}
17+
.footer {
18+
bottom:3%;
19+
}
20+
.description {
21+
color: gray;
22+
padding-top: 50px;
23+
}
24+
.btn {
25+
border-radius: 30px;
26+
padding: 10px 30px;
27+
}
28+
a, a:hover, a:visited {
29+
color: red;
30+
text-decoration: none;
31+
}
32+
.disable-selection {
33+
-moz-user-select: none; /* Firefox */
34+
-ms-user-select: none; /* Internet Explorer */
35+
-khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
36+
-webkit-user-select: none; /* Chrome, Safari, and Opera */
37+
-webkit-touch-callout: none; /* Disable Android and iOS callouts*/
38+
}
39+
h1::after {
40+
content: ' V 2.0';
41+
font-size: 12px;
42+
position:absolute;
43+
top: 3px;
44+
padding-left: 5px;
45+
font-weight: 400;
46+
}
47+
h2::after {
48+
content: '2';
49+
font-size: 12px;
50+
position:absolute;
51+
top: 14px;
52+
padding-left: 5px;
53+
}

0 commit comments

Comments
 (0)
0