CODEWITHSUNDEEP
three.jssprite
Vega4
Vega4

Reputation: 979

THREE.js , texture not displayed on a sprite

I'm trying to modify the canves/lines.js example and to display textured sprites instead of dots. I load a texture from a PNG file and I have replaced regular dots with sprites. They do not show. 

    function init() {
            var container, separation = 100, amountX = 50, amountY = 50,
            particles, particle,sprite;

            var crateTexture = THREE.ImageUtils.loadTexture( 'images/crate.png' );
            var crateMaterial = new THREE.SpriteMaterial( { map: crateTexture, useScreenCoordinates: false, color: 0xff0000 } );
            container = document.createElement('div');
            document.body.appendChild(container);

            camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
            camera.position.z = 100;

            scene = new THREE.Scene();

            renderer = new THREE.CanvasRenderer();
            renderer.setClearColor (0x5bb0d2, 1);
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            container.appendChild( renderer.domElement );

            // particles

            var PI2 = Math.PI * 2;
            var material = new THREE.SpriteCanvasMaterial( {

                color: 0xfffffff,
                program: function ( context ) {

                    context.beginPath();
                    context.arc( 0, 0, 0.5, 0, PI2, true );
                    context.fill();

                }

            } );

            var geometry = new THREE.Geometry();

            var x,y,z=0;
            for ( var i = 0; i < 100; i ++ ) {

                particle = new THREE.Sprite( crateMaterial );
                particle.position.x = Math.random() * 2 - 1;
                particle.position.y = Math.random() * 2 - 1;
                particle.position.z = Math.random() * 2 - 1;
                particle.position.normalize();
                particle.position.multiplyScalar( Math.random() * 10 + 450 );
                particle.scale.x = particle.scale.y = 64;
                scene.add( particle );

            }

what am I doing wrong ?

Upvotes: 0

Views: 469

Answers (1)

Vega4
Vega4

Reputation: 979

All I did was correct, there is an issue when reading textures from local computer. The solution is to assign proper privilages to web serwer OR to allow Chrome or other browser to read local files. in case of Chrome, you can create a shortcut such as this:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" chrome --allow-file-access-from-files

Upvotes: 1

Related Questions