Three.js 可操控的3D鸟群运动

Controllable Boid，可在左下角的游戏控制面板中移动来改变鸟群的运动。

three, birds

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var BoidMove = (function(THREE) {
    'use strict';

function Point(vector) {
        this.vector = vector;
        this.speed = 0.25;
    }
    Point.prototype.moveTo = function(targetVec, offset) {
        var dx = (targetVec.x - this.vector.x) * this.speed;
        var dy = (targetVec.y - this.vector.y) * this.speed;
        var dz = (targetVec.z - this.vector.z) * this.speed;

this.vector.x += dx;
        this.vector.y += dy;
        this.vector.z += dz;

if (offset) {
            this.vector.x += offset.x;
            this.vector.y += offset.y;
            this.vector.z += offset.z;
        }

}

this.points.forEach(function(point, index) {
            var lineMaterial = new THREE.LineBasicMaterial({
                color: 0xffff00,
                transparent: true,
                opacity: index / 7.5
            });
            var lineGeometry = new THREE.Geometry();
            var nextIndex = self.points[index + 1];
            if (nextIndex) {
                lineGeometry.vertices.push(point.vector);
                lineGeometry.vertices.push(nextIndex.vector);
            }
            var line = new THREE.Line(lineGeometry, lineMaterial)
            scene.add(line);
            self.lines.push(line)
        });
    };
    Boid.prototype.update = function(target) {
        var self = this;
        this.points.forEach(function(point, index) {
            var nextIndex = self.points[index + 1];
            if (nextIndex) {
                point.moveTo({
                    x: nextIndex.vector.x,
                    y: nextIndex.vector.y,
                    z: nextIndex.vector.z
                });
            } else {
                point.moveTo(target, {
                    x: 0,
                    y: Math.cos(self.angle) * self.offset.x,
                    z: Math.sin(self.angle) * self.offset.z
                });
                self.angle += 0.1;
            }
            if (self.lines[index].geometry.vertices[0]) {
                self.lines[index].geometry.verticesNeedUpdate = true;
                self.lines[index].geometry.vertices[0] = point.vector;
            }
            self.endMeshes.headMesh.position.x = self.points[self.points.length - 1].vector.x;
            self.endMeshes.headMesh.position.y = self.points[self.points.length - 1].vector.y;
            self.endMeshes.headMesh.position.z = self.points[self.points.length - 1].vector.z;
        });
    };

// controller
    function CanvasWidget(size, targetVector) {
        this.size = size;
        this.targetVector = targetVector;
        this.canvas = document.createElement('canvas');
        this.ctx = this.canvas.getContext('2d');
        this.mousePos = {
            x: this.size.width / 2,
            y: this.size.height / 2
        };
        this.pointPos = {
            x: this.mousePos.x,
            y: this.mousePos.y
        };
        this.velocities = {
            vx: 0,
            vy: 0
        };
        this.setUpCanvas();
    }
    CanvasWidget.prototype.setUpCanvas = function() {
        this.canvas.width = this.size.width;
        this.canvas.height = this.size.height;
        this.canvas.style.position = 'fixed';
        this.canvas.style.bottom = '2rem';
        this.canvas.style.left = '2rem';
        this.canvas.style.zIndex = '2';
        document.body.appendChild(this.canvas);

this.canvas.addEventListener('mousemove', this.mouseMove.bind(this), false);
    };
    CanvasWidget.prototype.mouseMove = function(e) {
        this.mousePos.x = e.pageX - this.canvas.offsetLeft;
        this.mousePos.y = e.pageY - this.canvas.offsetTop;
        this.targetVector.x = (-this.size.width / 2 + this.mousePos.x) / 2;
        this.targetVector.y = (-this.size.height / 2 + this.mousePos.y) / -2;
    };
    CanvasWidget.prototype.update = function() {
        var dx = this.mousePos.x - this.pointPos.x;
        var dy = this.mousePos.y - this.pointPos.y;
        var speed = 0.2;
        var friction = 0.75;
        this.velocities.vx += dx * speed;
        this.velocities.vy += dy * speed;
        this.velocities.vx *= friction;
        this.velocities.vy *= friction;
        this.pointPos.x += this.velocities.vx;
        this.pointPos.y += this.velocities.vy;
        this.render();
    };
    CanvasWidget.prototype.render = function() {
        this.ctx.fillStyle = '#222';
        this.ctx.fillRect(0, 0, this.size.width, this.size.height);
        this.ctx.font = '14px Arial, sans-serif';
        this.ctx.fillStyle = '#333';
        this.ctx.fillRect(0, 0, this.size.width, 40);
        this.ctx.fillStyle = '#fff';
        this.ctx.fillText('Hover to interact'.toUpperCase(), 16, 24);
        this.ctx.fillStyle = 'yellow';
        this.ctx.beginPath();
        this.ctx.arc(this.pointPos.x, this.pointPos.y, 3, 0, Math.PI * 2, true);
        this.ctx.closePath();
        this.ctx.fill();
        this.ctx.strokeStyle = 'yellow';
        this.ctx.beginPath();
        this.ctx.arc(this.pointPos.x, this.pointPos.y, 8, 0, Math.PI * 2, true);
        this.ctx.closePath();
        this.ctx.stroke();
        this.ctx.strokeStyle = 'rgba(255, 255, 255, 0.56)';
        this.ctx.strokeRect(0, 0, this.size.width, this.size.height);
    };

var width = window.innerWidth;
    var height = window.innerHeight;

var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
    var renderer = new THREE.WebGLRenderer();

var targetVector = new THREE.Vector3(0, 0, 0);
    var widget = new CanvasWidget({
        width: width / 3,
        height: height / 3
    }, targetVector);
    var boids = [];

function initWorld() {
        camera.position.set(0, -50, 150);
        camera.lookAt(scene.position);
        scene.add(camera);
        //
        renderer.setSize(width, height);
        renderer.setClearColor(0x111111);
        document.body.appendChild(renderer.domElement);
        var a = new THREE.Mesh(
            new THREE.PlaneBufferGeometry(width / 10, height / 10, 5, 5),
            new THREE.MeshBasicMaterial({
                color: 0x444444,
                wireframe: true
            })
        );
        a.position.set(0, 0, 0);
        scene.add(a);
    }

function init() {
        initWorld();
        initBoids(20, 6);
        renderFrame();
    }

function renderBoid(boid) {
        boid.update(targetVector)
            //boid.endMeshes.headMesh.position.x += (targetVector.x - boid.endMeshes.headMesh.position.x) * 0.2;
            //boid.endMeshes.headMesh.position.y += (targetVector.y - boid.endMeshes.headMesh.position.y) * 0.2;
    }

function renderFrame() {
        window.requestAnimationFrame(renderFrame);
        renderer.render(scene, camera);
        widget.update();
        boids.forEach(renderBoid);
    }

return {
        init: init
    };

})(THREE);

BoidMove.init();

编译

CSS

HTML

Controllable Boid，可在左下角的游戏控制面板中移动来改变鸟群的运动。

three, birds

编辑器支持Emmet

快捷键

Controllable Boid，可在左下角的游戏控制面板中移动来改变鸟群的运动。

three, birds

使用Three.js实现的3D鸟群运动模拟

Three.js 可交互操控的3D电视机

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：