三.js SpriteCanvasMaterial:TypeError:无法读取未定义的属性“替换"(在渲染函数中) [英] three.js SpriteCanvasMaterial: TypeError: Cannot read property 'replace' of undefined (in render function)

问题描述

控制台日志信息:THREE.WebGLRenderer 91dev

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

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

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

推荐答案

SpriteCanvasMaterial 将与 CanvasRenderer 一起使用.

当使用 WebGLRenderer 时，使用 SpriteMaterial 和 THREE.Sprite，使用 PointsMaterial 和 THREE.积分.

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

three.js r.90

three.js r.90

这篇关于三.js SpriteCanvasMaterial:TypeError:无法读取未定义的属性“替换"(在渲染函数中)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！