WebGL Three.js大量文本渲染性能优化方案演示

本例使用了require.js来引入关联库。

three, canvas, text

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 4563
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

/* https://www.eventbrite.com/engineering/its-2015-and-drawing-text-is-still-hard-webgl-threejs/ */

require(['src/cartogram', 'underscore'], function(Cartogram, _) {
    var canvasEl = document.querySelectorAll('.js-cartogram-canvas')[0];

var cartogram = new Cartogram(canvasEl, {
        canvas: canvasEl,
        backgroundColor: '#F7F7F7',
        showDebug: false,
        immediate: false,
        resizeCanvas: true
    });
    var topLevelSceneSet = Cartogram.Shapes.set();
    var myTextSet = Cartogram.Shapes.set();

var possibleLabels = ['pizza', 'pepper', 'olives', 'cheese', 'salami'];

// create a bunch of text on screen and merge it all
    for (var i = 0; i < 200; i++) {
        for (var j = 0; j < 20; j++)
            myTextSet.push(Cartogram.Shapes.text(
                _.random(-1000, 1000), _.random(-1000, 1000),
                possibleLabels[_.random(0, possibleLabels.length - 1)], {
                    color: 0x000000
                }
            ));
    }

// let's add our text to the scene
    topLevelSceneSet.push(myTextSet);
    // let's plop our scene into cartogram
    cartogram.paper.add(topLevelSceneSet);

cartogram.render();
});

编译

CSS

HTML

本例使用了require.js来引入关联库。

three, canvas, text

编辑器支持Emmet

快捷键

本例使用了require.js来引入关联库。

three, canvas, text

WebGL Three.js大量文本符号渲染

WebGL Three.js 创世大爆炸景象

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：