一直注视鼠标位置的3D Minecraft 鸡

Minecraft Chicken，想吃饲料的小鸡仔：）

Three.js, animal

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

/* global THREE */

var scene, camera, controls, fieldOfView, aspectRatio, nearPlane, farPlane, shadowLight, backLight, light, renderer, container;

var floor, pollo, isBlowing = false;

var HEIGHT, WIDTH, windowHalfX, windowHalfY, mousePos = {
    x: 0,
    y: 0
};
dist = 0;

function init() {
    scene = new THREE.Scene();
    HEIGHT = window.innerHeight;
    WIDTH = window.innerWidth;
    aspectRatio = WIDTH / HEIGHT;
    fieldOfView = 60;
    nearPlane = 1;
    farPlane = 2000;
    camera = new THREE.PerspectiveCamera(
        fieldOfView,
        aspectRatio,
        nearPlane,
        farPlane);
    camera.position.z = 1500;
    camera.position.y = 0;
    camera.lookAt(new THREE.Vector3(0, 0, 0));
    renderer = new THREE.WebGLRenderer({
        alpha: true,
        antialias: true
    });
    renderer.setSize(WIDTH, HEIGHT);
    renderer.shadowMapEnabled = true;
    container = document.getElementById('world');
    container.appendChild(renderer.domElement);
    windowHalfX = WIDTH / 2;
    windowHalfY = HEIGHT / 2;
    window.addEventListener('resize', onWindowResize, false);
    document.addEventListener('mousemove', handleMouseMove, false);
    document.addEventListener('mousedown', handleMouseDown, false);
    document.addEventListener('mouseup', handleMouseUp, false);
    document.addEventListener('touchstart', handleTouchStart, false);
    document.addEventListener('touchend', handleTouchEnd, false);
    document.addEventListener('touchmove', handleTouchMove, false);
}

function onWindowResize() {
    HEIGHT = window.innerHeight;
    WIDTH = window.innerWidth;
    windowHalfX = WIDTH / 2;
    windowHalfY = HEIGHT / 2;
    renderer.setSize(WIDTH, HEIGHT);
    camera.aspect = WIDTH / HEIGHT;
    camera.updateProjectionMatrix();
}

function handleMouseMove(event) {
    mousePos = {
        x: event.clientX,
        y: event.clientY
    };
}

function handleMouseDown(event) {
    isBlowing = true;
}

function handleMouseUp(event) {
    isBlowing = false;
}

function handleTouchEnd(event) {
    mousePos = {
        x: windowHalfX,
        y: windowHalfY
    };
    isBlowing = false;
}

function handleTouchMove(event) {
    if (event.touches.length === 1) {
        event.preventDefault();
        mousePos = {
            x: event.touches[0].pageX,
            y: event.touches[0].pageY
        };
    }
}

function crearLuces() {

light = new THREE.HemisphereLight(0xffffff, 0xffffff, .5);

shadowLight = new THREE.DirectionalLight(0xffffff, .8);
    shadowLight.position.set(200, 200, 200);
    shadowLight.castShadow = true;
    shadowLight.shadowDarkness = .2;

backLight = new THREE.DirectionalLight(0xffffff, .4);
    backLight.position.set(-100, 200, 50);
    backLight.shadowDarkness = .1;
    backLight.castShadow = true;

scene.add(backLight);
    scene.add(light);
    scene.add(shadowLight);
}

function crearPollo() {
    pollo = new Pollo();
    scene.add(pollo.threegroup);
}

Pollo = function() {

this.windTime = 0;
    this.threegroup = new THREE.Group();

this.yellowMat = new THREE.MeshLambertMaterial({
        color: "rgb(255,224,65)",
        shading: THREE.FlatShading
    });
    this.whiteMat = new THREE.MeshLambertMaterial({
        color: "rgb(240,240,240)",
        shading: THREE.FlatShading
    });
    this.blackMat = new THREE.MeshLambertMaterial({
        color: "rgb(0,0,0)",
        shading: THREE.FlatShading
    });
    this.redMat = new THREE.MeshLambertMaterial({
        color: "rgb(226, 123, 131)",
        shading: THREE.FlatShading
    });

//Cuerpo

var cuerpo = new THREE.BoxGeometry(150, 150, 180);
    this.cuerpo = new THREE.Mesh(cuerpo, this.whiteMat);
    this.cuerpo.position.z = -120;
    this.cuerpo.position.y = -40;

//alas

var alaGeometria = new THREE.BoxGeometry(35, 120, 120);

// iz
    this.alaIzquierda = new THREE.Mesh(alaGeometria, this.whiteMat);
    this.alaIzquierda.position.z = -50;
    this.alaIzquierda.position.y = 0;
    this.alaIzquierda.position.x = -90;
    //der

this.alaDerecha = new THREE.Mesh(alaGeometria, this.whiteMat);
    this.alaDerecha.position.z = -50;
    this.alaDerecha.position.y = 0;
    this.alaDerecha.position.x = 90;

//patas
    var pataGeometria = new THREE.BoxGeometry(30, 100, 30);

// iz
    this.pataIzquierda = new THREE.Mesh(pataGeometria, this.yellowMat);
    this.pataIzquierda.position.z = -50;
    this.pataIzquierda.position.y = -130;
    this.pataIzquierda.position.x = -50;
    //der

this.pataDerecha = new THREE.Mesh(pataGeometria, this.yellowMat);
    this.pataDerecha.position.z = -50;
    this.pataDerecha.position.y = -130;
    this.pataDerecha.position.x = 50;

//dedos
    var dedoGeometria = new THREE.BoxGeometry(70, 10, 30);

// iz
    this.dedoIzquierda = new THREE.Mesh(dedoGeometria, this.yellowMat);
    this.dedoIzquierda.position.z = -20;
    this.dedoIzquierda.position.y = -180;
    this.dedoIzquierda.position.x = -50;
    //der

this.dedoDerecha = new THREE.Mesh(dedoGeometria, this.yellowMat);
    this.dedoDerecha.position.z = -20;
    this.dedoDerecha.position.y = -180;
    this.dedoDerecha.position.x = 50;

//Cabeza

var cabeza = new THREE.BoxGeometry(100, 140, 50);
    this.cabeza = new THREE.Mesh(cabeza, this.whiteMat);
    this.cabeza.position.z = 20;
    this.cabeza.position.y = 60;

//ojo izquierdo

var ojoGeometria = new THREE.BoxGeometry(25, 25, 10);
    this.ojoIzquierdo = new THREE.Mesh(ojoGeometria, this.blackMat);
    this.ojoIzquierdo.position.x = -35;
    this.ojoIzquierdo.position.z = 25;
    this.ojoIzquierdo.position.y = 30;

//ojor derecho

this.ojoDerecho = new THREE.Mesh(ojoGeometria, this.blackMat);
    this.ojoDerecho.position.x = 35;
    this.ojoDerecho.position.z = 25;
    this.ojoDerecho.position.y = 30;

//nariz

var nariz = new THREE.BoxGeometry(100, 45, 50);
    this.nose = new THREE.Mesh(nariz, this.yellowMat);
    this.nose.position.x = 0;
    this.nose.position.z = 50;
    this.nose.position.y = -7;

//barba

var barba = new THREE.BoxGeometry(40, 40, 25);
    this.barba = new THREE.Mesh(barba, this.redMat);
    this.barba.position.x = 0;
    this.barba.position.z = 40;
    this.barba.position.y = -50;

// Add Elements to head
    this.cabeza.add(this.ojoIzquierdo);
    this.cabeza.add(this.ojoDerecho);
    this.cabeza.add(this.nose);
    this.cabeza.add(this.barba);

this.cuerpo.add(this.alaDerecha);
    this.cuerpo.add(this.alaIzquierda);
    this.cuerpo.add(this.pataIzquierda);
    this.cuerpo.add(this.pataDerecha);
    this.cuerpo.add(this.dedoDerecha);
    this.cuerpo.add(this.dedoIzquierda);

this.threegroup.add(this.cabeza);
    this.threegroup.add(this.cuerpo);

this.threegroup.traverse(function(object) {
        if (object instanceof THREE.Mesh) {
            object.castShadow = true;
            object.receiveShadow = true;
        }
    });
};

Pollo.prototype.updateBody = function(speed) {

this.cabeza.rotation.y += (this.tHeagRotY - this.cabeza.rotation.y) / speed;
    this.cabeza.rotation.x += (this.tHeadRotX - this.cabeza.rotation.x) / speed;
    this.cabeza.position.x += (this.tHeadPosX - this.cabeza.position.x) / speed;
    this.cabeza.position.y += (this.tHeadPosY - this.cabeza.position.y) / speed;
    this.cabeza.position.z += (this.tHeadPosZ - this.cabeza.position.z) / speed;

this.cuerpo.rotation.y = ((this.tHeagRotY - this.cabeza.rotation.y) + 0.5) / speed;
    this.cuerpo.rotation.x = ((this.tHeadRotX - this.cabeza.rotation.x) + 0.5) / speed;
    this.cuerpo.position.x += (this.tHeadPosX - this.cabeza.position.x) / speed;
    this.cuerpo.position.y += (this.tHeadPosY - this.cabeza.position.y) / speed;
    this.cuerpo.position.z += (this.tHeadPosZ - this.cabeza.position.z) / speed;
};

Pollo.prototype.look = function(xTarget, yTarget) {

this.tHeagRotY = rule3(xTarget, -200, 200, -Math.PI / 4, Math.PI / 4);
    this.tHeadRotX = rule3(yTarget, -200, 200, -Math.PI / 4, Math.PI / 4);
    this.tHeadPosX = rule3(xTarget, -200, 200, 70, -70);
    this.tHeadPosY = rule3(yTarget, -140, 260, 20, 100);
    this.tHeadPosZ = 0;
    this.updateBody(10);
};

Pollo.prototype.cool = function(xTarget, yTarget) {

var dt = 20000 / (xTarget * xTarget + yTarget * yTarget);
    dt = Math.max(Math.min(dt, 1), .5);
    this.windTime += dt;

this.updateBody(10);

//    this.alaIzquierda.scale.x = 9;
    //    this.alaIzquierda.scale.y = 0.3;
    //    this.alaIzquierda.position.y = 50;
    //    this.alaIzquierda.position.x = -60;
    //    this.alaIzquierda.rotation.z += 10 / 20;
    //
    //    this.alaDerecha.scale.x = 9;
    //    this.alaDerecha.scale.y = 0.3;
    //    this.alaDerecha.position.y = 50;
    //    this.alaDerecha.position.x = 60;
    //    this.alaDerecha.rotation.z += 10 / 20;

this.cuerpo.rotation.x = -Math.cos(this.windTime) * Math.PI / 8 * dt;
    this.alaDerecha.rotation.x = -Math.cos(this.windTime) * Math.PI / 8 * dt;
    this.alaIzquierda.rotation.x = -Math.cos(this.windTime) * Math.PI / 8 * dt;

};

function crearSemilla() {

semilla = new Semilla();
    semilla.threegroup.position.z = 350;
    scene.add(semilla.threegroup);

}

Semilla = function() {

this.greenMat = new THREE.MeshLambertMaterial({
        color: "rgb(122, 199, 113)",
        shading: THREE.FlatShading
    });
    this.greenOMat = new THREE.MeshLambertMaterial({
        color: "rgb(31, 155, 17)",
        shading: THREE.FlatShading
    });

this.coffeMat = new THREE.MeshLambertMaterial({
        color: "rgb(134, 98, 76)",
        shading: THREE.FlatShading
    });

var granoGeometria = new THREE.BoxGeometry(10, 10, 10);

this.grano1 = new THREE.Mesh(granoGeometria, this.greenMat);
    this.grano1.position.x = -25;
    this.grano1.position.y = 25;

this.grano2 = new THREE.Mesh(granoGeometria, this.greenOMat);
    this.grano2.position.x = -25;
    this.grano2.position.y = -25;

this.grano3 = new THREE.Mesh(granoGeometria, this.coffeMat);
    this.grano3.position.x = -35;
    this.grano3.position.y = 5;

this.grano4 = new THREE.Mesh(granoGeometria, this.coffeMat);
    this.grano4.position.x = -10;
    this.grano4.position.y = -5;

this.grano5 = new THREE.Mesh(granoGeometria, this.greenOMat);
    this.grano5.position.x = -5;
    this.grano5.position.y = 5;

this.grano6 = new THREE.Mesh(granoGeometria, this.greenOMat);
    this.grano6.position.x = -35;
    this.grano6.position.y = 17;

this.threegroup = new THREE.Group();
    this.threegroup.add(this.grano1);
    this.threegroup.add(this.grano2);
    this.threegroup.add(this.grano3);
    this.threegroup.add(this.grano4);
    this.threegroup.add(this.grano5);
    this.threegroup.add(this.grano6);

};

Semilla.prototype.update = function(xTarget, yTarget) {

this.threegroup.lookAt(new THREE.Vector3(0, 80, 60));

this.tPosX = rule3(xTarget, -200, 200, -250, 250);
    this.tPosY = rule3(yTarget, -200, 200, 250, -250);

this.threegroup.position.x += (this.tPosX - this.threegroup.position.x) / 10;
    this.threegroup.position.y += (this.tPosY - this.threegroup.position.y) / 10;

};

function loop() {
    render();

var xTarget = (mousePos.x - windowHalfX);
    var yTarget = (mousePos.y - windowHalfY);

semilla.isBlowing = isBlowing;
    semilla.update(xTarget, yTarget);

if (isBlowing) {
        pollo.cool(xTarget, yTarget);
    } else {
        pollo.look(xTarget, yTarget);
    }
    requestAnimationFrame(loop);

}

function render() {
    renderer.render(scene, camera);
}

init();
crearLuces();
crearSemilla();
crearPollo();
loop();

function rule3(v, vmin, vmax, tmin, tmax) {
    var nv = Math.max(Math.min(v, vmax), vmin);
    var dv = vmax - vmin;
    var pc = (nv - vmin) / dv;
    var dt = tmax - tmin;
    var tv = tmin + (pc * dt);
    return tv;

}

编译

CSS

HTML

Minecraft Chicken，想吃饲料的小鸡仔：）

Three.js, animal

编辑器支持Emmet

快捷键

Minecraft Chicken，想吃饲料的小鸡仔：）

Three.js, animal

three.js + flickity.js实现的粒子轮播图

使用Three.js和TweenMax构建扭动的3D橡皮圈动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：