0

How can I solve the following issues?

1- I would like to delete controls panel on top right (behind stoke but still there). This is the page https://lovespeechgalaxy.xyz/love-galaxy/insert/navigate.php

2- I would like to zoom-in (maybe moving the camera?) a little bit and then increase the words that you are looking as a background on this page https://lovespeechgalaxy.xyz/love-galaxy/insert/navigate.php How can achieve this and which parameter on my code should I change?

My code


        
            import * as THREE from '../../build/three.module.js';

            import Stats from '../../jsm/libs/stats.module.js';

            import { GUI } from '../../jsm/libs/dat.gui.module.js';

            let camera, scene, renderer, stats, material, material2, material3, material4, material5, material6, material7;
            let mouseX = 0, mouseY = 0;

            let windowHalfX = window.innerWidth / 2;
            let windowHalfY = window.innerHeight / 2;

            init();
            animate();

            function init() {

                camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 2, 2000 );
                camera.position.z = 1000;

                scene = new THREE.Scene();
                scene.fog = new THREE.FogExp2( 0x0000020, 0.001 );
                
                

                const geometry = new THREE.BufferGeometry();
                const geometry2 = new THREE.BufferGeometry();
                const geometry3 = new THREE.BufferGeometry();
                const geometry4 = new THREE.BufferGeometry();
                const geometry5 = new THREE.BufferGeometry();
                const geometry6 = new THREE.BufferGeometry();
                const geometry7 = new THREE.BufferGeometry();

                const vertices = [];
                const vertices2 = [];
                const vertices3 = [];
                const vertices4 = [];
                const vertices5 = [];
                const vertices6 = [];
                const vertices7 = [];

    const sprite = new THREE.TextureLoader().load( '../../words/hate-words/fuckyou.png' );
                const sprite2 = new THREE.TextureLoader().load( '../../words/hate-words/bastard.png' );
                const sprite3 = new THREE.TextureLoader().load( '../../words/hate-words/idiot.png' );
                const sprite4 = new THREE.TextureLoader().load( '../../words/hate-words/bitch.png' );
                const sprite5 = new THREE.TextureLoader().load( '../../words/hate-words/nigger.png' );
                const sprite6 = new THREE.TextureLoader().load( '../../words/hate-words/faggot.png' );
                const sprite7= new THREE.TextureLoader().load( '../../words/hate-words/handicapped.png' );
                

                for ( let i = 0; i < 10000; i ++ ) {

                    const x = 4000 * Math.random() - 1000;
                    const y = 2000 * Math.random() - 1000;
                    const z = 2000 * Math.random() - 1000;

                    vertices.push( x, y, z );

                }
                
                for ( let i = 0; i < 10000; i ++ ) {

                    const x = 4000 * Math.random() - 1000;
                    const y = 2000 * Math.random() - 1000;
                    const z = 2000 * Math.random() - 1000;

                    vertices2.push( x, y, z );

                }
                
                for ( let i = 0; i < 10000; i ++ ) {

                    const x = 4000 * Math.random() - 1000;
                    const y = 2000 * Math.random() - 1000;
                    const z = 2000 * Math.random() - 1000;

                    vertices3.push( x, y, z );

                }
                
                                for ( let i = 0; i < 10000; i ++ ) {

                    const x = 4000 * Math.random() - 1000;
                    const y = 2000 * Math.random() - 1000;
                    const z = 2000 * Math.random() - 1000;

                    vertices4.push( x, y, z );

                }
                
                for ( let i = 0; i < 10000; i ++ ) {

                    const x = 4000 * Math.random() - 1000;
                    const y = 2000 * Math.random() - 1000;
                    const z = 2000 * Math.random() - 1000;

                    vertices5.push( x, y, z );

                }
                
                for ( let i = 0; i < 10000; i ++ ) {

                    const x = 4000 * Math.random() - 1000;
                    const y = 2000 * Math.random() - 1000;
                    const z = 2000 * Math.random() - 1000;

                    vertices6.push( x, y, z );

                }
                
                for ( let i = 0; i < 10000; i ++ ) {

                    const x = 4000 * Math.random() - 1000;
                    const y = 2000 * Math.random() - 1000;
                    const z = 2000 * Math.random() - 1000;

                    vertices7.push( x, y, z );

                }



                geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
                geometry2.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices2, 3 ) );
                geometry3.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices3, 3 ) );
                geometry4.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices4, 3 ) );
                geometry5.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices5, 3 ) );
                geometry6.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices6, 3 ) );
                geometry7.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices7, 3 ) );




                material = new THREE.PointsMaterial( { size: 35, sizeAttenuation: true, map: sprite, alphaTest: 0.5, transparent: true } );
                material2 = new THREE.PointsMaterial( { size: 35, sizeAttenuation: true, map: sprite2, alphaTest: 0.5, transparent: true } );
                material3 = new THREE.PointsMaterial( { size: 35, sizeAttenuation: true, map: sprite3, alphaTest: 0.5, transparent: true } );
                material4 = new THREE.PointsMaterial( { size: 35, sizeAttenuation: true, map: sprite4, alphaTest: 0.5, transparent: true } );
                material5 = new THREE.PointsMaterial( { size: 35, sizeAttenuation: true, map: sprite5, alphaTest: 0.5, transparent: true } );
                material6 = new THREE.PointsMaterial( { size: 35, sizeAttenuation: true, map: sprite6, alphaTest: 0.5, transparent: true } );
                material7 = new THREE.PointsMaterial( { size: 35, sizeAttenuation: true, map: sprite7, alphaTest: 0.5, transparent: true } );
                
                


                

                const particles = new THREE.Points( geometry, material );
                scene.add( particles );
                
                const particles2 = new THREE.Points( geometry2, material2 );
                scene.add( particles2 );
                
                const particles3 = new THREE.Points( geometry3, material3 );
                scene.add( particles3 );
                
                const particles4 = new THREE.Points( geometry4, material4 );
                scene.add( particles4 );
                
                const particles5 = new THREE.Points( geometry5, material5 );
                scene.add( particles5 );
                
                const particles6 = new THREE.Points( geometry6, material6 );
                scene.add( particles6 );
                
                const particles7 = new THREE.Points( geometry7, material7 );
                scene.add( particles7 );

                //

                renderer = new THREE.WebGLRenderer();
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );
                document.body.appendChild( renderer.domElement );
                renderer.setClearColor( 0x000000);

                //

            

                //

                const gui = new GUI();

                gui.add( material, 'sizeAttenuation' ).onChange( function (){ 

                    material.needsUpdate = true;

                } );

                gui.close();

                //

                document.body.style.touchAction = 'none';
                document.body.addEventListener( 'pointermove', onPointerMove );

                //

                window.addEventListener( 'resize', onWindowResize );

            }

            function onWindowResize() {

                windowHalfX = window.innerWidth / 2;
                windowHalfY = window.innerHeight / 2;

                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();

                renderer.setSize( window.innerWidth, window.innerHeight );

            }

            function onPointerMove( event ) {

                if ( event.isPrimary === false ) return;

                mouseX = event.clientX - windowHalfX;
                mouseY = event.clientY - windowHalfY;

            }

            //

            function animate() {

                requestAnimationFrame( animate );

                render();
                stats.update();

            }

            function render() {

                const time = Date.now() * 0.00000000005;

                camera.position.x += ( mouseX - camera.position.x ) * 0.05;
                camera.position.y += ( - mouseY - camera.position.y ) * 0.05;

                camera.lookAt( scene.position );

                const h = ( 360 * ( 1.0 + time ) % 360 ) / 360;
                

                renderer.render( scene, camera );

            }

        </script>
cigien
  • 57,834
  • 11
  • 73
  • 112
a s
  • 29
  • 4
  • If you want to remove the control panel, why don’t you just delete the lines that created it? – M - Apr 15 '22 at 00:53

1 Answers1

0

Okay so I can offer a partial solution as of now;

  1. I'm not sure what you mean, please be more descriptive.

  2. You camera is currently controlled by the position of the mouse on the page.

         function onPointerMove( event ) {
         if ( event.isPrimary === false ) return;
         mouseX = event.clientX - windowHalfX;
         mouseY = event.clientY - windowHalfY;
     }

This code here processes the move even and caches the x/y position

When your scene is rendered here

        function render() {
            // Scene camera position is altered based on cusor position giving 'control' effect
            camera.position.x += ( mouseX - camera.position.x ) * 0.05;
            camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
            
             ..........
          
            renderer.render( scene, camera );
        }

If you want add zooming you can do super easily! PerspectiveCamera has built in support for zooming: https://threejs.org/docs/#api/en/cameras/PerspectiveCamera.zoom

Simply listen for mouse wheel changes (on even pinches for mobile) and adjust the camera's zoom on render!

Mousewheel event in modern browsers

Alternatively; You may just scratch all that code and use one of Threejs built-in controls libs like OrbitControls or FlyControls

https://threejs.org/docs/?q=controls#examples/en/controls/FlyControls

https://threejs.org/docs/?q=controls#examples/en/controls/OrbitControls

EDIT: Replying to comment:

If you want to make the words bigger globally simply change the size attribute in your material

                material2 = new THREE.PointsMaterial( { size: 35, sizeAttenuation: true, map: sprite2, alphaTest: 0.5, transparent: true } );

https://threejs.org/docs/?q=points#api/en/materials/PointsMaterial

Threejs has some really good documentation, consider reading through there and familiarizing yourself with what common parameters do!

Additionally if you did add zooming to the camera you will be able to shift through the depth of the words which I think would look nice, but depending on what you're going for its up to you.

If my replies have helped you please consider marking my answer as "accepted" - Good luck!

Eric Ballard
  • 71
  • 9