three.js SpriteCanvasMaterial: TypeError: Cannot read property 'replace' of undefined (in render function)

Question

console log info: THREE.WebGLRenderer 91dev

    var main3d = {
        scene: null, camera: null, renderer: null,

        init: function () {
            // initialize scene, camera etc.

            var _dotGeometry = new THREE.Geometry();
            _dotGeometry.vertices.push(new THREE.Vector3(2, 4, 0));
            //var _dotMaterial = new THREE.PointsMaterial({ size: 5, sizeAttenuation: false, color: 0x00ff00 });
            _dotMaterial = new THREE.SpriteCanvasMaterial({
                color: 0x00ff00,
                program: function (context) {
                    context.beginPath();
                    context.arc(0, 0, 0.05, 0, Math.PI * 2, true);
                    context.fill();
                }
            });
            var _dot = new THREE.Points(_dotGeometry, _dotMaterial);
            this.scene.add(_dot);
        }
    };

function animate() {
    requestAnimationFrame(animate);
    render();
    update();
}

function update() {
    main3d.controls.update();
}

function render() {
    if (main3d.renderer) {
        main3d.renderer.render(main3d.scene, main3d.camera);
    }
}

function initializeMain3d() {
    main3d.init();
    animate();
}

If I use THREE.SpriteCanvasMaterial, I will get exception in render() function. But if I use THREE.PointsMaterial then everything works fine.

Answer 1

SpriteCanvasMaterial is to be used with CanvasRenderer.

When using WebGLRenderer, use SpriteMaterial with THREE.Sprite and use PointsMaterial with THREE.Points.

three.js r.90