|
24 | 24 | <scriptdefersrc="/build/pyscript.js"></script> |
25 | 25 | <linkrel="stylesheet"href="/build/pyscript.css"/> |
26 | 26 | <script> |
27 | | -functioncreate_objects(mathRandom,modularGruop){ |
28 | | -for(vari=0;i<30;i++){ |
29 | | -vargeometry=newTHREE.IcosahedronGeometry(1); |
30 | | -varmaterial=newTHREE.MeshStandardMaterial({flatShading:true,color:0x111111,transparent:false,opacity:1,wireframe:false}); |
31 | | -varcube=newTHREE.Mesh(geometry,material); |
32 | | -cube.speedRotation=Math.random()*0.1; |
33 | | -cube.positionX=mathRandom(); |
34 | | -cube.positionY=mathRandom(); |
35 | | -cube.positionZ=mathRandom(); |
36 | | -cube.castShadow=true; |
37 | | -cube.receiveShadow=true; |
38 | | -varnewScaleValue=mathRandom(0.3); |
39 | | -cube.scale.set(newScaleValue,newScaleValue,newScaleValue); |
40 | | -cube.rotation.x=mathRandom(180*Math.PI/180); |
41 | | -cube.rotation.y=mathRandom(180*Math.PI/180); |
42 | | -cube.rotation.z=mathRandom(180*Math.PI/180); |
43 | | -cube.position.set(cube.positionX,cube.positionY,cube.positionZ); |
44 | | -modularGruop.add(cube); |
45 | | -} |
46 | | -} |
47 | | -functiongenerateParticle(mathRandom,particularGruop,num,amp=2){ |
48 | | -vargmaterial=newTHREE.MeshPhysicalMaterial({color:0xFFFFFF,side:THREE.DoubleSide}); |
49 | | -vargparticular=newTHREE.CircleGeometry(0.2,5); |
50 | | -for(vari=1;i<num;i++){ |
51 | | -varpscale=0.001+Math.abs(mathRandom(0.03)); |
52 | | -varparticular=newTHREE.Mesh(gparticular,gmaterial); |
53 | | -particular.position.set(mathRandom(amp),mathRandom(amp),mathRandom(amp)); |
54 | | -particular.rotation.set(mathRandom(),mathRandom(),mathRandom()); |
55 | | -particular.scale.set(pscale,pscale,pscale); |
56 | | -particular.speedValue=mathRandom(1); |
57 | | -particularGruop.add(particular); |
58 | | -} |
59 | | -} |
60 | | -varmouse=newTHREE.Vector2(),INTERSECTED; |
61 | | -varintersected; |
62 | 27 |
|
63 | | -functiononMouseMove(event){ |
64 | | -event.preventDefault(); |
65 | | -mouse.x=(event.clientX/window.innerWidth)*2-1; |
66 | | -mouse.y=-(event.clientY/window.innerHeight)*2+1; |
67 | | -} |
68 | | -functiononMouseDown(event){ |
69 | | -event.preventDefault(); |
70 | | -onMouseMove(event); |
71 | | -raycaster.setFromCamera(mouse,camera); |
72 | | -varintersected=raycaster.intersectObjects(modularGruop.children); |
73 | | -if(intersected.length>0){ |
74 | | -cameraValue=false; |
75 | | -if(INTERSECTED!=intersected[0].object){ |
76 | | -if(INTERSECTED)INTERSECTED.material.emissive.setHex(INTERSECTED.currentHex); |
77 | | - |
78 | | -INTERSECTED=intersected[0].object; |
79 | | -INTERSECTED.currentHex=INTERSECTED.material.emissive.getHex(); |
80 | | -INTERSECTED.material.emissive.setHex(0xFFFF00); |
81 | | -//INTERSECTED.material.map = null; |
82 | | -//lightBack.position.set(INTERSECTED.position.x,INTERSECTED.position.y,INTERSECTED.position.z); |
83 | | - |
84 | | -TweenMax.to(camera.position,1,{ |
85 | | -x:INTERSECTED.position.x, |
86 | | -y:INTERSECTED.position.y, |
87 | | -z:INTERSECTED.position.z+3, |
88 | | -ease:Power2.easeInOut |
89 | | -}); |
90 | | - |
91 | | -}else{ |
92 | | -if(INTERSECTED)INTERSECTED.material.emissive.setHex(INTERSECTED.currentHex); |
93 | | -INTERSECTED=null; |
94 | | - |
95 | | -} |
96 | | -} |
97 | | -console.log(intersected.length); |
98 | | -} |
99 | | -functiononMouseUp(event){ |
100 | | - |
101 | | -} |
102 | | - |
103 | | -window.addEventListener('mousedown',onMouseDown,false); |
104 | | -window.addEventListener('mouseup',onMouseUp,false); |
105 | | -window.addEventListener('mousemove',onMouseMove,false); |
106 | 28 | </script> |
107 | 29 | <py-script> |
108 | 30 | from pyodide import create_proxy, to_js |
109 | 31 | from js import window |
110 | 32 | from js import Math |
111 | 33 | from js import THREE |
112 | | -from js import create_objects, generateParticle, performance, mouse, intersected |
| 34 | +from js import performance |
| 35 | +from pyodide import to_js |
| 36 | +from js import Object |
| 37 | + |
| 38 | + |
| 39 | + |
| 40 | +mouse = THREE.Vector2.new(); |
113 | 41 |
|
114 | 42 | renderer = THREE.WebGLRenderer.new({"antialias":True}) |
115 | 43 | renderer.setSize(1000, 1000) |
|
119 | 47 |
|
120 | 48 | document.body.appendChild( renderer.domElement ) |
121 | 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 | + |
122 | 57 | camera = THREE.PerspectiveCamera.new( 35, window.innerWidth / window.innerHeight, 1, 500 ) |
123 | 58 | scene = THREE.Scene.new() |
124 | 59 | cameraRange = 3 |
|
142 | 77 | particularGruop = THREE.Object3D.new(); |
143 | 78 | modularGruop = THREE.Object3D.new(); |
144 | 79 |
|
145 | | -create_objects(mathRandom, modularGruop) |
| 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 | +defgenerateParticle(mathRandom,particularGruop,num,amp =2): |
| 111 | +gmaterial =THREE.MeshPhysicalMaterial.new(particle_perms); |
| 112 | +gparticular =THREE.CircleGeometry.new(0.2,5); |
| 113 | +i =0 |
| 114 | +whilei<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 | + |
146 | 124 | generateParticle(mathRandom,particularGruop,200,2) |
147 | 125 |
|
148 | 126 | sceneGruop.add(particularGruop); |
|
210 | 188 |
|
211 | 189 | camera.lookAt(scene.position) |
212 | 190 | renderer.render(scene,camera) |
213 | | -awaitasyncio.sleep(0.01) |
| 191 | +awaitasyncio.sleep(0.02) |
214 | 192 |
|
215 | 193 |
|
216 | 194 | </py-script> |
|