1

I'm trying to have a snow effect on my magento site. I got a code from seb.ly which i tried on a normal html5 website and it worked, but i added it on my magento page it didn't work. I added it to configuration-design-footer/header on different occasions but it still didn't work aswell. Does any one have a better recommendation on getting this to work?

This is the code

            <script type="text/javascript" src="js/ThreeCanvas.js"></script>
            <script type="text/javascript" src="js/Snow.js"></script>
            <script>
            document.addEventListener('DOMContentLoaded',init);
            var SCREEN_WIDTH = window.innerWidth;
            var SCREEN_HEIGHT = window.innerHeight*3;
            var container;
            var particle;
            var camera;
            var scene;
            var renderer;
            var mouseX = 0;
            var mouseY = 0;
            var windowHalfX = window.innerWidth / 2;
            var windowHalfY = window.innerHeight / 2;
            var particles = [];
            var particleImage = new Image();//THREE.ImageUtils.loadTexture( "images/ParticleSmoke.png" );
            particleImage.src = 'images/ParticleSmoke.png';
            function init() {
            container = document.createElement('div');

            document.body.appendChild(container);
            camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
            camera.position.z = 1000;
            document.getElementById("container").style.position="absolute";
            document.getElementById("container").style.margin="auto";
            document.getElementById("container").style.width="100%";
            document.getElementById("container").style.zIndex = "1"; 
            document.getElementById("container").style.marginBottom = "20px"; 
            scene = new THREE.Scene();
            scene.add(camera);
            renderer = new THREE.CanvasRenderer();
            renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
            var material = new THREE.ParticleBasicMaterial( { map: new THREE.Texture(particleImage) } );
            for (var i = 0; i < 500; i++) {
            particle = new Particle3D( material);
            particle.position.x = Math.random() * 2000 - 1000;
            particle.position.y = Math.random() * 2000 - 1000;
            particle.position.z = Math.random() * 2000 - 1000;
            particle.scale.x = particle.scale.y = 0.5;
            scene.add( particle );
            particles.push(particle);
            }
            container.appendChild( renderer.domElement );
            document.addEventListener( 'mousemove', onDocumentMouseMove, false );
            document.addEventListener( 'touchstart', onDocumentTouchStart, false );
            document.addEventListener( 'touchmove', onDocumentTouchMove, false );
            setInterval( loop, 1000 / 60 );
            }
            function onDocumentMouseMove( event ) {
            mouseX = event.clientX - windowHalfX;
            mouseY = event.clientY - windowHalfY;
            }
            function onDocumentTouchStart( event ) {
            if ( event.touches.length == 1 ) {
            event.preventDefault();
            mouseX = event.touches[ 0 ].pageX - windowHalfX;
            mouseY = event.touches[ 0 ].pageY - windowHalfY;
            }
            }
            function onDocumentTouchMove( event ) {
            if ( event.touches.length == 1 ) {
            event.preventDefault();
            mouseX = event.touches[ 0 ].pageX - windowHalfX;
            mouseY = event.touches[ 0 ].pageY - windowHalfY;
            }
            }
            //
            function loop() {
            for(var i = 0; i<particles.length; i++)
            {
            var particle = particles[i];
            particle.updatePhysics();
            with(particle.position)
            {
            if(y<-1000) y+=2000;
            if(x>1000) x-=2000;
            else if(x<-1000) x+=2000;
            if(z>1000) z-=2000;
            else if(z<-1000) z+=2000;
            }
            }
            camera.position.x += ( mouseX - camera.position.x ) * 0.05;
            camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
            camera.lookAt(scene.position);
            renderer.render( scene, camera );
            }
            </scrip
0

add js file in base/js folder and add your js like below code.

<script type="text/javascript" src="/js/ThreeCanvas.js"></script>     
<script type="text/javascript" src="/js/Snow.js"></script>
  • Hi Qaisar, thanks for your repsose. I've added that to my code but i still cant get it to work. – Jahswey Nov 23 '15 at 16:22
  • did you move ur file in basedirectory/js/ your files – Qaisar Satti Nov 23 '15 at 16:53
  • I've added the files to my base file. Just to be sure, I added it to all the templates in my installation but its not working out. Do you think it has any thing to do with the particle image link? I've added the files to my base file. Just to be sure, I added it to all the templates in my installation but its not working out. Do you think it has any thing to do with the particle image link? var particleImage = new Image();//THREE.ImageUtils.loadTexture( "images/ParticleSmoke.png" ); particleImage.src = 'images/ParticleSmoke.png'; – Jahswey Nov 23 '15 at 17:06
  • did you check the console for js error? – Qaisar Satti Nov 24 '15 at 4:28
  • Hi, I got this error see image prntscr.com/96at8c – Jahswey Nov 24 '15 at 8:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.