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

1 Answer 1

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>
21
  • Hi Qaisar, thanks for your repsose. I've added that to my code but i still cant get it to work.
    – Jahswey
    Nov 23, 2015 at 16:22
  • did you move ur file in basedirectory/js/ your files Nov 23, 2015 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, 2015 at 17:06
  • did you check the console for js error? Nov 24, 2015 at 4:28
  • Hi, I got this error see image prntscr.com/96at8c
    – Jahswey
    Nov 24, 2015 at 8:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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