Skip to content

Commit 4e0f34e

Browse files
verhulstmverhulstm
committed
point WIP more python less js
1 parent 6d1888d commit 4e0f34e

File tree

1 file changed

+55
-60
lines changed

1 file changed

+55
-60
lines changed

‎pyscriptjs/examples/webgl/points/index.html

Lines changed: 55 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,14 @@
1515
<script>
1616
var group;
1717
var container;
18-
var particlesData = [];
1918
var camera, scene, renderer, obc;
2019
var positions, colors;
2120
var particles;
2221
var pointCloud;
2322
var particlePositions;
2423
var linesMesh;
2524

25+
var particlesData = [];
2626
var maxParticleCount = 1000;
2727
var particleCount = 500;
2828
var r = 800;
@@ -37,60 +37,7 @@
3737
particleCount: 500
3838
};
3939

40-
function init() {
41-
container = document.getElementById( 'container' );
42-
43-
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 4000 );
44-
camera.position.z = 1750;
45-
46-
//obc = new THREE.OrbitControls();
47-
48-
scene = new THREE.Scene();
49-
50-
51-
group = new THREE.Group();
52-
scene.add( group );
53-
54-
var helper = new THREE.BoxHelper( new THREE.Mesh( new THREE.BoxGeometry( r, r, r ) ) );
55-
helper.material.color.setHex( 0x101010 );
56-
helper.material.blending = THREE.AdditiveBlending;
57-
helper.material.transparent = true;
58-
group.add( helper );
59-
60-
var segments = maxParticleCount * maxParticleCount;
61-
62-
positions = new Float32Array( segments * 3 );
63-
colors = new Float32Array( segments * 3 );
64-
65-
var pMaterial = new THREE.PointsMaterial( {
66-
color: 0xFFFFFF,
67-
size: 3,
68-
blending: THREE.AdditiveBlending,
69-
transparent: true,
70-
sizeAttenuation: false
71-
} );
72-
73-
particles = new THREE.BufferGeometry();
74-
particlePositions = new Float32Array( maxParticleCount * 3 );
75-
76-
for ( let i = 0; i < maxParticleCount; i ++ ) {
77-
78-
var x = Math.random() * r - r / 2;
79-
var y = Math.random() * r - r / 2;
80-
var z = Math.random() * r - r / 2;
81-
82-
particlePositions[ i * 3 ] = x;
83-
particlePositions[ i * 3 + 1 ] = y;
84-
particlePositions[ i * 3 + 2 ] = z;
85-
86-
87-
particlesData.push( {
88-
velocity: new THREE.Vector3( - 1 + Math.random() * 2, - 1 + Math.random() * 2, - 1 + Math.random() * 2 ),
89-
numConnections: 0
90-
} );
91-
92-
}
93-
40+
function init(container, scene, group, camera, helper, segments, positions, colors, pMaterial, particles, particlePositions) {
9441
particles.setDrawRange( 0, particleCount );
9542
particles.setAttribute( 'position', new THREE.BufferAttribute( particlePositions, 3 ).setUsage( THREE.DynamicDrawUsage ) );
9643

@@ -122,6 +69,7 @@
12269
renderer.outputEncoding = THREE.sRGBEncoding;
12370

12471
container.appendChild( renderer.domElement );
72+
renderer.render( scene, camera );
12573
}
12674

12775
function animate() {
@@ -203,7 +151,6 @@
203151

204152
pointCloud.geometry.attributes.position.needsUpdate = true;
205153

206-
requestAnimationFrame( animate );
207154
render();
208155

209156
}
@@ -213,12 +160,9 @@
213160
var time = Date.now() * 0.001;
214161

215162
group.rotation.y = time * 0.5;
216-
renderer.render( scene, camera );
217163

218-
}
219164

220-
init();
221-
animate();
165+
}
222166
</script>
223167
<py-script>
224168
from pyodide import create_proxy, to_js
@@ -228,7 +172,58 @@
228172
from js import performance
229173
from pyodide import to_js
230174
from js import Object, Float32Array
175+
from js import init, animate, render
176+
from js import group, container, camera, scene, renderer, obc, positions, colors, particles, pointCloud, particlePositions, linesMesh
177+
178+
particlesData = [];
179+
maxParticleCount = 1000;
180+
particleCount = 500;
181+
r = 800;
182+
rHalf = r / 2;
183+
184+
container = document.getElementById( 'container' );
185+
186+
camera = THREE.PerspectiveCamera.new( 45, window.innerWidth / window.innerHeight, 1, 4000 );
187+
camera.position.z = 1750;
188+
189+
scene = THREE.Scene.new();
190+
group = THREE.Group.new();
191+
192+
scene.add( group );
193+
194+
helper = THREE.BoxHelper.new( THREE.Mesh.new( THREE.BoxGeometry.new( r, r, r ) ) );
195+
helper.material.color.setHex( 0x101010 );
196+
helper.material.blending = THREE.AdditiveBlending;
197+
helper.material.transparent = True;
198+
group.add( helper );
199+
200+
segments = maxParticleCount * maxParticleCount;
201+
202+
positions = Float32Array.new( segments * 3 );
203+
colors = Float32Array.new( segments * 3 );
204+
205+
points_perms = {"color": 0xFFFFFF,"size": 3,"blending": THREE.AdditiveBlending,"transparent": True,"sizeAttenuation": False}
206+
points_perms = Object.fromEntries(to_js(points_perms))
207+
208+
pMaterial = THREE.PointsMaterial.new(points_perms);
209+
210+
particles = THREE.BufferGeometry.new();
211+
particlePositions = Float32Array.new( maxParticleCount * 3 );
212+
213+
i = 0
214+
while i < len(particlePositions):
215+
x = Math.random() * r - r / 2;
216+
y = Math.random() * r - r / 2;
217+
z = Math.random() * r - r / 2;
218+
219+
particlePositions[ i * 3 ] = x;
220+
particlePositions[ i * 3 + 1 ] = y;
221+
particlePositions[ i * 3 + 2 ] = z;
222+
223+
particlesData.append( {"velocity": THREE.Vector3.new( - 1 + Math.random() * 2, - 1 + Math.random() * 2, - 1 + Math.random() * 2 ), "numConnections": 0} );
224+
i += 1
231225

226+
init(container, scene, group, camera, helper, segments, positions, colors, pMaterial, particles, particlePositions)
232227
</py-script>
233228
</body>
234229
</html>

0 commit comments

Comments
 (0)