Question

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

    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，纹理没有显示在精灵上

1 个答案: