Socket.io.js ChickenChat 3D在线聊天即时通讯应用

socket.io js库是对html5 websocket特性的一个实现。

HTML5，网页套接字

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

第三方库
作品简介 1665
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

"use strict";

function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
        throw new TypeError("Cannot call a class as a function");
    }
}

var Chicken = (function() {
    function Chicken(id, x, z, message, scale, reference, scene) {
        _classCallCheck(this, Chicken);

this.id = id;
        this.scale = scale;
        this.position = new THREE.Vector3(x, 0, z);
        this.group = new THREE.Group();
        this.scene = scene;
        this.speed = 12;
        this.rotation = 0;
        this.moving = false;
        this.rotating = false;
        this.body = reference.body.clone();
        this.foot1 = reference.foot1.clone();
        this.foot2 = reference.foot2.clone();
        this.name = "Dave";
        this.message = message;
        this.options = {
            size: 2,
            height: 10,
            curveSegments: 2,
            font: "helvetiker",
            bevelEnabled: false
        };
        var textShapes = THREE.FontUtils.generateShapes(this.message, this.options);
        var text = new THREE.ShapeGeometry(textShapes);
        this.textMesh = new THREE.Mesh(text, new THREE.MeshBasicMaterial({
            color: "#000000",
            side: THREE.DoubleSide
        }));
        this.textMesh.position.y = 8;
        this.textMesh.position.x = 0;
        this.group.add(this.textMesh);
        this.loadModel();
    }

Chicken.prototype.rotate = function rotate(deg) {
        this.group.children.forEach(function(mesh) {
            if (mesh instanceof THREE.Mesh) {
                mesh.rotation.y += deg;
            }
        });
    };

Chicken.prototype.setText = function setText(val) {
        this.group.remove(this.textMesh);
        var y = this.textMesh.position.y;
        var x = this.textMesh.position.x;
        var z = this.textMesh.position.z;
        var rotation = this.textMesh.rotation.y;
        var textShapes = THREE.FontUtils.generateShapes(val, this.options);
        var text = new THREE.ShapeGeometry(textShapes);
        this.message = val;
        this.textMesh = new THREE.Mesh(text, new THREE.MeshBasicMaterial({
            color: "#000000",
            side: THREE.DoubleSide
        }));
        this.textMesh.position.set(x, y, z);
        this.textMesh.rotation.y = rotation;
        this.group.add(this.textMesh);
    };

Chicken.prototype.setposition = function setposition(x, z, rot) {
        this.group.children.forEach(function(mesh) {
            if (mesh instanceof THREE.Mesh) {
                mesh.rotation.y = rot;
                mesh.position.x = x;
                mesh.position.z = z;
            }
        });
    };

Chicken.prototype.remove = function remove() {
        this.scene.remove(this.group);
    };

Chicken.prototype.loadModel = function loadModel() {
        this.group.add(this.body);
        this.group.add(this.foot1);
        this.group.add(this.foot2);
        this.group.scale.set(this.scale, this.scale, this.scale);
        this.setposition(this.position.x, this.position.z, 0);
        this.scene.add(this.group);
    };

return Chicken;
})();

var LoadModels = (function() {
    function LoadModels() {
        _classCallCheck(this, LoadModels);

this.foot1 = null;
        this.foot2 = null;
        this.body = null;
    }

LoadModels.prototype.load = function load() {
        var self = this;
        return new Promise(function(fulfill, reject) {
            var loader = new THREE.JSONLoader();
            loader.load('https://api.myjson.com/bins/3h2lg', function(geometry, materials) {
                materials.forEach(function(e) {
                    e.morphTargets = true;
                });
                var material = new THREE.MeshFaceMaterial(materials);
                self.body = new THREE.MorphAnimMesh(geometry, material);
                self.body.duration = 700;

loader.load('https://api.myjson.com/bins/5bikk', function(geometry, materials) {
                    materials.forEach(function(e) {
                        e.morphTargets = true;
                    });
                    var material = new THREE.MeshFaceMaterial(materials);
                    self.foot1 = new THREE.MorphAnimMesh(geometry, material);
                    self.foot1.duration = 700;

loader.load('https://api.myjson.com/bins/19zdg', function(geometry, materials) {
                        materials.forEach(function(e) {
                            e.morphTargets = true;
                        });
                        var material = new THREE.MeshFaceMaterial(materials);
                        self.foot2 = new THREE.MorphAnimMesh(geometry, material);
                        self.foot2.duration = 700;
                        fulfill();
                    });
                });
            });
        });
    };

return LoadModels;
})();

var Playground = (function() {
    function Playground() {
        _classCallCheck(this, Playground);

var self = this;

this.socket = null;

this.chicken = null;
        this.chickens = [];
        this.clock = new THREE.Clock();
        this.scene = new THREE.Scene();
        this.camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);

var geometry = new THREE.BoxGeometry(15, 24, 15);
        var material = new THREE.MeshBasicMaterial({
            color: 0xffffff
        });
        var mesh = new THREE.Mesh(geometry, material);
        this.scene.add(mesh);
        this.ambientLight = new THREE.AmbientLight("#FFFFF3");
        this.scene.add(this.ambientLight);
        this.directionalLight = new THREE.DirectionalLight(0xffffff, 1);
        this.directionalLight.position.set(1, 0.75, 0.5).normalize();
        this.scene.add(this.directionalLight);
        this.renderer = new THREE.WebGLRenderer({
            antialias: true
        });
        this.camera.position.set(50, 50, 50);
        this.camera.target = new THREE.Vector3(0, 0, 0);
        this.camera.lookAt(this.camera.target);
        this.setrenderer();

this.textbox = document.querySelectorAll(".chat")[0];
        this.textboxIsActive = false;

this.textbox.addEventListener("focus", function() {
            self.textboxIsActive = true;
        }, true);

this.textbox.addEventListener("blur", function() {
            self.textboxIsActive = false;
        }, true);

Playground.prototype.initialize = function initialize() {
        var _this = this;

var self = this;
        this.socket.on("giveid", function(id) {
            self.chicken = new Chicken(id, 0, 0, "", 15, self.reference, self.scene);
            self.socket.emit("new chicken", {
                x: self.chicken.body.position.x,
                y: self.chicken.body.position.y,
                z: self.chicken.body.position.z
            });
            self.chicken.group.add(self.camera);

self.draw();
        });
        self.socket.on("allplayers", function(data) {
            data.forEach(function(chicken) {
                var c = new Chicken(chicken.id, chicken.x, chicken.z, chicken.message, 15, self.reference, self.scene);
                c.setposition(chicken.x, chicken.z, chicken.roty);
                self.chickens.push(c);
                document.querySelector("#chickencount").textContent = self.chickens.length + 1;
            });
        });

self.socket.on("newplayer", function(chicken) {
            console.log(chicken.id + " is in!");
            self.chickens.push(new Chicken(chicken.id, chicken.x, chicken.z, "", 15, self.reference, self.scene));
            document.querySelector("#chickencount").textContent = self.chickens.length + 1;
        });

self.socket.on("removeplayer", function(data) {
            for (var i = 0; i < self.chickens.length; i++) {
                if (self.chickens[i].id == data.id) {
                    self.chickens[i].remove();
                    self.chickens.splice(i, 1);
                    break;
                }
            }
            document.querySelector("#chickencount").textContent = self.chickens.length + 1;
        });

self.socket.on("message", function(chicken) {
            var movingchicken = self.chickens.find(function(chick) {
                return chick.id === chicken.id;
            });
            movingchicken.setText(chicken.message);
        });

self.socket.on("move", function(chicken) {
            var movingchicken = self.chickens.find(function(chick) {
                return chick.id === chicken.id;
            });
            movingchicken.setposition(chicken.x, chicken.z, chicken.roty);
            var delta = _this.clock.getDelta();
            movingchicken.group.children.forEach(function(mesh) {
                if (mesh instanceof THREE.MorphAnimMesh) {
                    mesh.updateAnimation(3000 * delta);
                }
            });
        });
    };

Playground.prototype.onKeyDown = function onKeyDown(event) {
        var self = this;
        var keyCode = event.keyCode;
        if (!this.textboxIsActive) {
            switch (keyCode) {
                case 68:
                    //d
                    self.chicken.rotate(-0.2);
                    self.chicken.rotating = true;
                    break;
                case 83:
                    //s
                    self.chicken.moving = true;
                    self.chicken.speed = -12;
                    break;
                case 65:
                    //a
                    self.chicken.rotate(0.2);
                    self.chicken.rotating = true;
                    break;
                case 87:
                    //w
                    self.chicken.moving = true;
                    self.chicken.speed = 12;
                    break;
            }
        }
        if (this.textboxIsActive && keyCode === 13) {
            self.chicken.setText(self.textbox.value);
            self.socket.emit("new message", {
                message: self.chicken.message
            });
            self.textbox.value = "";
            this.textbox.blur();
        }
    };

Playground.prototype.onKeyUp = function onKeyUp(event) {
        var self = this;
        var keyCode = event.keyCode;
        switch (keyCode) {
            case 68:
                //d
                self.chicken.rotating = false;
                break;
            case 83:
                //s
                self.chicken.moving = false;
                break;
            case 65:
                //a
                self.chicken.rotating = false;
                break;
            case 87:
                //w
                self.chicken.moving = false;
                break;
        }
    };

Playground.prototype.onWindowResize = function onWindowResize() {
        this.camera.aspect = window.innerWidth / window.innerHeight;
        this.camera.updateProjectionMatrix();
        this.renderer.setSize(window.innerWidth, window.innerHeight);
    };

Playground.prototype.setrenderer = function setrenderer() {
        this.renderer.setClearColor("#CCCCCC");
        this.renderer.sortObjects = false;
        this.renderer.autoClear = false;
        this.renderer.gammaInput = true;
        this.renderer.gammaOutput = true;
        this.renderer.setPixelRatio(window.devicePixelRatio);
        this.renderer.setSize(window.innerWidth, window.innerHeight);
        var container = document.createElement('div');
        document.body.appendChild(container);
        container.appendChild(this.renderer.domElement);
    };

Playground.prototype.draw = function draw() {
        var self = this;
        window.requestAnimationFrame(function() {
            self.draw();
        });

if (self.chicken.moving || self.chicken.rotating) {
            self.socket.emit('move chicken', {
                x: self.chicken.body.position.x,
                y: self.chicken.body.position.y,
                z: self.chicken.body.position.z,
                roty: self.chicken.body.rotation.y
            });
        }

this.renderer.clear();
        this.renderer.setViewport(0, 0, window.innerWidth, window.innerHeight);
        this.renderer.render(this.scene, this.camera);
    };

return Playground;
})();

new Playground();

编译

CSS

HTML

socket.io js库是对html5 websocket特性的一个实现。

HTML5，网页套接字

编辑器支持Emmet

快捷键

socket.io js库是对html5 websocket特性的一个实现。

HTML5，网页套接字

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：