|
@@ -38,7 +38,7 @@
|
|
|
<script type="module">
|
|
<script type="module">
|
|
|
|
|
|
|
|
import * as THREE from 'three/webgpu';
|
|
import * as THREE from 'three/webgpu';
|
|
|
- import { Fn, If, uniform, float, uv, vec2, vec3, hash, shapeCircle,
|
|
|
|
|
|
|
+ import { Fn, If, uniform, float, uv, vec3, hash, shapeCircle,
|
|
|
instancedArray, instanceIndex } from 'three/tsl';
|
|
instancedArray, instanceIndex } from 'three/tsl';
|
|
|
|
|
|
|
|
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
|
|
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
|
|
@@ -81,7 +81,7 @@
|
|
|
const colors = instancedArray( particleCount, 'vec3' );
|
|
const colors = instancedArray( particleCount, 'vec3' );
|
|
|
|
|
|
|
|
// compute
|
|
// compute
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
const separation = 0.2;
|
|
const separation = 0.2;
|
|
|
const amount = Math.sqrt( particleCount );
|
|
const amount = Math.sqrt( particleCount );
|
|
|
const offset = float( amount / 2 );
|
|
const offset = float( amount / 2 );
|
|
@@ -90,10 +90,10 @@
|
|
|
|
|
|
|
|
const position = positions.element( instanceIndex );
|
|
const position = positions.element( instanceIndex );
|
|
|
const color = colors.element( instanceIndex );
|
|
const color = colors.element( instanceIndex );
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
const x = instanceIndex.mod( amount );
|
|
const x = instanceIndex.mod( amount );
|
|
|
const z = instanceIndex.div( amount );
|
|
const z = instanceIndex.div( amount );
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
position.x = offset.sub( x ).mul( separation );
|
|
position.x = offset.sub( x ).mul( separation );
|
|
|
position.z = offset.sub( z ).mul( separation );
|
|
position.z = offset.sub( z ).mul( separation );
|
|
|
|
|
|
|
@@ -197,7 +197,7 @@
|
|
|
//
|
|
//
|
|
|
|
|
|
|
|
function onMove( event ) {
|
|
function onMove( event ) {
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
if ( isOrbitControlsActive ) return;
|
|
if ( isOrbitControlsActive ) return;
|
|
|
|
|
|
|
|
pointer.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1 );
|
|
pointer.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1 );
|
|
@@ -233,7 +233,7 @@
|
|
|
controls.maxDistance = 200;
|
|
controls.maxDistance = 200;
|
|
|
controls.target.set( 0, -8, 0 );
|
|
controls.target.set( 0, -8, 0 );
|
|
|
controls.update();
|
|
controls.update();
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
controls.addEventListener( 'start', () => { isOrbitControlsActive = true; } );
|
|
controls.addEventListener( 'start', () => { isOrbitControlsActive = true; } );
|
|
|
controls.addEventListener( 'end', () => { isOrbitControlsActive = false; } );
|
|
controls.addEventListener( 'end', () => { isOrbitControlsActive = false; } );
|
|
|
|
|
|