mirror of
https://github.com/pyscript/pyscript.git
synced 2022-05-01 19:47:48 +03:00
more work on point
This commit is contained in:
Michael Verhulst
234
pyscriptjs/examples/webgl/points/index.html
Normal file
234
pyscriptjs/examples/webgl/points/index.html
Normal file
@@ -0,0 +1,234 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title></title>
|
||||
<link type="text/css" rel="stylesheet" href="/webgl/points/main.css">
|
||||
<script type="text/javascript" src="/webgl/points/js/three.min.js" ></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="container"></div>
|
||||
|
||||
<script defer src="/build/pyscript.js"></script>
|
||||
<link rel="stylesheet" href="/build/pyscript.css" />
|
||||
<script>
|
||||
var group;
|
||||
var container;
|
||||
var particlesData = [];
|
||||
var camera, scene, renderer, obc;
|
||||
var positions, colors;
|
||||
var particles;
|
||||
var pointCloud;
|
||||
var particlePositions;
|
||||
var linesMesh;
|
||||
|
||||
var maxParticleCount = 1000;
|
||||
var particleCount = 500;
|
||||
var r = 800;
|
||||
var rHalf = r / 2;
|
||||
|
||||
var effectController = {
|
||||
showDots: true,
|
||||
showLines: true,
|
||||
minDistance: 150,
|
||||
limitConnections: false,
|
||||
maxConnections: 20,
|
||||
particleCount: 500
|
||||
};
|
||||
|
||||
function init() {
|
||||
container = document.getElementById( 'container' );
|
||||
|
||||
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 4000 );
|
||||
camera.position.z = 1750;
|
||||
|
||||
//obc = new THREE.OrbitControls();
|
||||
|
||||
scene = new THREE.Scene();
|
||||
|
||||
|
||||
group = new THREE.Group();
|
||||
scene.add( group );
|
||||
|
||||
var helper = new THREE.BoxHelper( new THREE.Mesh( new THREE.BoxGeometry( r, r, r ) ) );
|
||||
helper.material.color.setHex( 0x101010 );
|
||||
helper.material.blending = THREE.AdditiveBlending;
|
||||
helper.material.transparent = true;
|
||||
group.add( helper );
|
||||
|
||||
var segments = maxParticleCount * maxParticleCount;
|
||||
|
||||
positions = new Float32Array( segments * 3 );
|
||||
colors = new Float32Array( segments * 3 );
|
||||
|
||||
var pMaterial = new THREE.PointsMaterial( {
|
||||
color: 0xFFFFFF,
|
||||
size: 3,
|
||||
blending: THREE.AdditiveBlending,
|
||||
transparent: true,
|
||||
sizeAttenuation: false
|
||||
} );
|
||||
|
||||
particles = new THREE.BufferGeometry();
|
||||
particlePositions = new Float32Array( maxParticleCount * 3 );
|
||||
|
||||
for ( let i = 0; i < maxParticleCount; i ++ ) {
|
||||
|
||||
var x = Math.random() * r - r / 2;
|
||||
var y = Math.random() * r - r / 2;
|
||||
var z = Math.random() * r - r / 2;
|
||||
|
||||
particlePositions[ i * 3 ] = x;
|
||||
particlePositions[ i * 3 + 1 ] = y;
|
||||
particlePositions[ i * 3 + 2 ] = z;
|
||||
|
||||
|
||||
particlesData.push( {
|
||||
velocity: new THREE.Vector3( - 1 + Math.random() * 2, - 1 + Math.random() * 2, - 1 + Math.random() * 2 ),
|
||||
numConnections: 0
|
||||
} );
|
||||
|
||||
}
|
||||
|
||||
particles.setDrawRange( 0, particleCount );
|
||||
particles.setAttribute( 'position', new THREE.BufferAttribute( particlePositions, 3 ).setUsage( THREE.DynamicDrawUsage ) );
|
||||
|
||||
|
||||
pointCloud = new THREE.Points( particles, pMaterial );
|
||||
group.add( pointCloud );
|
||||
|
||||
var geometry = new THREE.BufferGeometry();
|
||||
|
||||
geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ).setUsage( THREE.DynamicDrawUsage ) );
|
||||
geometry.setAttribute( 'color', new THREE.BufferAttribute( colors, 3 ).setUsage( THREE.DynamicDrawUsage ) );
|
||||
|
||||
geometry.computeBoundingSphere();
|
||||
|
||||
geometry.setDrawRange( 0, 0 );
|
||||
|
||||
var material = new THREE.LineBasicMaterial( {
|
||||
vertexColors: true,
|
||||
blending: THREE.AdditiveBlending,
|
||||
transparent: true
|
||||
} );
|
||||
|
||||
linesMesh = new THREE.LineSegments( geometry, material );
|
||||
group.add( linesMesh );
|
||||
|
||||
renderer = new THREE.WebGLRenderer( { antialias: true } );
|
||||
renderer.setPixelRatio( window.devicePixelRatio );
|
||||
renderer.setSize( window.innerWidth, window.innerHeight );
|
||||
renderer.outputEncoding = THREE.sRGBEncoding;
|
||||
|
||||
container.appendChild( renderer.domElement );
|
||||
}
|
||||
|
||||
function animate() {
|
||||
|
||||
let vertexpos = 0;
|
||||
let colorpos = 0;
|
||||
let numConnected = 0;
|
||||
|
||||
for ( let i = 0; i < particleCount; i ++ )
|
||||
particlesData[ i ].numConnections = 0;
|
||||
|
||||
for ( let i = 0; i < particleCount; i ++ ) {
|
||||
|
||||
var particleData = particlesData[ i ];
|
||||
|
||||
particlePositions[ i * 3 ] += particleData.velocity.x;
|
||||
particlePositions[ i * 3 + 1 ] += particleData.velocity.y;
|
||||
particlePositions[ i * 3 + 2 ] += particleData.velocity.z;
|
||||
|
||||
if ( particlePositions[ i * 3 + 1 ] < - rHalf || particlePositions[ i * 3 + 1 ] > rHalf )
|
||||
particleData.velocity.y = - particleData.velocity.y;
|
||||
|
||||
if ( particlePositions[ i * 3 ] < - rHalf || particlePositions[ i * 3 ] > rHalf )
|
||||
particleData.velocity.x = - particleData.velocity.x;
|
||||
|
||||
if ( particlePositions[ i * 3 + 2 ] < - rHalf || particlePositions[ i * 3 + 2 ] > rHalf )
|
||||
particleData.velocity.z = - particleData.velocity.z;
|
||||
|
||||
if ( effectController.limitConnections && particleData.numConnections >= effectController.maxConnections )
|
||||
continue;
|
||||
|
||||
|
||||
for ( let j = i + 1; j < particleCount; j ++ ) {
|
||||
|
||||
var particleDataB = particlesData[ j ];
|
||||
if ( effectController.limitConnections && particleDataB.numConnections >= effectController.maxConnections )
|
||||
continue;
|
||||
|
||||
var dx = particlePositions[ i * 3 ] - particlePositions[ j * 3 ];
|
||||
var dy = particlePositions[ i * 3 + 1 ] - particlePositions[ j * 3 + 1 ];
|
||||
var dz = particlePositions[ i * 3 + 2 ] - particlePositions[ j * 3 + 2 ];
|
||||
var dist = Math.sqrt( dx * dx + dy * dy + dz * dz );
|
||||
|
||||
if ( dist < effectController.minDistance ) {
|
||||
|
||||
particleData.numConnections ++;
|
||||
particleDataB.numConnections ++;
|
||||
|
||||
var alpha = 1.0 - dist / effectController.minDistance;
|
||||
|
||||
positions[ vertexpos ++ ] = particlePositions[ i * 3 ];
|
||||
positions[ vertexpos ++ ] = particlePositions[ i * 3 + 1 ];
|
||||
positions[ vertexpos ++ ] = particlePositions[ i * 3 + 2 ];
|
||||
|
||||
positions[ vertexpos ++ ] = particlePositions[ j * 3 ];
|
||||
positions[ vertexpos ++ ] = particlePositions[ j * 3 + 1 ];
|
||||
positions[ vertexpos ++ ] = particlePositions[ j * 3 + 2 ];
|
||||
|
||||
colors[ colorpos ++ ] = alpha;
|
||||
colors[ colorpos ++ ] = alpha;
|
||||
colors[ colorpos ++ ] = alpha;
|
||||
|
||||
colors[ colorpos ++ ] = alpha;
|
||||
colors[ colorpos ++ ] = alpha;
|
||||
colors[ colorpos ++ ] = alpha;
|
||||
|
||||
numConnected ++;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
linesMesh.geometry.setDrawRange( 0, numConnected * 2 );
|
||||
linesMesh.geometry.attributes.position.needsUpdate = true;
|
||||
linesMesh.geometry.attributes.color.needsUpdate = true;
|
||||
|
||||
pointCloud.geometry.attributes.position.needsUpdate = true;
|
||||
|
||||
requestAnimationFrame( animate );
|
||||
render();
|
||||
|
||||
}
|
||||
|
||||
function render() {
|
||||
|
||||
var time = Date.now() * 0.001;
|
||||
|
||||
group.rotation.y = time * 0.5;
|
||||
renderer.render( scene, camera );
|
||||
|
||||
}
|
||||
|
||||
init();
|
||||
animate();
|
||||
</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 performance
|
||||
from pyodide import to_js
|
||||
from js import Object, Float32Array
|
||||
|
||||
</py-script>
|
||||
</body>
|
||||
</html>
|
||||
91
pyscriptjs/examples/webgl/points/main.css
Normal file
91
pyscriptjs/examples/webgl/points/main.css
Normal file
@@ -0,0 +1,91 @@
|
||||
body {
|
||||
margin: 0;
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
font-family: Monospace;
|
||||
font-size: 13px;
|
||||
line-height: 24px;
|
||||
overscroll-behavior: none;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #ff0;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#info {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
z-index: 1; /* TODO Solve this in HTML */
|
||||
}
|
||||
|
||||
a, button, input, select {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.lil-gui {
|
||||
z-index: 2 !important; /* TODO Solve this in HTML */
|
||||
}
|
||||
|
||||
@media all and ( max-width: 640px ) {
|
||||
.lil-gui.root {
|
||||
right: auto;
|
||||
top: auto;
|
||||
max-height: 50%;
|
||||
max-width: 80%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#overlay {
|
||||
position: absolute;
|
||||
font-size: 16px;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
background: rgba(0,0,0,0.7);
|
||||
}
|
||||
|
||||
#overlay button {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border: 1px solid rgb(255, 255, 255);
|
||||
border-radius: 4px;
|
||||
color: #ffffff;
|
||||
padding: 12px 18px;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#notSupported {
|
||||
width: 50%;
|
||||
margin: auto;
|
||||
background-color: #f00;
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
}
|
||||
Reference in New Issue
Block a user