THREE.js , 纹理未显示在精灵上

Question

我正在尝试修改 canves/lines.js 示例并显示带纹理的精灵而不是点。我从 PNG 文件加载纹理，并用 sprite 替换了常规点。他们不显示。

    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 );

            }

我做错了什么？

Answer 1

我所做的都是正确的，从本地计算机读取纹理时出现问题。解决方案是为 Web 服务器分配适当的权限，或者允许 Chrome 或其他浏览器读取本地文件。如果是 Chrome，您可以创建这样的快捷方式：

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

THREE.js , 纹理未显示在精灵上

THREE.js , texture not displayed on a sprite

sprite

three.js