From 7b7cbb6cf24dc5cdc9f56e393f8b3e74c6634b82 Mon Sep 17 00:00:00 2001 From: Michael Verhulst Date: Sat, 16 Apr 2022 17:20:09 -0500 Subject: [PATCH] added in a WIP for raycaster --- .../examples/webgl/raycaster/index.html | 141 ++++++++++++++++++ pyscriptjs/examples/webgl/raycaster/style.css | 53 +++++++ 2 files changed, 194 insertions(+) create mode 100755 pyscriptjs/examples/webgl/raycaster/index.html create mode 100755 pyscriptjs/examples/webgl/raycaster/style.css diff --git a/pyscriptjs/examples/webgl/raycaster/index.html b/pyscriptjs/examples/webgl/raycaster/index.html new file mode 100755 index 0000000..5e57005 --- /dev/null +++ b/pyscriptjs/examples/webgl/raycaster/index.html @@ -0,0 +1,141 @@ + + + + + Raycaster + + + + +
+
+
+
+
+
+
+
+
+
+
+
+ + + + + + +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 + +renderer = THREE.WebGLRenderer.new({"antialias":True}) +renderer.setSize(1000, 1000) +renderer.shadowMap.enabled = False +renderer.shadowMap.type = THREE.PCFSoftShadowMap +renderer.shadowMap.needsUpdate = True + +document.body.appendChild( renderer.domElement ) + +camera = THREE.PerspectiveCamera.new( 35, window.innerWidth / window.innerHeight, 1, 500 ) +scene = THREE.Scene.new() +cameraRange = 3 + +camera.aspect = window.innerWidth / window.innerHeight +camera.updateProjectionMatrix() +renderer.setSize( window.innerWidth, window.innerHeight ) + +setcolor = "#000000" + +scene.background = THREE.Color.new(setcolor) +scene.fog = THREE.Fog.new(setcolor, 2.5, 3.5); + +sceneGruop = THREE.Object3D.new(); +particularGruop = THREE.Object3D.new(); + +def mathRandom(num = 1): + setNumber = - Math.random() * num + Math.random() * num + return setNumber + +particularGruop = THREE.Object3D.new(); +modularGruop = THREE.Object3D.new(); + +create_objects(mathRandom, modularGruop) +generateParticle(mathRandom, particularGruop, 200, 2) + +sceneGruop.add(particularGruop); +scene.add(modularGruop); +scene.add(sceneGruop); + +camera.position.set(0, 0, cameraRange); +cameraValue = False; + +ambientLight = THREE.AmbientLight.new(0xFFFFFF, 0.1); + +light = THREE.SpotLight.new(0xFFFFFF, 3); +light.position.set(5, 5, 2); +light.castShadow = True; +light.shadow.mapSize.width = 10000; +light.shadow.mapSize.height = light.shadow.mapSize.width; +light.penumbra = 0.5; + +lightBack = THREE.PointLight.new(0x0FFFFF, 1); +lightBack.position.set(0, -3, -1); + +scene.add(sceneGruop); +scene.add(light); +scene.add(lightBack); + +rectSize = 2 +intensity = 100 +rectLight = THREE.RectAreaLight.new( 0x0FFFFF, intensity, rectSize, rectSize ) +rectLight.position.set( 0, 0, 1 ) +rectLight.lookAt( 0, 0, 0 ) +scene.add( rectLight ) + +rectLightHelper = THREE.RectAreaLightHelper.new( rectLight ); +raycaster = THREE.Raycaster.new(); +uSpeed = 0.1 + +time = 0.0003; +camera.lookAt(scene.position) +renderer.render( scene, camera ) + + + diff --git a/pyscriptjs/examples/webgl/raycaster/style.css b/pyscriptjs/examples/webgl/raycaster/style.css new file mode 100755 index 0000000..fc1e4b7 --- /dev/null +++ b/pyscriptjs/examples/webgl/raycaster/style.css @@ -0,0 +1,53 @@ +body { + margin: 0; + text-align: center; + background-color: black; + cursor: crosshair; +} +canvas { + display: block; + width: 100%; + height: 100%; +} +.header { + /*top:45%;*/ + top: 45%; + color: #DDDDDD; +} +.footer { + bottom:3%; +} +.description { + color: gray; + padding-top: 50px; +} +.btn { + border-radius: 30px; + padding: 10px 30px; +} +a, a:hover, a:visited { + color: red; + text-decoration: none; +} +.disable-selection { + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* Internet Explorer */ + -khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */ + -webkit-user-select: none; /* Chrome, Safari, and Opera */ + -webkit-touch-callout: none; /* Disable Android and iOS callouts*/ +} +h1::after { + content: ' V 2.0'; + font-size: 12px; + position:absolute; + top: 3px; + padding-left: 5px; + font-weight: 400; +} +h2::after { + content: '2'; + font-size: 12px; + position:absolute; + top: 14px; + padding-left: 5px; +} \ No newline at end of file