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

Question

控制台日志信息：THREE.WebGLRenderer91dev

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

如果我使用 THREE.SpriteCanvasMaterial，我将在 render() 函数中得到异常。 但是如果我使用 THREE.PointsMaterial 那么一切正常。

Answer 1

SpriteCanvasMaterial 与 CanvasRenderer 一起使用。

当使用 WebGLRenderer 时，请将 SpriteMaterial 与 THREE.Sprite 一起使用，将 PointsMaterial 与 THREE.Points 一起使用。

three.js r.90