XProfan

- Page 9 -

HofK

Just have I The alpha Version with Skalierung on [...]

brought. On [...]

is a video renewed.

for the Halbkugeln is the Skalierung between Start- and Endfunktion possible.

for the bullet works The Skalierung but only between whom Standardwerten 0 and 1.

some try with Start- and Endfunktion led To always unterschiedlichen Fehlpositionierungen. thereby react konvexe and konkave functions different. If the evenings now again longer go, must I there time deeper into mathematical theory eintauchen. possible there a simple Solution - must one only find.

in the View source are pieces the try yet visible, because I there possible again ansetze.

momentarily available functions:

// u azimuth (start: x axis, counterclockwise)
// for hemispheres: v polar (start: poles 0, end: equator 1), t time

stretchSouth,//function ( u, v, t )// stretch / compress south hemisphere in -y direction
stretchNorth, //function ( u, v, t )// stretch / compress north hemisphere in +y direction
endPole,//function ( u, t )// end angle ( to equator, by phi)
startPole, //function ( u, t )// start angle ( from south- or north poles, by phi)
scalePoleH,//function ( v, t )// scaling hemispheres from poles to equator ( is overwritten by scalePole )

// for sphere: v polar (start: south poles 0, end: north poles 1), t time

rAzimuthPole, //function ( u, v, t )// radius depending on location,
equatorGap,//function ( u, t )// gap in relation to the radius
squeeze,// function ( u, t )// 0 sphere to 1 flat circle
moveX,//function ( u, v, t )// factor for radius, move in x direction
moveY,//function ( u, v, t )// factor for radius, move in y direction
moveZ,//function ( v, u, t )// factor for radius, move in z direction

endAzimuth,//function ( v, t )// end azimuth angle phi (by theta)
startAzimuth,//function ( v, t )// starting azimuth angle phi (by theta)
scaleAzimuth,//function ( u, t )// scaling between start and end of azimuth angle ( phi 0 .. 2*PI)

scalePole, //function ( v, t )// scaling between start and end of polar angle (theta -PI/2 .. PI/2 )

materialSouth,//function ( u, v, t )// material South
materialNorth,//function ( u, v, t )// material North
materialPlane,//function ( u, t )// material of extra south top or north bottom
materialWedge,//function ( v, t )// material wedge side

10/18/17 ▲

HofK

with the Positionierung the singulären poles and Mittelpunkte of ground and lid there were yet Error in the Context with the application the functions.

The problem stick into Kugelkoordinaten. The poles having of course eindeutig a Polwinkel theta ( -Pi/2, +Pi/2), but since tappt im dunkeln normal center lying none designed Azimut phi.

with the Berechnung with functions The u (and so phi) as argument having, there then Problems - unsinnige Results.

therefore berechne I a very small circle around the Mittelpunkte (x and z) and take whom story. moreover must, even if only some Kugelkeile desired go, there unfortunately the complete circle closed go. the increased The Auswahlabfragen, is not To avoid.

so there now but too in such Make sinnvolle Results.
On [...]

is the Version currently.

The Berechnung happens in the Zusammenspiel the functions
function setPoleVertex( south_north )
function setVertex( south_north )
function setPlaneCenterVertex( south_north )

10/21/17 ▲

HofK

in between time something change.

On The question one something hilflosen Anfängers there [...]

have I my something älteres example To raycast revised. The deutschsprachigen variables english framed and the comments where meaningfully Translated. moreover another expansion to that better understanding the something difficult three.js Sachverhalts: The ray can displayed go. [...]

The old Version remaining receive. [...]

-----

furthermore is THREEf on review 87 umgestellt, [...]

and contains now too whom vertexFaceNumbersHelper

The Änderung To r87 concerns flatShading:

flatShading =document.getElementById( "flatShading" ).checked;

//shading =flatshading ? THREE.FlatShading : THREE.SmoothShadig; // old
//.flatShading: true or false; // three.js r87

means very simply as quality only true or false.

at that Test have I even fixes, that The Sandbox now on Opera 48.0.2685.50 (PGO) and Chrome 61.0.3163.100 runs! having I do not More expects. can I whom Info on Firefox well delete.

On GitHub must THREEf yet renewed go.

10/24/17 ▲

HofK

HofK (18.10.2017)

... If the evenings now again longer go, must I there time deeper into mathematical theory eintauchen. possible there a simple Solution - must one only find. ...

it bedurfte none deeper mathematischen Forschungen. The Solution is integrally simply and almost so How I it already having. If one but a small Error not notice and any mutants again einbaut, see it dark from.
Sometime coming The enlightenment

, I can quite persistent his.

The Number of Fehlversuche isn't veröffentlichungsfähig - Have neither mitgezählt.

And so simply goes it:

in the function create():

if ( g.scaleH ) {

    //  ...HSE Hemisphere Start- End
    g.scalePoleHSE = function( u, v, t ) { return  1 - ( g.startPole( u, t ) + ( g.endPole( u, t ) - g.startPole(u, t ) ) * g.scalePoleH( v, t ) ) }

} else {

    // uses the decomposed scale function (South and North)
    g.scalePoleS = function( u, v, t ) { return 2 * ( g.startPole( u, t ) + ( g.endPole( u, t ) - g.startPole( u, t ) ) * g.scalePole(  v / 2, t ) ) }
    g.scalePoleN = function( u, v, t ) { return 2 * ( 1 - g.endPole( u, t ) + ( g.endPole( u, t ) - g.startPole( u, t ) ) * ( 1 - g.scalePole( 1 -  v / 2, t ) ) ) }

}

and then in morphVertices( time ) The Berechnung the suitable Polwinkels theta .

if ( g.scaleH )  {

    // scaling between poles and equator (start- and endPole) by hemisphere --> south is like north
    theta = south_north * pi2 * g.scalePoleHSE( nji, nih, t );

} else {

    // scaling of the sphere between south and north (start- and endPole) with decomposed function
    theta = south_north * pi2 * ( 1 - ( south_north === SOUTH ? g.scalePoleS( nji, nih, t ) : g.scalePoleN( nji, nih, t ) ) );

}

in the Sandbox [...]

now available, and there [...]

momentarily News video 4.

10/28/17 ▲

HofK

there with indexed BufferGeometry now integral things in THREEp functions, be I thereby The so-called Dreieckssuppe, non indexed Buffer Geometry to do.

Manch of/ one crashes as hobby on gigantic Puzzle, I beget me one systematisches confusion and zwänge it then by JavaScript into benötigte Order.

my benefit now with the second Geometrie-Variant, I anhand the first Variante very quick The Korrektheit Verify can. so is yet no graphic To see, there only create() existing and the positions not yet accounts are, but anhand of/ one Kontrollausgabe sees one, that it is correct.

accounts go The to a only virtual existierendem vertex gehörenden faces and the jeweilige corner a,b or c the Dreiecks.

naturally there again Indexrechnungen ( fIdx - face index) where one

must.

if ( j === 0 ) {

if( i > bottomS ) {
fIdx = uWed * ( i - 1 ) * ( i - 1 ) + w * ( 2 * ( i - 1 ) + 1 ) - uWed * bottomS * bottomS;
...
if( i < topS ) {
fIdx = uWed * i * i + w * ( 2 * i + 1 ) - uWed * bottomS * bottomS;

----

if ( j > 0 ) {

if( i > bottomS ) {
fIdx = uWed * ( i - 1 ) * ( i - 1 ) + w * ( 2 * ( i - 1 ) + 1 ) + 2 * ( j - 1 ) - uWed * bottomS * bottomS;
...
if( i < topS ) {
fIdx = uWed * i * i + w * ( 2 * i + 1 ) + 2 * j - 1 - uWed * bottomS * bottomS;

----

if ( w === uWed - 1) {

if( i > bottomS ) {
fIdx = uWed * ( i - 1 ) * ( i - 1 ) + w * ( 2 * ( i - 1 ) + 1 ) + 2 * ( i - 1 ) - uWed * bottomS * bottomS;
...
if( i < topS ) {
fIdx = uWed * i * i + w * ( 2 * i + 1 ) + 2 * i - 1 - uWed * bottomS * bottomS;

with

fPos = fIdx * 9;

vFace.push( fPos );
vPos.push( fPos + b );

fIdx ++;

go The ermittelten values stored. here in the example The corner b (Constant 3, three Koordinatenwerte apiece point) for position. the depends from the jeweiligen Anfangsecke and the Drehsinn (south/ Nord different) ex and corresponds to the order with indexedBufferGeometry.

moreover there again "Konstruktionsblatt".

11/01/17 ▲

HofK

in between time something Abwechselung with the Indexfummelei.

In einfachem english positioned ask understand I, and so could I dort [...]

possible something help on.

moreover have I only one vorhandenes example slight changed and english made.

It can under [...]

something below (with nodes) ausprobiert go.

<!doctype html>
<html long="de">
<head>
<title> picture ball </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<script src="../js/three.mins.87.js"></script>
<script src="../js/OrbitControls.js"></script>
<script src="../js/THREEx.WindowResize.js"></script>
<div id="threejs" style="position: absolute; left:0px; top:0px"></div>
</body>
<script>
var boards = [];
var texture = [];
var matTexture = [];
init();
animate();
//...........................

function init() {

    scene  = new THREE.Scene();
    camera = new THREE.PerspectiveCamera( 45, window.innerWidth/ window.innerHeight,1, 300000 );
    scene.add( camera );
    camera.position.set( 0, 1500, 5000 );
    renderer = new THREE.WebGLRenderer( { antialias:true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.setClearColor( 0xeeeeee );
    container = document.getElementById('threejs' );
    container.appendChild( renderer.domElement );
    THREEx.WindowResize( renderer, camera );
    controls = new THREE.OrbitControls( camera, renderer.domElement );
    texture[0] = new THREE.TextureLoader().load( "waterlily.png" );
    texture[1] = new THREE.TextureLoader().load( "dahlia.jpg" );
    texture[2] = new THREE.TextureLoader().load( "petunia.jpg" );
    texture[3] = new THREE.TextureLoader().load( "frog.jpg" );

    for (var z = 0; z < 4; z++) {

        matTexture[z] = new THREE.MeshBasicMaterial( { color:0xffdd99, map: texture[z], transparent:true, opacity:0.8, wireframe:false} );

    }

    // ball
    materialSph = new THREE.MeshBasicMaterial( { color: 0x0099dd, transparent: true, opacity: 0.8, wireframe:false } );
    sphGeo  = new THREE.SphereGeometry(1200, 8, 8);
    sphere = new THREE.Mesh( sphGeo, materialSph );
    scene.add( sphere );
    // board for some things
    materialBoard   = new THREE.MeshBasicMaterial({color:0xdddddd, transparent:true, opacity:0.4, wireframe: true });
    boardGeo  = new THREE.PlaneGeometry(500,500);
    picGeo = new THREE.PlaneGeometry( 200, 200 );

    for (var i = 0; i < sphGeo.vertices.length; i++)	{

        board = new THREE.Mesh( boardGeo, materialBoard );// board for pictures etc.
        pic = new THREE.Mesh( picGeo, matTexture[ i % 4 ] );
        board.add( pic ) ;//  add picture to the board
        pic.position.x = -70;// position on the board
        pic.position.y = 120;
        boards.push( board );
        scene.add( boards[ i ] );
        boards[ i ].position.set( 1.3 * sphGeo.vertices[ i ].x , 1.3 * sphGeo.vertices[ i ].y, 1.3 * sphGeo.vertices[ i ].z );

    }

}

function animate() {

    requestAnimationFrame( animate );

    for( var n = 0; n < boards.length; n ++ ) {

        boards[ n ].lookAt( camera.position );
        // or sea https://discourse.threejs.org/t/add-marker-to-rotating-globe-object-help/1116/6
        // boards[ n ].quaternion.copy( camera.quaternion );

    }

    renderer.render( scene, camera );
    controls.update();

}

</script>
</html>

11/03/17 ▲

HofK

small Nachschlag to discourse.threejs.org Help (s.o.) [...]

<!doctype html>
<html long="de">
<head>
<title> picture coil </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<script src="../js/three.mins.87.js"></script>
<script src="../js/OrbitControls.js"></script>
<script src="../js/THREEx.WindowResize.js"></script>
<!--  https://github.com/hofk/THREEf.js/blob/master/THREEf_87/THREEf.js -->
<script src="../js/THREEf.js"></script>
<div id="threejs" style="position: absolute; left:0px; top:0px"></div>
</body>
<script>
var boards = [];
var texture = [];
var matTexture = [];
init();
animate();
//...........................

function init() {

    scene  = new THREE.Scene();
    camera = new THREE.PerspectiveCamera( 75, window.innerWidth/ window.innerHeight,1, 100000 );
    scene.add( camera );
    camera.position.set( -200, 500, 12000 );
    renderer = new THREE.WebGLRenderer( { antialias:true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.setClearColor( 0xeeeeee );
    container = document.getElementById('threejs' );
    container.appendChild( renderer.domElement );
    THREEx.WindowResize( renderer, camera );
    controls = new THREE.OrbitControls( camera, renderer.domElement );
    texture[0] = new THREE.TextureLoader().load( "waterlily.png" );
    texture[1] = new THREE.TextureLoader().load( "dahlia.jpg" );
    texture[2] = new THREE.TextureLoader().load( "petunia.jpg" );
    texture[3] = new THREE.TextureLoader().load( "frog.jpg" );

    for (var z = 0; z < 4; z++) {

        matTexture[z] = new THREE.MeshBasicMaterial( { map: texture[z], transparent:true, opacity:0.8, wireframe:false} );

    }

    // coil generated with addon THREEf.js
    var geometry = new THREE.Geometry();
    geometry.createMorphGeometry = THREEf.createMorphGeometry;// insert the method from THREEf.js
    // apply the method with some parameters

    geometry.createMorphGeometry({

        radius: 200,
        height: 600,
        radiusSegments: 18,
        heightSegments: 80,
        withBottom: true,
        withTop: true,
        centerX: function ( v, t ) { return 2 * Math.sin( 6 * Math.PI * v ) },
        centerY: function ( v, t ) { return v * ( v + 10 ) },
        centerZ: function ( v, t ) { return 2 * Math.cos( 6 * Math.PI * v ) }

    });

    var material = new THREE.MeshBasicMaterial( { color: 0x0099dd, transparent: true, opacity: 0.8, wireframe:false } );
    var mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );
    // board for some things
    materialBoard   = new THREE.MeshBasicMaterial({color:0xdd00dd, transparent:true, opacity:0.5, wireframe: false });
    boardGeo  = new THREE.PlaneGeometry(500,500);
    picGeo = new THREE.PlaneGeometry( 160, 160 );
    idx = 0;

    for (var i = 0; i < geometry.vertices.length; i++)	{

        if ( i % 32 === 0) {

            board = new THREE.Mesh( boardGeo, materialBoard );// board for pictures etc.
            pic1 = new THREE.Mesh( picGeo, matTexture[ idx % 4 ] );
            pic2 = new THREE.Mesh( picGeo, matTexture[ ( idx % 4 ) % 2 ] );
            board.add( pic1 );//  add picture to the board
            board.add( pic2 );
            pic1.position.x = -70;// position on the board
            pic1.position.y = 120;
            pic1.position.z = 20;
            pic2.position.x = 80;
            pic2.position.y = -120;
            pic2.position.z = 20;
            boards.push( board );
            scene.add( boards[ idx ] );
            boards[ idx ].position.set( 1.4 * geometry.vertices[ i ].x ,  geometry.vertices[ i ].y + 300, 1.4 * geometry.vertices[ i ].z );
            idx ++;

        }

    }

}

function animate() {

    requestAnimationFrame( animate );

    for( var n = 0; n < boards.length; n ++ ) {

        boards[ n ].quaternion.copy( camera.quaternion );

    }

    renderer.render( scene, camera );
    controls.update();

}

</script>
</html>

-----------------------------------------------------------------------------------------

with of my Indexrechnerei has me a wrong gesetzte Klammer aufgehalten. Permanent above away red and long not discover. the Result was only in designed Konstellationen wrong.

evident not correctly

now works But

11/08/17 ▲

p.specht

Wow!

XProfan 11
Computer: Gerät, daß es in Mikrosekunden erlaubt, 50.000 Fehler zu machen, zB 'daß' statt 'das'...

11/08/17 ▲

HofK

have soeben whom "Buddelkasten" on the latest stood brought. [...]

In it can now too Gebilde from the three.js "Dreieckssuppe" non indexed BufferGeometry produce.

on the lane to there was uv Mapping once "eigen".
there comes The question on "bow or feature?"

some Error are simply so "schön", that something from it can make.

yet missing with non indexed The Berechnung the Normalen, with indexed becomes there momentarily The three.js interne function using. tappt im dunkeln lead but To unschönen sewed and must too yet supplant go. the gives again a ausgiebige Rechnerei How with THREEf.

11/10/17 ▲

Georg
Teles

In things graphic be I a Niete but verfolge The Thread already longer and the Examples let Real plenty Spielerei spare, there can I too only marvel

genial !

XProfan X3
TC-Programming [...]

XProfan 8.0 - 10.0 - X2 - X3 - X4

11/11/17 ▲

HofK

Georg Teles (11.11.2017)

In things graphic be I a Niete ...

my skills with graphic are too sooner humble, here becomes only slightly dreidimensionales think, something maths in shape of 3D Geometrie and a little dreidimensionales calculate (Vektorrechnung) needed. And then The Datenfelder with the lovely Indexrechnereien.

definitive is the zugrunde liegende Library three.js, The The 3D Web-graphic webGL first handhabbar power.

___________________________________________________

The Berechnung the Normalen went faster as adopted, I right simply of THREEf copy could and only some Changes anstanden.

too The sewed are already almost lane. in the Image discernible, that on the Äquator no Naht visible is and on the interface first/last wedge only yet on the Nordhalbkugel.

The Nahtglättung is yet half-way überschaubar.

// mean of equator normals, prevents a seam

if ( g.bottom < eqt && g.top > eqt ) {

    for ( var vS = g.southTopVertex, vN = g.northBottomVertex; vS >= g.southTopVertex - eqt * uWed ; vS --, vN -- ) {

        nX = ( g.normals[ g.vertexPositions [ vS ][ 0 ] ] + g.normals[ g.vertexPositions [ vN ][ 0 ] ] ) / 2;
        nY = ( g.normals[ g.vertexPositions [ vS ][ 0 ] + 1 ] + g.normals[ g.vertexPositions [ vN ][ 0 ] + 1 ] ) / 2;
        nZ = ( g.normals[ g.vertexPositions [ vS ][ 0 ] + 2 ] + g.normals[ g.vertexPositions [ vN ][ 0 ] + 2 ] )  / 2;

        for ( var f = 0; f < g.vertexFaces[ vS ].length; f ++ ) {

            g.normals[ g.vertexPositions[ vS ][ f ] ] = nX;
            g.normals[ g.vertexPositions[ vS ][ f ] + 1 ] = nY;
            g.normals[ g.vertexPositions[ vS ][ f ] + 2 ] = nZ;

        }

        for ( var f = 0; f < g.vertexFaces[ vN ].length; f ++ ) {

            g.normals[ g.vertexPositions[ vN ][ f ] ] = nX;
            g.normals[ g.vertexPositions[ vN ][ f ] + 1 ] = nY;
            g.normals[ g.vertexPositions[ vN ][ f ] + 2 ] = nZ;

        }

    }

}

// sometimes mean value of the normals of start and end wedge, prevents a seam

if ( wed === uWed ) {

    if ( g.bottom < eqt ) {

        wL = g.wedgeSouthEndIdx.length;
        // console.log( " wL " + wL ); // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

        for ( var wIdx = 0; wIdx < wL; wIdx ++ ) {

            x1 = g.positions[ g.vertexPositions[ g.wedgeSouthEndIdx[ wIdx ] ][ 0 ] ];
            y1 = g.positions[ g.vertexPositions[ g.wedgeSouthEndIdx[ wIdx ] ][ 0 ] + 1 ];
            z1 = g.positions[ g.vertexPositions[ g.wedgeSouthEndIdx[ wIdx ] ][ 0 ] + 2 ];
            // console.log( " wIdx " + wIdx + " : " +  x1 + ", " +  y1 + ", " +  z1 ); // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
            x2 = g.positions[ g.vertexPositions[ g.wedgeSouthStartIdx[ wL - wIdx - 1 ] ][ 0 ] ];
            y2 = g.positions[ g.vertexPositions[ g.wedgeSouthStartIdx[ wL - wIdx - 1 ] ][ 0 ] + 1 ];
            z2 = g.positions[ g.vertexPositions[ g.wedgeSouthStartIdx[ wL - wIdx - 1 ] ][ 0 ] + 2 ];

            if ( Math.sqrt( ( x2 - x1 ) * ( x2 - x1 ) + ( y2 - y1 ) * ( y2 - y1 ) + ( z2 - z1 ) * ( z2 - z1 ) ) < 0.0001 ) {

                nX1 = g.normals[ g.vertexPositions[ g.wedgeSouthEndIdx[ wIdx ] ][ 0 ] ];
                nY1 = g.normals[ g.vertexPositions[ g.wedgeSouthEndIdx[ wIdx ] ][ 0 ] + 1 ];
                nZ1 = g.normals[ g.vertexPositions[ g.wedgeSouthEndIdx[ wIdx ] ][ 0 ] + 2 ];
                nX2 = g.normals[ g.vertexPositions[ g.wedgeSouthStartIdx[ wL - wIdx - 1 ] ][ 0 ] ];
                nY2 = g.normals[ g.vertexPositions[ g.wedgeSouthStartIdx[ wL - wIdx - 1 ] ][ 0 ] + 1 ];
                nZ2 = g.normals[ g.vertexPositions[ g.wedgeSouthStartIdx[ wL - wIdx - 1 ] ][ 0 ] + 2 ];
                nX = ( nX1 + nX2 ) / 2;
                nY = ( nY1 + nY2 ) / 2;
                nZ = ( nZ1 + nZ2 ) / 2;

                for ( var f = 0; f < g.vertexFaces[ g.wedgeSouthEndIdx[ wIdx ] ].length; f ++ ) {

                    g.normals[ g.vertexPositions[ g.wedgeSouthEndIdx[ wIdx ] ][ f ] ] = nX;
                    g.normals[ g.vertexPositions[ g.wedgeSouthEndIdx[ wIdx ] ][ f ] + 1 ] = nY;
                    g.normals[ g.vertexPositions[ g.wedgeSouthEndIdx[ wIdx ] ][ f ] + 2 ] = nZ;
                    g.normals[ g.vertexPositions[ g.wedgeSouthStartIdx[ wL - wIdx - 1 ] ][ f ] ] = nX;
                    g.normals[ g.vertexPositions[ g.wedgeSouthStartIdx[ wL - wIdx - 1 ] ][ f ] + 1 ] = nY;
                    g.normals[ g.vertexPositions[ g.wedgeSouthStartIdx[ wL - wIdx - 1 ] ][ f ] + 2 ] = nZ;

                }

            }

        }

    }

}

if (g.top > eqt) missing yet. likewise a check on optimierbarkeit the Lines.

five time } end are not straight clear, there afford itself then abschließende comments on. (in the Gesamtprogramm are it here then 7 clinging!) by the Faltung the Codes certain lines keeps one (usually) but yet whom Überblick.

11/12/17 ▲

HofK

after too The latest Naht neatened was, fell me one, I vorhatte with non indexed BufferGeometry a Explosionsdarstellung To try.

and the functions dank the vorhandenen data imaginable simply.

Since I to Berechnung the Vertex-Normalen The Normalen the Dreiecke (faces) benötigte, these in the Datenfeld g.faceNormals abgespeichert.

add one now To eachone corner (vertex - Ortsvektor) one multiple this Dreiecks-Normalen, so treibt it The Dreiecke from the middle since apart.

there The Dreiecke of ground, lid and wedge identische Normalen having (parallel!) go tappt im dunkeln gleichartig moved and stay so together.

one can the now too in the Sandbox [...]

try. The function explode works naturally only with non indexed and takes solely whom Zeitparameter t against.