123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>three.js webgl - multiple elements with text</title>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
- <link type="text/css" rel="stylesheet" href="main.css">
- <style>
- * {
- box-sizing: border-box;
- -moz-box-sizing: border-box;
- }
- body {
- background-color: #fff;
- color: #444;
- margin: auto;
- padding: .5in;
- max-width: 7in;
- text-align: justify;
- }
- a {
- color: #08f;
- }
- #info {
- left: 0px;
- }
- .view {
- width: 5in;
- height: 5in;
- margin: auto;
- }
- #c {
- position: fixed;
- left: 0px; top: 0px;
- width: 100%;
- height: 100%;
- background-color: #fff;
- z-index: -1;
- }
- </style>
- </head>
- <body>
- <canvas id="c"></canvas>
- <div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - multiple elements with text - webgl</div>
- <script type="importmap">
- {
- "imports": {
- "three": "../build/three.module.js",
- "three/addons/": "./jsm/"
- }
- }
- </script>
- <script type="module">
- import * as THREE from 'three';
- import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
- const scenes = [];
- const clock = new THREE.Clock();
- let views, t, canvas, renderer;
- window.onload = init;
- function init() {
- const balls = 20;
- const size = .25;
- const colors = [
- 'rgb(0,127,255)', 'rgb(255,0,0)', 'rgb(0,255,0)', 'rgb(0,255,255)',
- 'rgb(255,0,255)', 'rgb(255,0,127)', 'rgb(255,255,0)', 'rgb(0,255,127)'
- ];
- canvas = document.getElementById( 'c' );
- renderer = new THREE.WebGLRenderer( { canvas: canvas, antialias: true } );
- renderer.setPixelRatio( window.devicePixelRatio );
- renderer.setAnimationLoop( animate );
- views = document.querySelectorAll( '.view' );
- for ( let n = 0; n < views.length; n ++ ) {
- const scene = new THREE.Scene();
- scene.background = new THREE.Color( 0xffffff );
- const geometry0 = new THREE.BufferGeometry();
- const geometry1 = new THREE.BufferGeometry();
- const vertices = [];
- if ( views[ n ].lattice ) {
- const range = balls / 2;
- for ( let i = - range; i <= range; i ++ ) {
- for ( let j = - range; j <= range; j ++ ) {
- for ( let k = - range; k <= range; k ++ ) {
- vertices.push( i, j, k );
- }
- }
- }
- } else {
- for ( let m = 0; m < Math.pow( balls, 3 ); m ++ ) {
- const i = balls * Math.random() - balls / 2;
- const j = balls * Math.random() - balls / 2;
- const k = balls * Math.random() - balls / 2;
- vertices.push( i, j, k );
- }
- }
- geometry0.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
- geometry1.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices.slice(), 3 ) );
- const index = Math.floor( colors.length * Math.random() );
- const canvas2 = document.createElement( 'canvas' );
- canvas2.width = 128;
- canvas2.height = 128;
- const context = canvas2.getContext( '2d' );
- context.arc( 64, 64, 64, 0, 2 * Math.PI );
- context.fillStyle = colors[ index ];
- context.fill();
- const texture = new THREE.CanvasTexture( canvas2 );
- texture.colorSpace = THREE.SRGBColorSpace;
- const material = new THREE.PointsMaterial( { size: size, map: texture, transparent: true, alphaTest: 0.1 } );
- scene.add( new THREE.Points( geometry0, material ) );
- scene.userData.view = views[ n ];
- scene.userData.geometry1 = geometry1;
- const camera = new THREE.PerspectiveCamera( 75, 1, 0.1, 100 );
- camera.position.set( 0, 0, 1.2 * balls );
- scene.userData.camera = camera;
- const controls = new OrbitControls( camera, views[ n ] );
- scene.userData.controls = controls;
- scenes.push( scene );
- }
- t = 0;
- animate();
- }
- function updateSize() {
- const width = canvas.clientWidth;
- const height = canvas.clientHeight;
- if ( canvas.width !== width || canvas.height != height ) {
- renderer.setSize( width, height, false );
- }
- }
- function animate() {
- updateSize();
- renderer.setClearColor( 0xffffff );
- renderer.setScissorTest( false );
- renderer.clear();
- renderer.setClearColor( 0x000000 );
- renderer.setScissorTest( true );
- scenes.forEach( function ( scene ) {
- const rect = scene.userData.view.getBoundingClientRect();
- // check if it's offscreen. If so skip it
- if ( rect.bottom < 0 || rect.top > renderer.domElement.clientHeight ||
- rect.right < 0 || rect.left > renderer.domElement.clientWidth ) {
- return; // it's off screen
- }
- // set the viewport
- const width = rect.right - rect.left;
- const height = rect.bottom - rect.top;
- const left = rect.left;
- const bottom = renderer.domElement.clientHeight - rect.bottom;
- renderer.setViewport( left, bottom, width, height );
- renderer.setScissor( left, bottom, width, height );
- renderer.render( scene, scene.userData.camera );
- const points = scene.children[ 0 ];
- const position = points.geometry.attributes.position;
- const point = new THREE.Vector3();
- const offset = new THREE.Vector3();
- for ( let i = 0; i < position.count; i ++ ) {
- point.fromBufferAttribute( scene.userData.geometry1.attributes.position, i );
- scene.userData.view.displacement( point.x, point.y, point.z, t / 5, offset );
- position.setXYZ( i, point.x + offset.x, point.y + offset.y, point.z + offset.z );
- }
- position.needsUpdate = true;
- } );
- t += clock.getDelta() * 60;
- }
- </script>
- <p>Sound waves whose geometry is determined by a single dimension, plane waves, obey the wave equation</p>
- <math display="block">
- <mfrac>
- <mrow>
- <msup>
- <mi>∂</mi>
- <mn>2</mn>
- </msup>
- <mi>u</mi>
- </mrow>
- <mrow>
- <mi>∂</mi>
- <msup>
- <mi>r</mi>
- <mn>2</mn>
- </msup>
- </mrow>
- </mfrac>
- <mo>−</mo>
- <mfrac>
- <mn>1</mn>
- <msup>
- <mi>c</mi>
- <mn>2</mn>
- </msup>
- </mfrac>
- <mo>⋅</mo>
- <mfrac>
- <mrow>
- <msup>
- <mi>∂</mi>
- <mn>2</mn>
- </msup>
- <mi>u</mi>
- </mrow>
- <mrow>
- <mi>∂</mi>
- <msup>
- <mi>t</mi>
- <mn>2</mn>
- </msup>
- </mrow>
- </mfrac>
- <mo>=</mo>
- <mn>0</mn>
- </math>
- <p>where <math><mi>c</mi></math> designates the speed of sound in the medium. The monochromatic solution for plane waves will be taken to be</p>
- <math display="block">
- <mi>u</mi>
- <mo>(</mo>
- <mi>r</mi>
- <mo>,</mo>
- <mi>t</mi>
- <mo>)</mo>
- <mo>=</mo>
- <mi>sin</mi>
- <mo>(</mo>
- <mi>k</mi>
- <mi>r</mi>
- <mo>±</mo>
- <mi>ω</mi>
- <mi>t</mi>
- <mo>)</mo>
- </math>
- <p>
- where <math><mi>ω</mi></math> is the frequency and
- <math>
- <mi>k</mi>
- <mo>=</mo>
- <mi>ω</mi>
- <mo>/</mo>
- <mi>c</mi>
- </math>
- is the wave number. The sign chosen in the argument determines the direction of movement of the waves.
- </p>
- <p>Here is a plane wave moving on a three-dimensional lattice of atoms:</p>
- <div class="view">
- <script>
- /* eslint-disable prefer-const*/
- let parent = document.scripts[ document.scripts.length - 1 ].parentNode;
- parent.displacement = function ( x, y, z, t, target ) {
- return target.set( Math.sin( x - t ), 0, 0 );
- };
- parent.lattice = true;
- </script>
- </div>
- <p>Here is a plane wave moving through a three-dimensional random distribution of molecules:</p>
- <div class="view">
- <script>
- parent = document.scripts[ document.scripts.length - 1 ].parentNode;
- parent.displacement = function ( x, y, z, t, target ) {
- return target.set( Math.sin( x - t ), 0, 0 );
- };
- parent.lattice = false;
- </script>
- </div>
- <p>Sound waves whose geometry is determined by two dimensions, cylindrical waves, obey the wave equation</p>
- <math display="block">
- <mfrac>
- <mrow>
- <msup>
- <mi>∂</mi>
- <mn>2</mn>
- </msup>
- <mi>u</mi>
- </mrow>
- <mrow>
- <mi>∂</mi>
- <msup>
- <mi>r</mi>
- <mn>2</mn>
- </msup>
- </mrow>
- </mfrac>
- <mo>+</mo>
- <mfrac>
- <mrow>
- <mn>1</mn>
- </mrow>
- <mrow>
- <mi>r</mi>
- </mrow>
- </mfrac>
- <mo>⋅</mo>
- <mfrac>
- <mrow>
- <mi>∂</mi>
- <mi>u</mi>
- </mrow>
- <mrow>
- <mi>∂</mi>
- <mi>r</mi>
- </mrow>
- </mfrac>
- <mo>−</mo>
- <mfrac>
- <mrow>
- <mn>1</mn>
- </mrow>
- <mrow>
- <msup>
- <mi>c</mi>
- <mn>2</mn>
- </msup>
- </mrow>
- </mfrac>
- <mo>⋅</mo>
- <mfrac>
- <mrow>
- <msup>
- <mi>∂</mi>
- <mn>2</mn>
- </msup>
- <mi>u</mi>
- </mrow>
- <mrow>
- <mi>∂</mi>
- <msup>
- <mi>t</mi>
- <mn>2</mn>
- </msup>
- </mrow>
- </mfrac>
- <mo>=</mo>
- <mn>0</mn>
- </math>
- <p>The monochromatic solution for cylindrical sound waves will be taken to be</p>
- <math display="block">
- <mi>u</mi>
- <mo stretchy="false">(</mo>
- <mi>r</mi>
- <mo>,</mo>
- <mi>t</mi>
- <mo stretchy="false">)</mo>
- <mo>=</mo>
- <mfrac>
- <mrow>
- <mi>sin</mi>
- <mo>(</mo>
- <mi>k</mi>
- <mi>r</mi>
- <mo>±</mo>
- <mi>ω</mi>
- <mi>t</mi>
- <mo>)</mo>
- </mrow>
- <mrow>
- <msqrt>
- <mi>r</mi>
- </msqrt>
- </mrow>
- </mfrac>
- </math>
- <p>Here is a cylindrical wave moving on a three-dimensional lattice of atoms:</p>
- <div class="view">
- <script>
- parent = document.scripts[ document.scripts.length - 1 ].parentNode;
- parent.displacement = function ( x, y, z, t, target ) {
- if ( x * x + y * y < 0.01 ) {
- return target.set( 0, 0, 0 );
- } else {
- const rho = Math.sqrt( x * x + y * y );
- const phi = Math.atan2( y, x );
- return target.set( 1.5 * Math.cos( phi ) * Math.sin( rho - t ) / Math.sqrt( rho ), 1.5 * Math.sin( phi ) * Math.sin( rho - t ) / Math.sqrt( rho ), 0 );
- }
- };
- parent.lattice = true;
- </script>
- </div>
- <p>Here is a cylindrical wave moving through a three-dimensional random distribution of molecules:</p>
- <div class="view">
- <script>
- parent = document.scripts[ document.scripts.length - 1 ].parentNode;
- parent.displacement = function ( x, y, z, t, target ) {
- if ( x * x + y * y < 0.01 ) {
- return target.set( 0, 0, 0 );
- } else {
- const rho = Math.sqrt( x * x + y * y );
- const phi = Math.atan2( y, x );
- return target.set( 1.5 * Math.cos( phi ) * Math.sin( rho - t ) / Math.sqrt( rho ), 1.5 * Math.sin( phi ) * Math.sin( rho - t ) / Math.sqrt( rho ), 0 );
- }
- };
- parent.lattice = false;
- </script>
- </div>
- <p>Sound waves whose geometry is determined by three dimensions, spherical waves, obey the wave equation</p>
- <math display="block">
- <mfrac>
- <mrow>
- <msup>
- <mi>∂</mi>
- <mn>2</mn>
- </msup>
- <mi>u</mi>
- </mrow>
- <mrow>
- <mi>∂</mi>
- <msup>
- <mi>r</mi>
- <mn>2</mn>
- </msup>
- </mrow>
- </mfrac>
- <mo>+</mo>
- <mfrac>
- <mrow>
- <mn>2</mn>
- </mrow>
- <mrow>
- <mi>r</mi>
- </mrow>
- </mfrac>
- <mo>⋅</mo>
- <mfrac>
- <mrow>
- <mi>∂</mi>
- <mi>u</mi>
- </mrow>
- <mrow>
- <mi>∂</mi>
- <mi>r</mi>
- </mrow>
- </mfrac>
- <mo>−</mo>
- <mfrac>
- <mrow>
- <mn>1</mn>
- </mrow>
- <mrow>
- <msup>
- <mi>c</mi>
- <mn>2</mn>
- </msup>
- </mrow>
- </mfrac>
- <mo>⋅</mo>
- <mfrac>
- <mrow>
- <msup>
- <mi>∂</mi>
- <mn>2</mn>
- </msup>
- <mi>u</mi>
- </mrow>
- <mrow>
- <mi>∂</mi>
- <msup>
- <mi>t</mi>
- <mn>2</mn>
- </msup>
- </mrow>
- </mfrac>
- <mo>=</mo>
- <mn>0</mn>
- </math>
- <p>The monochromatic solution for spherical sound waves will be taken to be</p>
- <math display="block">
- <mi>u</mi>
- <mo stretchy="false">(</mo>
- <mi>r</mi>
- <mo>,</mo>
- <mi>t</mi>
- <mo stretchy="false">)</mo>
- <mo>=</mo>
- <mfrac>
- <mrow>
- <mi>sin</mi>
- <mo>(</mo>
- <mi>k</mi>
- <mi>r</mi>
- <mo>±</mo>
- <mi>ω</mi>
- <mi>t</mi>
- <mo>)</mo>
- </mrow>
- <mrow>
- <mi>r</mi>
- </mrow>
- </mfrac>
- </math>
- <p>Here is a spherical wave moving on a three-dimensional lattice of atoms:</p>
- <div class="view">
- <script>
- parent = document.scripts[ document.scripts.length - 1 ].parentNode;
- parent.displacement = function ( x, y, z, t, target ) {
- if ( x * x + y * y + z * z < 0.01 ) {
- return target.set( 0, 0, 0 );
- } else {
- const r = Math.sqrt( x * x + y * y + z * z );
- const theta = Math.acos( z / r );
- const phi = Math.atan2( y, x );
- return target.set( 3 * Math.cos( phi ) * Math.sin( theta ) * Math.sin( r - t ) / r, 3 * Math.sin( phi ) * Math.sin( theta ) * Math.sin( r - t ) / r, 3 * Math.cos( theta ) * Math.sin( r - t ) / r );
- }
- };
- parent.lattice = true;
- </script>
- </div>
- <p>Here is a spherical wave moving through a three-dimensional random distribution of molecules:</p>
- <div class="view">
- <script>
- parent = document.scripts[ document.scripts.length - 1 ].parentNode;
- parent.displacement = function ( x, y, z, t, target ) {
- if ( x * x + y * y + z * z < 0.01 ) {
- return target.set( 0, 0, 0 );
- } else {
- const r = Math.sqrt( x * x + y * y + z * z );
- const theta = Math.acos( z / r );
- const phi = Math.atan2( y, x );
- return target.set( 3 * Math.cos( phi ) * Math.sin( theta ) * Math.sin( r - t ) / r, 3 * Math.sin( phi ) * Math.sin( theta ) * Math.sin( r - t ) / r, 3 * Math.cos( theta ) * Math.sin( r - t ) / r );
- }
- };
- parent.lattice = false;
- </script>
- </div>
- <p>The mathematical description of sound waves can be carried to higher dimensions, but one needs to wait for Four.js and its higher-dimensional successors to attempt visualizations.</p>
- </body>
- </html>
|