mirror of
https://github.com/pyscript/pyscript.git
synced 2022-05-01 19:47:48 +03:00
now raycaster is pure python
This commit is contained in:
@@ -24,92 +24,20 @@
|
|||||||
<script defer src="/build/pyscript.js"></script>
|
<script defer src="/build/pyscript.js"></script>
|
||||||
<link rel="stylesheet" href="/build/pyscript.css" />
|
<link rel="stylesheet" href="/build/pyscript.css" />
|
||||||
<script>
|
<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>
|
</script>
|
||||||
<py-script>
|
<py-script>
|
||||||
from pyodide import create_proxy, to_js
|
from pyodide import create_proxy, to_js
|
||||||
from js import window
|
from js import window
|
||||||
from js import Math
|
from js import Math
|
||||||
from js import THREE
|
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 = THREE.WebGLRenderer.new({"antialias":True})
|
||||||
renderer.setSize(1000, 1000)
|
renderer.setSize(1000, 1000)
|
||||||
@@ -119,6 +47,13 @@ renderer.shadowMap.needsUpdate = True
|
|||||||
|
|
||||||
document.body.appendChild( renderer.domElement )
|
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 )
|
camera = THREE.PerspectiveCamera.new( 35, window.innerWidth / window.innerHeight, 1, 500 )
|
||||||
scene = THREE.Scene.new()
|
scene = THREE.Scene.new()
|
||||||
cameraRange = 3
|
cameraRange = 3
|
||||||
@@ -142,7 +77,50 @@ def mathRandom(num = 1):
|
|||||||
particularGruop = THREE.Object3D.new();
|
particularGruop = THREE.Object3D.new();
|
||||||
modularGruop = 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)
|
generateParticle(mathRandom, particularGruop, 200, 2)
|
||||||
|
|
||||||
sceneGruop.add(particularGruop);
|
sceneGruop.add(particularGruop);
|
||||||
@@ -210,7 +188,7 @@ while True:
|
|||||||
|
|
||||||
camera.lookAt(scene.position)
|
camera.lookAt(scene.position)
|
||||||
renderer.render( scene, camera )
|
renderer.render( scene, camera )
|
||||||
await asyncio.sleep(0.01)
|
await asyncio.sleep(0.02)
|
||||||
|
|
||||||
|
|
||||||
</py-script>
|
</py-script>
|
||||||
|
|||||||
Reference in New Issue
Block a user