Three.js 3D牧场RPG游戏

3D planet with COWS and CHICKENS 协同（后台）使用了socket.io websocket js库。

three, game，websocket

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

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 World = (function() {
    function World(reference, scale) {
        _classCallCheck(this, World);

this.scale = scale;
        this.mesh = reference.world.clone();
    }

World.prototype.loadToScene = function loadToScene(scene) {
        this.mesh.scale.set(this.scale, this.scale, this.scale);
        scene.add(this.mesh);
    };

return World;
})();

var BaseAnimal = (function() {
    function BaseAnimal(id, startposition, name, scale, reference, scene) {
        _classCallCheck(this, BaseAnimal);

this.id = id;
        this.scale = scale;
        this.position = startposition;
        this.target = new THREE.Vector3(0, 0, 0);
        this.group = new THREE.Group();
        this.scene = scene;
        this.speed = 12;
        this.rotation = 0;
        this.moving = false;
        this.rotating = false;
        this.body = reference.clone();
        this.bones = this.getBones();
        this.name = name;
        this.animaltype = "";
        this.options = {
            size: 1.4,
            height: 10,
            curveSegments: 2,
            font: "helvetiker",
            bevelEnabled: false
        };
        var textShapes = THREE.FontUtils.generateShapes(this.name, 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.z = -5;
        this.textMesh.position.y = 3;
        this.body.add(this.textMesh);
        this.loadModel();
    }

BaseAnimal.prototype.getBones = function getBones() {
        throw new Error("Must be implemented by an animal.");
    };

BaseAnimal.prototype.moveTowardsTarget = function moveTowardsTarget(vec) {
        this.target = vec;
        this.moving = true;
    };

BaseAnimal.prototype.updateMovement = function updateMovement(mesh) {
        this.body.lookAt(this.target);
        this.body.translateZ(0.5);
        var pos = new THREE.Vector3(this.body.position.x * 1.05 * this.scale, this.body.position.y * 1.05 * this.scale, this.body.position.z * 1.05 * this.scale);
        var center = new THREE.Vector3(0, 0, 0).sub(pos).normalize();
        var raycaster = new THREE.Raycaster(pos, center);
        var intersects = raycaster.intersectObject(mesh);

if (intersects.length) {
            var point = intersects[0].point;
            var newpoint = new THREE.Vector3(point.x / this.scale, point.y / this.scale, point.z / this.scale);
            this.body.position.copy(newpoint);
            var groundpoint = intersects[0].face.normal;
            var v1 = this.target.clone().sub(this.body.position).normalize();
            var v2 = groundpoint.clone().sub(this.body.position).normalize();
            var v3 = new THREE.Vector3().crossVectors(v1, v2).normalize();
            this.body.up.copy(v3);
            this.body.lookAt(groundpoint);
        }

var distance = this.body.position.distanceTo(this.target);
        if (distance < 1) {
            this.moving = false;
        }

this.updateAnimation();
    };

BaseAnimal.prototype.updateAnimation = function updateAnimation() {
        throw new Error("Must be implemented by an animal.");
    };

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

BaseAnimal.prototype.loadModel = function loadModel() {
        this.group.add(this.body);
        this.group.scale.set(this.scale, this.scale, this.scale);
        this.body.position.copy(this.position);
        this.scene.add(this.group);
    };

return BaseAnimal;
})();

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

var self = this;
        var awayclass = "away";

this.infobox = document.querySelectorAll(".info")[0];
        this.messagebox = document.querySelectorAll(".message-box")[0];
        this.toggler = document.querySelectorAll(".toggle-away")[0];

this.toggler.addEventListener("click", function() {
            self.infobox.classList.toggle(awayclass);
        }, false);
    }

ChatHandler.prototype.appendMessage = function appendMessage(name, value) {
        var div = document.createElement('div');
        div.className = 'message';
        div.innerHTML = "<span class=\"name\">" + name + "</span>: <span class=\"value\">" + value + "</span>";
        this.messagebox.appendChild(div);
        this.messagebox.scrollTop = this.messagebox.scrollHeight;
    };

return ChatHandler;
})();

var Chicken = (function(_BaseAnimal) {
    _inherits(Chicken, _BaseAnimal);

function Chicken(id, startposition, name, scale, reference, scene) {
        _classCallCheck(this, Chicken);

_BaseAnimal.call(this, id, startposition, name, scale, reference, scene);
        this.animaltype = "chicken";
    }

Chicken.prototype.getBones = function getBones() {
        return [{
            name: "leftleg",
            leg: this.body.skeleton.bones[2],
            goingforward: true
        }, {
            name: "rightleg",
            leg: this.body.skeleton.bones[4],
            goingforward: false
        }];
    };

Chicken.prototype.updateAnimation = function updateAnimation() {
        this.bones.map(function(bone) {
            if (bone.goingforward) {
                bone.leg.rotation.y -= 0.01;
            } else {
                bone.leg.rotation.y += 0.01;
            }

if (bone.leg.rotation.y > 0.1 || bone.leg.rotation.y < -0.1) {
                bone.goingforward = !bone.goingforward;
            }
        });
    };

return Chicken;
})(BaseAnimal);

var Cow = (function(_BaseAnimal2) {
    _inherits(Cow, _BaseAnimal2);

function Cow(id, startposition, name, scale, reference, scene) {
        _classCallCheck(this, Cow);

_BaseAnimal2.call(this, id, startposition, name, scale, reference, scene);
        this.animaltype = "cow";
    }

Cow.prototype.getBones = function getBones() {
        return [{
            name: "rightbehindleg",
            leg: this.body.skeleton.bones[2],
            goingforward: true
        }, {
            name: "leftbehindleg",
            leg: this.body.skeleton.bones[4],
            goingforward: false
        }, {
            name: "rightfrontleg",
            leg: this.body.skeleton.bones[7],
            goingforward: false
        }, {
            name: "leftfrontleg",
            leg: this.body.skeleton.bones[9],
            goingforward: true
        }];
    };

Cow.prototype.updateAnimation = function updateAnimation() {
        this.bones.map(function(bone) {
            if (bone.goingforward) {
                bone.leg.rotation.y -= 0.02;
            } else {
                bone.leg.rotation.y += 0.02;
            }

if (bone.leg.rotation.y > 0.3 || bone.leg.rotation.y < -0.3) {
                bone.goingforward = !bone.goingforward;
            }
        });
    };

return Cow;
})(BaseAnimal);

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

this.chicken = null;
        this.cow = null;
        this.world = null;
    }

LoadModels.prototype.load = function load() {
        var _this = this;

LoadModels.prototype.loadWorld = function loadWorld(ctx) {
        return new Promise(function(fulfill, reject) {
            var loader = new THREE.JSONLoader();
            loader.load('https://api.myjson.com/bins/30h04', function(geometry, materials) {
                var mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
                mesh.receiveShadow = true;
                mesh.castShadow = true;
                fulfill(mesh);
            });
        });
    };

LoadModels.prototype.loadSkeletalModel = function loadSkeletalModel(path) {
        return new Promise(function(fulfill, reject) {
            var loader = new THREE.JSONLoader();
            loader.load(path, function(geometry, materials) {
                for (var i = 0; i < materials.length; i++) {
                    var m = materials[i];
                    m.skinning = true;
                }

var mesh = new THREE.SkinnedMesh(geometry, new THREE.MeshFaceMaterial(materials));
                mesh.geometry.dynamic = true;
                mesh.castShadow = true;
                mesh.receiveShadow = true;
                fulfill(mesh);
            });
        });
    };

return LoadModels;
})();

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

var self = this;

this.socket = null;
        this.isdragging = false;
        this.world;
        this.animal = null;
        this.animals = [];
        this.clock = new THREE.Clock();
        this.scene = new THREE.Scene();
        this.camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);

this.hemilight;
        this.dirlight;

this.raycaster = new THREE.Raycaster();
        this.renderer = new THREE.WebGLRenderer({
            antialias: true
        });

this.camera.position.set(75, 0, -40);
        this.camera.target = new THREE.Vector3(0, 0, 0);
        this.camera.up.set(1, 0, -1);
        this.camera.lookAt(this.camera.target);

this.setlighting();
        this.setskydome();
        this.setrenderer();

this.controls = new THREE.TrackballControls(this.camera, this.renderer.domElement);
        this.controls.target.copy(this.camera.target);
        this.controls.noPan = true;
        this.controls.rotateSpeed = 4.0;
        this.controls.minDistance = 20;
        this.controls.maxDistance = 400;

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

this.clientClickX = 0;
        this.clientClickY = 0;

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

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

this.renderer.domElement.addEventListener("touchend", function(event) {
            self.onMouseUp(self.translateTouchEvent(event));
        }, false);

this.renderer.domElement.addEventListener("touchstart", function(event) {
            self.onMouseDown(self.translateTouchEvent(event));
        }, false);

this.renderer.domElement.addEventListener("mouseup", function(event) {
            self.onMouseUp(event);
        }, false);

this.renderer.domElement.addEventListener("mousedown", function(event) {
            self.onMouseDown(event);
        }, false);

window.addEventListener("resize", function() {
            self.onWindowResize();
        }, false);
        window.addEventListener("keydown", function(event) {
            self.onKeyDown(event);
        }, false);

this.reference = new LoadModels();
        this.reference.load().then(function() {
            self.socket = io.connect("http://95.85.6.49:81/");
            self.initialize(name, animal);
        });
    }

Playground.prototype.initialize = function initialize(name, animal) {
        var self = this;

this.world = new World(this.reference, 500);
        this.world.loadToScene(this.scene);

this.socket.on("giveid", function(id) {
            var x = 37.049533439151695,
                y = 504.9169002010969,
                z = 152.38907703563717;
            self.animal = self.getAnimal(id, name, animal, new THREE.Vector3(x, y, z));

self.draw();
            self.animal.updateMovement(self.world.mesh);

self.socket.emit("new animal", {
                x: self.animal.body.position.x,
                y: self.animal.body.position.y,
                z: self.animal.body.position.z,
                name: self.animal.name,
                animaltype: self.animal.animaltype
            });
            self.animal.body.add(self.camera);
        });
        self.socket.on("allplayers", function(data) {
            data.map(function(animal) {
                console.log(animal);
                var c = self.getAnimal(animal.id, animal.name, animal.animaltype, new THREE.Vector3(animal.x, animal.y, animal.z));
                c.updateMovement(self.world.mesh);
                self.animals.push(c);
            });
            document.querySelector("#animalcount").textContent = self.animals.length + 1;
        });

self.socket.on("newplayer", function(animal) {
            console.log(animal);
            var ani = self.getAnimal(animal.id, animal.name, animal.animaltype, new THREE.Vector3(animal.x, animal.y, animal.z));
            ani.updateMovement(self.world.mesh);
            self.animals.push(ani);
            document.querySelector("#animalcount").textContent = self.animals.length + 1;
        });

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

self.socket.on("message", function(animal) {
            self.chat.appendMessage(animal.name, animal.message);
        });

self.socket.on("move", function(animal) {
            var movinganimal = self.animals.find(function(a) {
                return a.id === animal.id;
            });
            var newpoint = new THREE.Vector3(animal.x, animal.y, animal.z);
            movinganimal.moveTowardsTarget(newpoint);
        });
    };

Playground.prototype.onMouseDown = function onMouseDown(event) {
        this.clientClickX = event.clientX;
        this.clientClickY = event.clientY;
    };

Playground.prototype.onMouseUp = function onMouseUp(event) {
        var self = this;
        if (event.target !== self.renderer.domElement) {
            return;
        }
        var x = event.clientX;
        var y = event.clientY;
        if (x != self.clientClickX || y != self.clientClickY) {
            return;
        }

var mouse = {
            x: x / window.innerWidth * 2 - 1,
            y: -(y / window.innerHeight) * 2 + 1
        };
        this.raycaster.setFromCamera(mouse, this.camera);

var intersects = this.raycaster.intersectObject(this.world.mesh);

if (intersects.length) {
            var point = intersects[0].point;
            var newpoint = new THREE.Vector3(point.x / self.animal.scale, point.y / self.animal.scale, point.z / self.animal.scale);
            self.animal.moveTowardsTarget(newpoint);

self.socket.emit("move animal", {
                x: newpoint.x,
                y: newpoint.y,
                z: newpoint.z
            });
        }
    };

Playground.prototype.getAnimal = function getAnimal(id, name, animal, pos) {
        if (animal === "cow") {
            return new Cow(id, pos, name, 4, this.reference.cow, this.scene);
        } else {
            return new Chicken(id, pos, name, 4, this.reference.chicken, this.scene);
        }
    };

Playground.prototype.onKeyDown = function onKeyDown(event) {
        var self = this;
        var keyCode = event.keyCode;
        if (this.textboxIsActive && keyCode === 13 && self.textbox.value !== "") {
            self.socket.emit("new message", {
                message: self.textbox.value
            });
            self.chat.appendMessage(self.animal.name, self.textbox.value);
            self.textbox.value = "";
        }
    };

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

Playground.prototype.translateTouchEvent = function translateTouchEvent(e) {
        e.stopPropagation();
        e.preventDefault();
        if (e.touches.length) {
            return {
                clientX: e.touches[0].clientX,
                clientY: e.touches[0].clientY,
                preventDefault: e.preventDefault,
                target: this.renderer.domElement
            };
        } else {
            return {
                clientX: e.changedTouches[0].clientX,
                clientY: e.changedTouches[0].clientY,
                preventDefault: e.preventDefault,
                target: this.renderer.domElement
            };
        }
    };

Playground.prototype.setskydome = function setskydome() {
        this.scene.fog = new THREE.Fog(0xffffff, 1, 5000);
        this.scene.fog.color.setHSL(0.6, 0, 1);

this.scene.fog.color.copy(uniforms.bottomColor.value);

var skyGeo = new THREE.SphereGeometry(4000, 32, 15);
        var skyMat = new THREE.ShaderMaterial({
            vertexShader: vertexShader,
            fragmentShader: fragmentShader,
            uniforms: uniforms,
            side: THREE.BackSide
        });

var sky = new THREE.Mesh(skyGeo, skyMat);
        this.scene.add(sky);
    };

Playground.prototype.setlighting = function setlighting() {
        this.hemilight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.6);
        this.hemilight.color.setHSL(0.6, 1, 0.6);
        this.hemilight.groundColor.setHSL(0.095, 1, 0.75);
        this.hemilight.position.set(0, 500, 0);
        this.scene.add(this.hemilight);

this.dirlight = new THREE.DirectionalLight(0xffffff, 1);
        this.dirlight.color.setHSL(0.1, 1, 0.95);
        this.dirlight.position.set(-1, 1.75, 1);
        this.dirlight.position.multiplyScalar(50);
        this.scene.add(this.dirlight);

this.dirlight.castShadow = true;

this.dirlight.shadowMapWidth = 2048;
        this.dirlight.shadowMapHeight = 2048;

var d = 50;

this.dirlight.shadowCameraLeft = -d;
        this.dirlight.shadowCameraRight = d;
        this.dirlight.shadowCameraTop = d;
        this.dirlight.shadowCameraBottom = -d;

this.dirlight.shadowCameraFar = 3500;
        this.dirlight.shadowBias = -0.0001;
    };

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);
        this.renderer.shadowMapEnabled = true;
        this.renderer.shadowMapType = THREE.PCFSoftShadowMap;
        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();
        });
        this.renderer.clear();
        this.renderer.setViewport(0, 0, window.innerWidth, window.innerHeight);
        this.renderer.render(this.scene, this.camera);
        this.controls.update();

self.handleMovement(self.animal);

self.animals.map(function(animal) {
            self.handleMovement(animal);
        });
    };

Playground.prototype.handleMovement = function handleMovement(animal) {
        if (animal.moving) {
            animal.updateMovement(this.world.mesh, this.scene);
        }
        animal.textMesh.lookAt(this.camera.position);
        animal.textMesh.up.copy(this.camera.up);
    };

return Playground;
})();

var modal = document.querySelectorAll(".modal-container")[0];
var form = document.getElementById("AnimalForm");

form.addEventListener("submit", function(event) {
    event.preventDefault();
    var animal = document.querySelector("input[name='animal']:checked").value;
    var name = document.getElementById("name").value;
    if (name !== "") {
        modal.style.display = "none";
        new Playground(name, animal);
    } else {
        alert("Enter name plz!");
    }
});

编译

CSS

body {
    font-family: Monospace;
    background-color: #fff;
    margin: 0;
    overflow: hidden;
    color: white;
}
.chat {
    position: absolute;
    bottom: 40px;
    left: 10px;
    width: 300px;
    padding: 10px;
    font-size: 18px;
    border: 0;
    margin: 10px -10px;
}
.info {
    position: absolute;
    padding: 10px;
    font-size: 16px;
    width: 300px;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
}
.info.away {
    left: -320px;
}
.container {
    position: relative;
    height: 38%;
    margin-top: 15px;
}
.message-box {
    overflow-y: auto;
    width: 310px;
    position: absolute;
    top: 0;
    bottom: 0;
}
.message {
    padding: 3px 0;
}
.name {
    color: #bdc3c7;
}
.value {
    color: #ecf0f1;
}
.toggle-away {
    position: absolute;
    margin-left: 310px;
    background: rgba(0, 0, 0, 0.45);
    padding: 5px;
}
.toggle-away:hover {
    cursor: pointer;
}
.modal-container {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: url('http://mission-blue.org/wp-content/uploads/2013/04/the-blue-planet-4fc7047462c251.jpg');
}
.modal {
    left: 50%;
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.45);
    padding: 20px;
    width: 25%;
    font-size: 1.3em;
}
@media (max-width: 980px) {
    .modal {
        width: 90%;
    }
}
.modal input[type="text"],
.modal input[type="submit"] {
    padding: 10px;
    width: 100%;
    border: 0;
    box-sizing: border-box;
}
.btn {
    background: #16a085;
    color: white;
    transition: 0.2s all;
}
.btn:hover {
    background: #1abc9c;
    cursor: pointer;
}

HTML

<div class="modal-container">
  <div class="modal">
    <h3>Animal planet in 3D, WITH SOCKETS!</h3>
    <form id="AnimalForm">
      <p>
        <label for="name">Your name</label>
        <br>
        <input type="text" id="name" placeholder="Enter name here..." />
        <br>
        <br>
        <label for="animal">Choose your animal</label>
        <br>
        <input type="radio" name="animal" value="cow" checked>Cow
        <br>
        <input type="radio" name="animal" value="chicken">Chicken
      </p>
      <input class="btn" type="submit" value="Enter world" />
    </form>
    <br />
			<a href="https://twitter.com/KarlSolgard">Follow me on the Twitter!</a>
  </div>
</div>

<div class="info">
  <div class="toggle-away">Toggle chat</div>
  <div>
    <h2>Animal Planet with sockets!</h2>Tap on the ground to move
    <br />Type message and ENTER to post.
    <br />Be nice to each other!
    <br />
    <br />Animals online:
    <span id="animalcount"></span>
  </div>
  <div class="container">
    <div class="message-box"></div>
  </div>
  <input class="chat" placeholder="Type your message here..." type="text" />
</div>

varying vec3 vWorldPosition; void main() { vec4 worldPosition = modelMatrix * vec4( position, 1.0 ); vWorldPosition = worldPosition.xyz; gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); }

</script>
<script type="x-shader/x-fragment" id="fragmentShader">

uniform vec3 topColor; uniform vec3 bottomColor; uniform float offset; uniform float exponent; varying vec3 vWorldPosition; void main() { float h = normalize( vWorldPosition + offset ).y; gl_FragColor = vec4( mix( bottomColor, topColor, max( pow( max(
  h , 0.0), exponent ), 0.0 ) ), 1.0 ); }

</script>

3D planet with COWS and CHICKENS 协同（后台）使用了socket.io websocket js库。

three, game，websocket

编辑器支持Emmet

快捷键

3D planet with COWS and CHICKENS 协同（后台）使用了socket.io websocket js库。

three, game，websocket

WebGL Three.js构建流浪地球3D场景（新的太阳）

Three.js GSAP使用鼠标滚轮和滑动来操控3D双绞线螺旋动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：