机器人与狗（robot & dog）

更多有趣示例 尽在 知屋安砖社区

示例

HTML

<div id="room" />
<div id="info">
  <h1>ROBOT<br>+PUPPY</h1>
  <h2>
    the good stuff is in <a href="https://s3.amazonaws.com/robotpuppy-threejs/Character.js" target="_blank">Character.js</a><br>
    check it out on <a href="https://github.com/madchops1/robotandpuppy-threejs" target="_blank">Github</a>
        </h2>
</div>
<div id="info2">
  <h2>
    a three.js LAB by <a href="http://karlsteltenpohl.com" target="_blank">Karl Steltenpohl</a> | 
    <a href="http://robotandpuppy.com" target="_blank">robotandpuppy.com</a> | 
    <a href="https://www.instagram.com/robotandpuppy/" target="_blank">instagram</a> | 
    <a href="https://twitter.com/robotandpuppy" target="_blank">twitter</a>
  </h2>
</div>

CSS

// Reset
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

// styles

body {
    padding: 0px;
    margin: 0px;
    background-color: #F2D600;
    
    a { color: #333; }

    #room{
        position: absolute;
        width:100%;
        height: 100%;
        background-color: #F2D600;
        overflow:hidden;
        font-family: arial;
    }

    #info {
        position: absolute;
        top: 10px;
        width: 100%;
        text-align: right;
        z-index: 100;
        display:block;
        right: 48px;

        h1 {
            font-size: 64px;
            color: #333;
            font-weight: bold;
            line-height: 64px;
        }

        h2 {
            font-size: 10px;
            line-height: 14px;
        }
    }

    #info2 {
        position: absolute;
        bottom: 10px;
        width: 100%;
        text-align: right;
        z-index: 100;
        display:block;
        right: 48px;
        
        h2 {
            font-size: 14px;
            color: #333;
            font-weight: bold;
            line-height: 14px;
        }
    }
}

JS

/*

SETUP SCENE

*/

// Scene / Room
var scene,
    camera, 
    fov, 
    aspectRatio, 
    nearPlane, 
    farPlane, 
    renderer,
    container,
    controls;

// Screen and mouse
var HEIGHT, 
    WIDTH, 
    windowCenterX, 
    windowCenterY,
    mousePosition = { x: 0, y: 0 },
    oldMousePosition = { x: 0, y: 0};

// Our robot and kitty
var characters = [];

function ambiance() {
    // Hemisphere light
    hemisphereLight = new THREE.HemisphereLight(0x008080, 0xffffff, 0.7);
    scene.add(hemisphereLight);

    // Ambient light
    scene.add( new THREE.AmbientLight( 0x404040 ) );

    // Spotlight 1
    var spotLight1 = new THREE.SpotLight( 0xffffff );
    spotLight1.name = 'Spot Light 1';
    spotLight1.angle = Math.PI / 4;
    spotLight1.penumbra = 0.3;
    spotLight1.intensity = 0.2;
    spotLight1.position.set( 100, 300, 100 );
    spotLight1.castShadow = true;
    spotLight1.decay = 2;
    //spotLight1.target.position.set(0,100,0);
    spotLight1.distance = 500;
    spotLight1.shadow.mapSize.width  = 1024;
    spotLight1.shadow.mapSize.height = 1024;
    //scene.add( spotLight1 );
    //scene.add( new THREE.SpotLightHelper( spotLight1 ) );

    // Spotlight 2
    var spotLight2 = new THREE.SpotLight( 0xffffff );
    spotLight2.name = 'Spot Light 2';
    spotLight2.angle = Math.PI / 4;
    spotLight2.penumbra = 0.3;
    spotLight2.intensity = 0.2;
    spotLight2.position.set( -100, 300, 100 );
    spotLight2.castShadow = true;
    spotLight2.decay = 2;
    spotLight2.distance = 500;
    spotLight2.shadow.mapSize.width  = 1024;
    spotLight2.shadow.mapSize.height = 1024;
    //scene.add( spotLight2 );
    //scene.add( new THREE.SpotLightHelper( spotLight2 ) );
    
    // Spotlight 3 - Middle
    var spotLight3 = new THREE.SpotLight( 0xffffff );
    spotLight3.name = 'Spot Light 1';
    spotLight3.angle = Math.PI / 4;
    spotLight3.penumbra = 0.3;
    spotLight3.intensity = 1;
    spotLight3.position.set( 0, 300, 100 );
    spotLight3.castShadow = true;
    spotLight3.decay = 2;
    spotLight3.distance = 500;
    spotLight3.shadow.mapSize.width  = 1024;
    spotLight3.shadow.mapSize.height = 1024;
    scene.add( spotLight3 );
    //scene.add( new THREE.SpotLightHelper( spotLight3 ) );

    // Dirlight (unused)
    var dirLight = new THREE.DirectionalLight( 0xffffff, 0.0001 );
    dirLight.name = 'Dir. Light';
    dirLight.position.set( 100, 500, 100 );
    dirLight.castShadow = true;
    dirLight.shadow.camera.near    = 200;  // CHANGED
    dirLight.shadow.camera.far     = 1500; // CHANGED
    dirLight.shadow.camera.left    = -200; // CHANGED
    dirLight.shadow.camera.right   = 200;  // CHANGED
    dirLight.shadow.camera.top     = 200;  // CHANGED
    dirLight.shadow.camera.bottom  = -200; // CHANGED
    dirLight.shadow.mapSize.width  = 1024;
    dirLight.shadow.mapSize.height = 1024;
    //scene.add( dirLight );
    //scene.add( new THREE.CameraHelper( dirLight.shadow.camera ) );
}

function setupFloor() {
    var matFloor = new THREE.MeshPhongMaterial();
    var geoFloor = new THREE.BoxGeometry( 2000, 1, 1000 );
    var mshFloor = new THREE.Mesh( geoFloor, matFloor );
    matFloor.color.set( 0xffe100 );
    mshFloor.receiveShadow = true;
    mshFloor.position.set( 0, -0.05, 0 );    
    scene.add( mshFloor );
}

function addCharacter (bodyDimensions, x, y, z, key) {
    characters[key] = new Character(bodyDimensions);
    characters[key].threeGroup.position.x = x;
    characters[key].threeGroup.position.y = y;
    characters[key].threeGroup.position.z = z;
    scene.add(characters[key].threeGroup);
}

function initScene() {
    HEIGHT                = window.innerHeight;
    WIDTH                 = window.innerWidth;
    windowCenterX         = WIDTH / 2;
    windowCenterY         = HEIGHT / 2;

    scene                 = new THREE.Scene();
    aspectRatio           = WIDTH / HEIGHT;
    fov                   = 70;
    nearPlane             = 1;
    farPlane              = 2000;

    camera = new THREE.PerspectiveCamera(
        fov,
        aspectRatio,
        nearPlane,
        farPlane
    );

    camera.position.x = -50;
    camera.position.z = 150;
    camera.position.y = 150;
    camera.lookAt(new THREE.Vector3(0, 50, 0));

    renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
    renderer.setSize(WIDTH, HEIGHT);
    renderer.shadowMap.enabled  = true;
    renderer.shadowMap.type     = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
    
    container = document.getElementById('room');
    container.appendChild(renderer.domElement);

    window.addEventListener('resize', windowResize, false);
    document.addEventListener('mousemove', mouseMove, false);
    document.addEventListener('touchmove', touchMove, false);
    
    
    // Orbit controls
    /*
    controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.minPolarAngle = -Math.PI / 2; 
    controls.maxPolarAngle = Math.PI / 2;
    controls.noZoom = false;
    controls.noPan = false;
    /* */
}

function windowResize() {
    HEIGHT            = window.innerHeight;
    WIDTH             = window.innerWidth;
    windowCenterX     = WIDTH / 2;
    windowCenterY     = HEIGHT / 2;

    renderer.setSize(WIDTH, HEIGHT);
    camera.aspect = WIDTH / HEIGHT;
    camera.updateProjectionMatrix();
}

function mouseMove(e) {
  mousePosition = { x: e.clientX, y: e.clientY };
} 

function touchMove(e) {
  if (e.touches.length == 1) {
    e.preventDefault();
    mousePosition = { x: e.touches[0].pageX, y: e.touches[0].pageY };
  }
}

var t=0;
function loop() {
    render();
    
    t+=.05;
    var mouse = getMousePosition();
    
    characters['puppy'].puppyUpdateTail(t);
    characters['puppy'].blink('puppy');
    characters['puppy'].puppyLick();
    characters['puppy'].lookAtIt('puppy', mouse);

    characters['robot'].blink('robot');
    characters['robot'].robotMoveMouth('robot');
    characters['robot'].lookAtIt('robot', mouse);
    characters['robot'].robotGrab('robot', mouse);

    requestAnimationFrame(loop);
}

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

function getMousePosition() {
    var vector = new THREE.Vector3();
    vector.set( ( mousePosition.x / window.innerWidth ) * 2 - 1, - ( mousePosition.y / window.innerHeight ) * 2 + 1, 0.1 );
    vector.unproject( camera );
    var yir = vector.sub( camera.position ).normalize();
    var distance = (100 - camera.position.z) / yir.z;
    var pos = camera.position.clone().add( yir.multiplyScalar( distance ) );
    pos.y = pos.y - 30;
    return pos;
}

window.addEventListener('load', init, false);

function init(e) {
    initScene();
    ambiance();
    setupFloor();
    var robot = new Robot();
    var puppy = new Puppy();
    addCharacter(robot, -20, 0, -50, 'robot');
    addCharacter(puppy, 20, 0, -50, 'puppy');
    loop();
}