-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathpyscript-threejs-cubes-shadow.html
73 lines (73 loc) · 2.65 KB
/
pyscript-threejs-cubes-shadow.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
<!DOCTYPE html><html><head>
<!--code at: https://github.com/ostad-ai/Miscellaneous-->
<script defer src="https://pyscript.net/alpha/pyscript.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js'></script>
</head><body>
<h1 style="color:#fa00bb;">Python inside HTML: Drawing cubes on click</h1>
<h3>Code by <i>Hamed Shah-Hosseini</i>, at: https://github.com/ostad-ai/Miscellaneous </h3>
<button style="font-size:18px" id="mybutton" pys-onClick="drawCube">
Click to draw Cube</button>
<button style="font-size:18px" id="mybutton2" pys-onClick="ClearCubes">
Click to Clear</button>
<div id="container"></div>
<py-script>
from js import THREE
from js import window
from pyodide import create_proxy
import random
from math import pi
#------------------------
container=Element("container").element
renderer = THREE.WebGLRenderer.new()
renderer.setSize( window.innerWidth, window.innerHeight )
renderer.shadowMap.enabled=True
renderer.shadowMap.type = THREE.PCFSoftShadowMap
#-----------
scene = THREE.Scene.new();
camera =THREE.PerspectiveCamera.new( 75, window.innerWidth / window.innerHeight, 1, 500 )
camera.position.z = 5; camera.position.y=2
#----------
light = THREE.PointLight.new( color="#ffffff",intensity=2 )
light.position.set(0,10,4)
light.castShadow = True
scene.add( light )
light.shadow.mapSize.width = 512
light.shadow.mapSize.height = 512
light.shadow.camera.near = 1
light.shadow.camera.far = 500
#-------------------
geometry_plane = THREE.PlaneGeometry.new( 200, 200 ,32,32)
material_plane = THREE.MeshStandardMaterial.new(color="#ffff00",side=THREE.DoubleSide )
plane = THREE.Mesh.new( geometry_plane, material_plane )
plane.receiveShadow = True
plane.position.z=-15
plane.rotation.x=-pi/2.1
scene.add(plane)
#-----------------
scene.background = THREE.Color.new("#0000ff")
cubes=[]
def drawCube(*args,**kwargs):
r,g,b=random.randint(0,255),random.randint(0,255),random.randint(0,255)
geometry=THREE.BoxGeometry.new(1.5,1.5,1.5)
material = THREE.MeshStandardMaterial.new(color=f"rgb({r},{g},{b})")
cube = THREE.Mesh.new(geometry, material);
cube.position.z=-5
cube.position.x=10-20*random.random()
cube.position.y=8-8*random.random()
cube.castShadow =True
scene.add( cube )
cubes.append(cube)
#renderer.render( scene, camera )
def ClearCubes(*args,**kwargs):
for cb in cubes:
scene.remove(cb)
cubes.clear()
def animate(*args):
window.requestAnimationFrame(create_proxy(animate))
for cb in cubes:
cb.rotation.x+=.01
cb.rotation.y+=.015
renderer.render( scene, camera )
animate()
container.appendChild(renderer.domElement)
</py-script></body></html>