Three.js BufferGeometry 几何缓存绘画方法的使用实例

对于大量的粒子绘制，出于性能的考虑，通常需要使用绘画缓存技术。

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

(function e(t, n, r) {
    function s(o, u) {
        if (!n[o]) {
            if (!t[o]) {
                var a = typeof require == "function" && require;
                if (!u && a) return a(o, !0);
                if (i) return i(o, !0);
                var f = new Error("Cannot find module '" + o + "'");
                throw f.code = "MODULE_NOT_FOUND", f
            }
            var l = n[o] = {
                exports: {}
            };
            t[o][0].call(l.exports, function(e) {
                var n = t[o][1][e];
                return s(n ? n : e)
            }, l, l.exports, e, t, n, r)
        }
        return n[o].exports
    }
    var i = typeof require == "function" && require;
    for (var o = 0; o < r.length; o++) s(r[o]);
    return s
})({
    1: [function(require, module, exports) {
        var Get = require('./get');
        var get = new Get();

var exports = function() {
            var Camera = function() {
                this.width = 0;
                this.height = 0;
                this.rad1 = 0;
                this.rad2 = 0;
                this.x = 0;
                this.y = 0;
                this.z = 0;
                this.r = 0;
                this.obj;
            };

Camera.prototype.init = function(rad1, rad2, width, height) {
                this.width = width;
                this.height = height;
                this.r = 3000;
                this.rad1 = rad1;
                this.rad2 = rad2;
                this.obj = new THREE.PerspectiveCamera(35, this.width / this.height, 1, 10000);
                this.setPosition(this.rad1, this.rad2, this.r);
            };

Camera.prototype.setPosition = function(rad1, rad2) {
                var points = get.pointSphere(rad1, rad2, this.r);
                this.obj.position.set(points[0], points[1], points[2]);
                this.obj.up.set(0, 1, 0);
                this.obj.lookAt({
                    x: 0,
                    y: 0,
                    z: 0
                });
            };

return Camera;
        };

module.exports = exports();

}, {
        "./get": 3
    }],
    2: [function(require, module, exports) {
        module.exports = function(object, eventType, callback) {
            var timer;

object.addEventListener(eventType, function(event) {
                clearTimeout(timer);
                timer = setTimeout(function() {
                    callback(event);
                }, 500);
            }, false);
        };

}, {}],
    3: [function(require, module, exports) {
        var exports = function() {
            var Get = function() {};

Get.prototype.randomInt = function(min, max) {
                return Math.floor(Math.random() * (max - min)) + min;
            };

Get.prototype.degree = function(radian) {
                return radian / Math.PI * 180;
            };

Get.prototype.radian = function(degrees) {
                return degrees * Math.PI / 180;
            };

Get.prototype.pointSphere = function(rad1, rad2, r) {
                var x = Math.cos(rad1) * Math.cos(rad2) * r;
                var z = Math.cos(rad1) * Math.sin(rad2) * r;
                var y = Math.sin(rad1) * r;
                return [x, y, z];
            };

return Get;
        };

module.exports = exports();

}, {}],
    4: [function(require, module, exports) {
        var Get = require('./get');
        var get = new Get();

var exports = function() {
            var HemiLight = function() {
                this.rad1 = 0;
                this.rad2 = 0;
                this.x = 0;
                this.y = 0;
                this.z = 0;
                this.r = 0;
                this.obj;
            };

HemiLight.prototype.init = function(scene, rad1, rad2, r, hex1, hex2, intensity) {
                this.r = r;
                this.obj = new THREE.HemisphereLight(hex1, hex2, intensity);
                this.setPosition(rad1, rad2);
                scene.add(this.obj);
            };

HemiLight.prototype.setPosition = function(rad1, rad2) {
                var points = get.pointSphere(rad1, rad2, this.r);
                this.obj.position.set(points[0], points[1], points[2]);
            };

return HemiLight;
        };

module.exports = exports();

}, {
        "./get": 3
    }],
    5: [function(require, module, exports) {
        var Get = require('./get');
        var get = new Get();
        var debounce = require('./debounce');
        var Camera = require('./camera');
        var PointLight = require('./pointLight');
        var HemiLight = require('./hemiLight');
        var Mover = require('./mover');

var bodyWidth = document.body.clientWidth;
        var bodyHeight = document.body.clientHeight;
        var fps = 60;
        var lasttimeRender = +new Date();
        var raycaster = new THREE.Raycaster();
        var mouseVector = new THREE.Vector2(-2, -2);
        var intersects;

var canvas;
        var renderer;
        var scene;
        var camera;
        var light;

var bufferGeometry = new THREE.BufferGeometry();
        var bufferMaterial = new THREE.MeshBasicMaterial({
            color: 0xffffff,
            vertexColors: THREE.VertexColors,
            side: THREE.DoubleSide
        });
        var bufferMesh;
        var boxGeometry = new THREE.Geometry();
        boxGeometry.vertices.push(
            new THREE.Vector3(10, 0, 0),
            new THREE.Vector3(0, 10, 0),
            new THREE.Vector3(0, 0, 10)
        );
        boxGeometry.faces.push(new THREE.Face3(0, 1, 2));
        var boxMesh = new THREE.Mesh(boxGeometry);

var boxArr = [];
        var boxNum = 10000;
        var boxVertices = boxMesh.geometry.vertices;
        var boxFaces = boxMesh.geometry.faces;

// ==========

var initThree = function() {
            canvas = document.getElementById('canvas');
            renderer = new THREE.WebGLRenderer({
                antialias: true
            });
            if (!renderer) {
                alert('Three.jsの初期化に失敗しました。');
            }

scene = new THREE.Scene();
            scene.fog = new THREE.Fog(0x111111, 2000, 7000);
            canvas.appendChild(renderer.domElement);
            renderer.setSize(bodyWidth, bodyHeight);
            renderer.setClearColor(0x111111, 1.0);
        };

var init = function() {
            initThree();

camera = new Camera();
            camera.init(get.radian(45), get.radian(45), bodyWidth, bodyHeight);

light = new HemiLight();
            light.init(scene, get.radian(45), get.radian(45), 1000, 0xcc3333, 0x000000, 1);

// Moverのインスタンス生成
            for (var i = 0; i < boxNum; i++) {
                var rad1 = get.radian(i);
                var rad2 = get.radian(get.randomInt(0, 360000) / 1000);

boxArr[i] = new Mover();
                boxArr[i].init(rad1, rad2);
            }

// Buffer用の変数
            var vertices;
            var verticesArr = [];
            var verticesLength = verticesArr.length;
            var indices;
            var indicesArr = [];
            var indicesLength = indicesArr.length;
            var color;
            var color = new THREE.Color();

// 頂点とindexを更新 ここから
            for (var i = 0; i < boxArr.length; i++) {
                var r = get.randomInt(150, 255);
                var g = get.randomInt(20, 240);
                var b = get.randomInt(0, 120);
                for (var index = 0; index < boxFaces.length; index++) {
                    indicesArr[indicesLength + 0] = boxFaces[index].a + verticesLength;
                    indicesArr[indicesLength + 1] = boxFaces[index].b + verticesLength;
                    indicesArr[indicesLength + 2] = boxFaces[index].c + verticesLength;
                    indicesLength += 3;
                }
                for (var index = 0; index < boxVertices.length; index++) {
                    var x = boxVertices[index].x + boxArr[i].position.x;
                    var y = boxVertices[index].y + boxArr[i].position.y;
                    var z = boxVertices[index].z + boxArr[i].position.z;
                    verticesArr[verticesLength] = [x, y, z, r, g, b];
                    verticesLength += 1;
                }
            }
            vertices = new Float32Array(verticesArr.length * 3);
            colors = new Float32Array(verticesArr.length * 3);
            indices = new Uint32Array(indicesArr);
            for (var i = 0; i < verticesArr.length; i++) {
                color.setRGB(verticesArr[i][3] / 255, verticesArr[i][4] / 255, verticesArr[i][5] / 255);
                vertices[i * 3 + 0] = verticesArr[i][0];
                vertices[i * 3 + 1] = verticesArr[i][1];
                vertices[i * 3 + 2] = verticesArr[i][2];
                colors[i * 3 + 0] = color.r;
                colors[i * 3 + 1] = color.g;
                colors[i * 3 + 2] = color.b;
            }

bufferGeometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
            bufferGeometry.addAttribute('color', new THREE.BufferAttribute(colors, 3));
            bufferGeometry.addAttribute('index', new THREE.BufferAttribute(indices, 1));
            // 頂点とindexを更新 ここまで

bufferMesh = new THREE.Mesh(bufferGeometry, bufferMaterial);
            scene.add(bufferMesh);

renderloop();
            debounce(window, 'resize', function(event) {
                resizeRenderer();
            });
        };

var render = function() {
            renderer.clear();

var vertices;
            var verticesArr = [];
            var verticesLength = verticesArr.length;
            var indices;
            var indicesArr = [];
            var indicesLength = indicesArr.length;

for (var i = 0; i < boxArr.length; i++) {
                boxArr[i].rad1 += get.radian(velocity);
                boxArr[i].move();

for (var index = 0; index < boxVertices.length; index++) {
                    var x = boxVertices[index].x + boxArr[i].position.x;
                    var y = boxVertices[index].y + boxArr[i].position.y;
                    var z = boxVertices[index].z + boxArr[i].position.z;
                    verticesArr[verticesLength] = [x, y, z];
                    verticesLength += 1;
                }
            }

for (var i = 0; i < verticesArr.length; i++) {
                bufferMesh.geometry.attributes.position.array[i * 3 + 0] = verticesArr[i][0];
                bufferMesh.geometry.attributes.position.array[i * 3 + 1] = verticesArr[i][1];
                bufferMesh.geometry.attributes.position.array[i * 3 + 2] = verticesArr[i][2];
            }

bufferMesh.geometry.attributes.position.needsUpdate = true;
            bufferMesh.geometry.attributes.index.needsUpdate = true;

renderer.render(scene, camera.obj);
        };

var renderloop = function() {
            var now = +new Date;
            velocity = (now - lasttimeRender) / 100;
            render();
            lasttimeRender = now;
            setTimeout(renderloop, 1000 / fps)
        };

var resizeRenderer = function() {
            bodyWidth = document.body.clientWidth;
            bodyHeight = document.body.clientHeight;
            renderer.setSize(bodyWidth, bodyHeight);
            camera.init(get.radian(45), get.radian(45), bodyWidth, bodyHeight);
        };

init();

}, {
        "./camera": 1,
        "./debounce": 2,
        "./get": 3,
        "./hemiLight": 4,
        "./mover": 6,
        "./pointLight": 7
    }],
    6: [function(require, module, exports) {
        var Get = require('./get');
        var get = new Get();

var exports = function() {
            var Mover = function() {
                this.id = 0;
                this.position = new THREE.Vector3();
                this.velocity = new THREE.Vector3();
                this.vertices = [];
                this.indices = [];
                this.radius = 1000;
                this.rad1 = 0;
                this.rad2 = 0;
            };

Mover.prototype.init = function(rad1, rad2) {
                this.rad1 = rad1;
                this.rad2 = rad2;
                this.setPosition();
            };

Mover.prototype.setPosition = function() {
                var points = get.pointSphere(this.rad1, this.rad2, this.radius);
                this.position.set(points[0], points[1], points[2]);
            };

Mover.prototype.move = function() {
                this.setPosition();
                this.position = this.velocity;
            };

return Mover;
        };

module.exports = exports();

}, {
        "./get": 3
    }],
    7: [function(require, module, exports) {
        var Get = require('./get');
        var get = new Get();

var exports = function() {
            var PointLight = function() {
                this.rad1 = 0;
                this.rad2 = 0;
                this.x = 0;
                this.y = 0;
                this.z = 0;
                this.r = 0;
                this.obj;
            };

PointLight.prototype.init = function(scene, rad1, rad2, r, hex, intensity, distance) {
                this.r = r;
                this.obj = new THREE.PointLight(hex, intensity, distance);
                this.setPosition(rad1, rad2);
                scene.add(this.obj);
            };

PointLight.prototype.setPosition = function(rad1, rad2) {
                var points = get.pointSphere(rad1, rad2, this.r);
                this.obj.position.set(points[0], points[1], points[2]);
            };

return PointLight;
        };

module.exports = exports();

}, {
        "./get": 3
    }]
}, {}, [5])

编译

CSS

HTML

对于大量的粒子绘制，出于性能的考虑，通常需要使用绘画缓存技术。

编辑器支持Emmet

快捷键

对于大量的粒子绘制，出于性能的考虑，通常需要使用绘画缓存技术。

three.js实例化几何体（InstancedBufferGeometry）代码示例

使用three.js和PlaneBufferGeometry构建的3d交互波浪背景动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：