Example "Reflection balls (effects anaglyph)" library Three.js

Programming, development, testing

→

Three.js - JavaScript library for drawing graphics 3D in the pages HTML

→

Example "Reflection balls (effects anaglyph)" library Three.js

Looked at 5702 times Comments 1

Last Comment: (28 February 2025 16:23) ну че, круто read... Write a comment...

Example "Reflection balls (effects anaglyph)" library Three.js

last updated: 14 October 2020

Example we look, we test

Move the mouse and the scene will spin

Source code

Html

<!DOCTYPE html>
<html lang="en">
     <head>
          <title>three.js webgl - effects - anaglyph</title>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
          <style>
               body
               {
                    background:#777;
                    padding:0;
                    margin:0;
                    font-weight: bold;
                    overflow:hidden;
               }

               #info
               {
                    position: absolute;
                    top: 0px; width: 100%;
                    color: #ffffff;
                    padding: 5px;
                    font-family:Monospace;
                    font-size:13px;
                    text-align:center;
                    z-index:1000;
               }

               a
               {
                    color: #ffffff;
               }

               #webglmessage a { color:#da0 }
          </style>
     </head>

     <body>

          
          <script src="https://dir.by/example_lib/tree_js/three.js"></script>

          
          <script src="https://dir.by/example_lib/tree_js/AnaglyphEffect.js"></script>
          <script src="https://dir.by/example_lib/tree_js/WebGL.js"></script>

          <div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - effects - anaglyph. skybox by <a href="http://ict.debevec.org/~debevec/" target="_blank" rel="noopener">Paul Debevec</a></div>

          <script>

               if ( WEBGL.isWebGLAvailable() === false )
               {
                    document.body.appendChild( WEBGL.getWebGLErrorMessage() );
               }

               var container;

               var camera, scene, renderer, effect;

               var mesh, lightMesh, geometry;
               var spheres = [];

               var directionalLight, pointLight;

               var mouseX = 0;
               var mouseY = 0;

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

               document.addEventListener( 'mousemove', onDocumentMouseMove, false );

               init();
               animate();

               function init()
               {
                    container = document.createElement( 'div' );
                    document.body.appendChild( container );

                    camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 100 );
                    camera.position.z = 3;
                    camera.focalLength = 3;

                    var path = "https://dir.by/developer/three_js/example_effects_anaglyph/textures/cube/pisa/";
                    var format = '.png';
                    var urls = [
                         path + 'px' + format, path + 'nx' + format,
                         path + 'py' + format, path + 'ny' + format,
                         path + 'pz' + format, path + 'nz' + format
                    ];

                    var textureCube = new THREE.CubeTextureLoader().load( urls );

                    scene = new THREE.Scene();
                    scene.background = textureCube;

                    var geometry = new THREE.SphereBufferGeometry( 0.1, 32, 16 );
                    var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: textureCube } );

                    for ( var i = 0; i < 500; i ++ )
                    {
                         var mesh = new THREE.Mesh( geometry, material );

                         mesh.position.x = Math.random() * 10 - 5;
                         mesh.position.y = Math.random() * 10 - 5;
                         mesh.position.z = Math.random() * 10 - 5;

                         mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 3 + 1;

                         scene.add( mesh );

                         spheres.push( mesh );
                    }

                    //
                    renderer = new THREE.WebGLRenderer();
                    renderer.setPixelRatio( window.devicePixelRatio );
                    container.appendChild( renderer.domElement );

                    var width = window.innerWidth || 2;
                    var height = window.innerHeight || 2;

                    effect = new THREE.AnaglyphEffect( renderer );
                    effect.setSize( width, height );

                    //
                    window.addEventListener( 'resize', onWindowResize, false );
               }

               function onWindowResize()
               {
                    windowHalfX = window.innerWidth / 2;
                    windowHalfY = window.innerHeight / 2;

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

                    effect.setSize( window.innerWidth, window.innerHeight );
               }

               function onDocumentMouseMove(event)
               {
                    mouseX = ( event.clientX - windowHalfX ) / 100;
                    mouseY = ( event.clientY - windowHalfY ) / 100;
               }

               function animate()
               {
                    requestAnimationFrame( animate );

                    render();
               }

               function render()
               {
                    var timer = 0.0001 * Date.now();

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

                    camera.lookAt( scene.position );

                    for ( var i = 0, il = spheres.length; i < il; i ++ )
                    {
                         var sphere = spheres[ i ];

                         sphere.position.x = 5 * Math.cos( timer + i );
                         sphere.position.y = 5 * Math.sin( timer + i * 1.1 );
                    }

                    effect.render( scene, camera );
               }
          </script>
     </body>
</html>

Note!
Example does not work locally, because the image upload error.

Access to Image at 'https://dir.by/developer/three_js/example_effects_anaglyph/textures/cube/pisa/px.png' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Error: Access to url at 'http://...' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Решение!

На рабочем столе для иконки Google Chrome добавим парметры: --user-data-dir="C://Chrome dev session" --disable-web-security