webgl three.js-如何顯示精靈？錯誤：未被捕獲的TypeError：無法在SpritePlugin.render讀取未定義的屬性'x'

Question

我是three.js的入門者。

我嘗試了在這里找到的代碼：創建場景

然后，我嘗試使用此處找到的代碼添加一個精靈： Sprite

但是由於出現以下錯誤，我無法使其工作：

Uncaught TypeError: Cannot read property 'x' of undefined
    at SpritePlugin.render (three.js:6973)
    at WebGLRenderer.render (three.js:21007)
    at render (sprite.html:43)

此處有html文件： http : //www.planetarium2016.com/sprite.html

我的錯誤在哪里？ 這是我的代碼：

<html>
    <head>
        <title>My first three.js app</title>
        <style>
            body { margin: 0; }
            canvas { width: 100%; height: 100% }
        </style>
    </head>
    <body>
        <script src="https://rawgithub.com/mrdoob/three.js/master/build/three.js"></script>
        <script>
            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
            var renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );
            // instantiate a loader
            var loader = new THREE.TextureLoader();
            //allow cross origin loading
                //loader.crossOrigin = '';
            // load a resource
            loader.load("https://codefisher.org/static/images/pastel-svg/256/bullet-star.png");
            var spriteMaterial = new THREE.SpriteMaterial( { map: loader, color: 0xffffff } );
            var sprite = new THREE.Sprite( spriteMaterial );
            sprite.scale.set(200, 200, 1);
            scene.add( sprite );
            camera.position.z = 2;
            var render = function () {
                requestAnimationFrame( render );
                renderer.render(scene, camera);
            };
            render();
        </script>
    </body>
</html>

Answer 1

我想說下面的幾行將解決該錯誤。

var spriteMap = loader.load("https://codefisher.org/static/images/pastel-svg/256/bullet-star.png");
var spriteMaterial = new THREE.SpriteMaterial( { map: spriteMap, color: 0xffffff } );

並且requestAnimationFrame是必需的。 讓我們保持render功能不變。

Answer 2

好吧，即使據說很簡單，用three.js和webGL顯示一個簡單的sprite也是一個問題。

我遇到了很多錯誤，需要結合兩種解決方案來實現：

WebGL-未加載紋理
Three.js-如何等待圖像加載？
1. 如果您不在服務器上運行，則需要將映像轉換為二進制文件
2. 您需要等待圖像加載完成。

最后，以下代碼有效：

<html>
    <head>
        <title>My first three.js app</title>
        <style>
            body { margin: 0; }
            canvas { width: 100%; height: 100% }
        </style>
    </head>
    <body>
        <script src="https://rawgithub.com/mrdoob/three.js/master/build/three.js"></script>
        <script>
            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 500);
            camera.position.set(0, 10, 100);
            camera.lookAt(new THREE.Vector3(0, 0, 0));
            var renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );

            var material = new THREE.LineBasicMaterial({ color: 0x0000ff });
            var geometry = new THREE.Geometry();
            var a = 5;
            geometry.vertices.push(new THREE.Vector3(-a, 0, 0));
            geometry.vertices.push(new THREE.Vector3(0, a, 0));
            geometry.vertices.push(new THREE.Vector3(a, 0, 0));
            geometry.vertices.push(new THREE.Vector3(0, 0, -a));

            var line = new THREE.Line(geometry, material);

            scene.add(line);

            var img = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABISURBVDhPzc1bCgAgCETR9r9poxynEHoIEp0vLS4WCWpBMfq09yYI8QFuTfBhlgFXHSgj4KB0pYzAwYfx+9FVgFv92ifBIFIBJq9zqYwecEQAAAAASUVORK5CYII=";
            var loader = new THREE.TextureLoader();
            var spriteMaterial = new THREE.SpriteMaterial( { color: 0x00ff00 } );
            var spriteMaterial;
            loader.load(img,
                function(texture)
                    {
                        spriteMaterial.map = texture;
                        spriteMaterial.needsUpdate = true;
                    }

                );
            var sprite = new THREE.Sprite( spriteMaterial );
            sprite.scale.set(6, 6, 1);
            sprite.position.set( 0, 6, -6 );
            scene.add( sprite );

            var render = function () {
                requestAnimationFrame( render );
                renderer.render(scene, camera);
            };
            render();
        </script>
    </body>
</html>

webgl three.js-如何顯示精靈？錯誤：未被捕獲的TypeError：無法在SpritePlugin.render讀取未定義的屬性'x'

問題描述

2 個解決方案

解決方案1
1 2017-04-03 06:44:05

解決方案2
0 2017-03-26 10:37:54

webgl three.js-如何顯示精靈？ 錯誤：未被捕獲的TypeError：無法在SpritePlugin.render讀取未定義的屬性&#39;x&#39;

問題描述

2 個解決方案

解決方案1 1 2017-04-03 06:44:05

解決方案2 0 2017-03-26 10:37:54

webgl three.js-如何顯示精靈？錯誤：未被捕獲的TypeError：無法在SpritePlugin.render讀取未定義的屬性'x'

解決方案1
1 2017-04-03 06:44:05

解決方案2
0 2017-03-26 10:37:54