alihan/pyscript-python-html
1
0
Fork 0
mirror of https://github.com/pyscript/pyscript.git synced 2022-05-01 19:47:48 +03:00
Code Issues Projects Releases Wiki Activity

now raycaster is pure python

Browse Source
This commit is contained in:
Michael Verhulst
2022-04-20 13:00:21 -05:00
parent a0340a6136
commit 31ff939f8f
1 changed files with 59 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
pyscriptjs/examples/webgl/raycaster/index.html
View File

@@ -24,92 +24,20 @@
<script defer src="/build/pyscript.js"></script>
<link rel="stylesheet" href="/build/pyscript.css" />
<script>
function create_objects(mathRandom, modularGruop) {
for (var i = 0; i<30; i++) {
var geometry = new THREE.IcosahedronGeometry(1);
var material = new THREE.MeshStandardMaterial({flatShading:true, color:0x111111, transparent:false, opacity:1, wireframe:false});
var cube = new THREE.Mesh(geometry, material);
cube.speedRotation = Math.random() * 0.1;
cube.positionX = mathRandom();
cube.positionY = mathRandom();
cube.positionZ = mathRandom();
cube.castShadow = true;
cube.receiveShadow = true;
var newScaleValue = mathRandom(0.3);
cube.scale.set(newScaleValue,newScaleValue,newScaleValue);
cube.rotation.x = mathRandom(180 * Math.PI / 180);
cube.rotation.y = mathRandom(180 * Math.PI / 180);
cube.rotation.z = mathRandom(180 * Math.PI / 180);
cube.position.set(cube.positionX, cube.positionY, cube.positionZ);
modularGruop.add(cube);
}
}
function generateParticle(mathRandom, particularGruop, num, amp = 2) {
var gmaterial = new THREE.MeshPhysicalMaterial({color:0xFFFFFF, side:THREE.DoubleSide});
var gparticular = new THREE.CircleGeometry(0.2,5);
for (var i = 1; i < num; i++) {
var pscale = 0.001+Math.abs(mathRandom(0.03));
var particular = new THREE.Mesh(gparticular, gmaterial);
particular.position.set(mathRandom(amp),mathRandom(amp),mathRandom(amp));
particular.rotation.set(mathRandom(),mathRandom(),mathRandom());
particular.scale.set(pscale,pscale,pscale);
particular.speedValue = mathRandom(1);
particularGruop.add(particular);
}
}
var mouse = new THREE.Vector2(), INTERSECTED;
var intersected;
function onMouseMove(event) {
event.preventDefault();
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
}
function onMouseDown(event) {
event.preventDefault();
onMouseMove(event);
raycaster.setFromCamera(mouse, camera);
var intersected = raycaster.intersectObjects(modularGruop.children);
if (intersected.length > 0) {
cameraValue = false;
if (INTERSECTED != intersected[0].object) {
if (INTERSECTED) INTERSECTED.material.emissive.setHex(INTERSECTED.currentHex);
INTERSECTED = intersected[0].object;
INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex();
INTERSECTED.material.emissive.setHex(0xFFFF00);
//INTERSECTED.material.map = null;
//lightBack.position.set(INTERSECTED.position.x,INTERSECTED.position.y,INTERSECTED.position.z);
TweenMax.to(camera.position, 1, {
x:INTERSECTED.position.x,
y:INTERSECTED.position.y,
z:INTERSECTED.position.z+3,
ease:Power2.easeInOut
});
} else {
if (INTERSECTED) INTERSECTED.material.emissive.setHex(INTERSECTED.currentHex);
INTERSECTED = null;
}
}
console.log(intersected.length);
}
function onMouseUp(event) {
}
window.addEventListener('mousedown', onMouseDown, false);
window.addEventListener('mouseup', onMouseUp, false);
window.addEventListener('mousemove', onMouseMove, false);
</script>
<py-script>
from pyodide import create_proxy, to_js
from js import window
from js import Math
from js import THREE
from js import create_objects, generateParticle, performance, mouse, intersected
from js import performance
from pyodide import to_js
from js import Object
mouse = THREE.Vector2.new();
renderer = THREE.WebGLRenderer.new({"antialias":True})
renderer.setSize(1000, 1000)
@@ -119,6 +47,13 @@ renderer.shadowMap.needsUpdate = True
document.body.appendChild( renderer.domElement )
import js, pyodide
def onMouseMove(event):
event.preventDefault();
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
js.document.addEventListener('mousemove', pyodide.create_proxy(onMouseMove))
camera = THREE.PerspectiveCamera.new( 35, window.innerWidth / window.innerHeight, 1, 500 )
scene = THREE.Scene.new()
cameraRange = 3
@@ -142,7 +77,50 @@ def mathRandom(num = 1):
particularGruop = THREE.Object3D.new();
modularGruop = THREE.Object3D.new();
create_objects(mathRandom, modularGruop)
perms = {"flatShading":True, "color":"#111111", "transparent":False, "opacity":1, "wireframe":False}
perms = Object.fromEntries(to_js(perms))
particle_perms = {"color":"#FFFFFF", "side":THREE.DoubleSide}
particle_perms = Object.fromEntries(to_js(particle_perms))
def create_cubes(mathRandom, modularGruop):
i = 0
while i < 30:
geometry = THREE.IcosahedronGeometry.new();
material = THREE.MeshStandardMaterial.new(perms);
cube = THREE.Mesh.new(geometry, material);
cube.speedRotation = Math.random() * 0.1;
cube.positionX = mathRandom();
cube.positionY = mathRandom();
cube.positionZ = mathRandom();
cube.castShadow = True;
cube.receiveShadow = True;
newScaleValue = mathRandom(0.3);
cube.scale.set(newScaleValue,newScaleValue,newScaleValue);
cube.rotation.x = mathRandom(180 * Math.PI / 180);
cube.rotation.y = mathRandom(180 * Math.PI / 180);
cube.rotation.z = mathRandom(180 * Math.PI / 180);
cube.position.set(cube.positionX, cube.positionY, cube.positionZ);
modularGruop.add(cube);
i += 1
create_cubes(mathRandom, modularGruop)
def generateParticle(mathRandom, particularGruop, num, amp = 2):
gmaterial = THREE.MeshPhysicalMaterial.new(particle_perms);
gparticular = THREE.CircleGeometry.new(0.2,5);
i = 0
while i < num:
pscale = 0.001+Math.abs(mathRandom(0.03));
particular = THREE.Mesh.new(gparticular, gmaterial);
particular.position.set(mathRandom(amp),mathRandom(amp),mathRandom(amp));
particular.rotation.set(mathRandom(),mathRandom(),mathRandom());
particular.scale.set(pscale,pscale,pscale);
particular.speedValue = mathRandom(1);
particularGruop.add(particular);
i += 1
generateParticle(mathRandom, particularGruop, 200, 2)
sceneGruop.add(particularGruop);
@@ -210,7 +188,7 @@ while True:
camera.lookAt(scene.position)
renderer.render( scene, camera )
await asyncio.sleep(0.01)
await asyncio.sleep(0.02)
</py-script>