<!DOCTYPE html>

<html lang="en">

<head>

    <title>three.js webgl - scene animation</title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

    <style>

        body {

            color: #000;

            font-family:Monospace;

            font-size:13px;

            text-align:center;

            background-color: #fff;

            margin: 0px;

            overflow: hidden;

        }

        #info {

            position: absolute;

            top: 0px; width: 100%;

            padding: 5px;

        }

        a {

            color: #0af;

        }

    </style>

</head>

<body>

<div id="container"></div>

<div id="info">

    <a href="http://threejs.org" target="_blank">three.js</a> webgl - scene animation - <a href="https://clara.io/view/96106133-2e99-40cf-8abd-64defd153e61">Three Gears Scene</a> courtesy of David Sarno</div>

<script src="../build/three.js"></script>

<script src="js/Detector.js"></script>

<script src="js/libs/stats.min.js"></script>

<script>

    var SCREEN_WIDTH = window.innerWidth;

    var SCREEN_HEIGHT = window.innerHeight;

    var FLOOR = -250;

    var container,stats;

    var camera, scene, sceneAnimationClip;

    var renderer;

    var mesh, helper;

    var mixer;

    var mouseX = 0, mouseY = 0;

    var windowHalfX = window.innerWidth / 2;

    var windowHalfY = window.innerHeight / 2;

    var clock = new THREE.Clock();

    document.addEventListener( 'mousemove', onDocumentMouseMove, false );

    init();

    animate();

    function init() {

        container = document.getElementById( 'container' );

        camera = new THREE.PerspectiveCamera( 30, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );

        camera.position.z = 150;

        scene = new THREE.Scene();

        scene.fog = new THREE.Fog( 0xffffff, 2000, 10000 );

        //scene.add( camera );

        // GROUND

        var geometry = new THREE.PlaneBufferGeometry( 16000, 16000 );

        var material = new THREE.MeshPhongMaterial( { emissive: 0x000000 } );

//        var ground = new THREE.Mesh( geometry, material );

//        ground.position.set( 0, FLOOR, 0 );

//        ground.rotation.x = -Math.PI/2;

//        /*scene.add( ground );*/

//

//        ground.receiveShadow = true;

        // RENDERER

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

        renderer.setClearColor( scene.fog.color );

        renderer.setPixelRatio( window.devicePixelRatio );

        renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );

        renderer.domElement.style.position = "relative";

        container.appendChild( renderer.domElement );

        renderer.gammaInput = true;

        renderer.gammaOutput = true;

        renderer.shadowMap.enabled = true;

        // STATS

        stats = new Stats();

        container.appendChild( stats.dom );

        //

        var loader = new THREE.ObjectLoader();

        loader.load( "models/json/scene-animation.json", function ( loadedScene ) { //这里的json应该是通过

                                                                                 //三维建模软件之类导出来的，包含模型和动画

            sceneAnimationClip = loadedScene.animations[0];

            scene = loadedScene;

            scene.add( camera );

            scene.fog = new THREE.Fog( 0xffffff, 2000, 10000 ); //感觉并没有什么用

            mixer = new THREE.AnimationMixer( scene );      //动画场景？

            mixer.clipAction( sceneAnimationClip ).play(); //播放动画？

        } );

        window.addEventListener( 'resize', onWindowResize, false );

    }

    function onWindowResize() {

        windowHalfX = window.innerWidth / 2;

        windowHalfY = window.innerHeight / 2;

        camera.aspect = window.innerWidth / window.innerHeight;

        camera.updateProjectionMatrix();

        renderer.setSize( window.innerWidth, window.innerHeight );

    }

    function onDocumentMouseMove( event ) {

        mouseX = ( event.clientX - windowHalfX );

        mouseY = ( event.clientY - windowHalfY );

    }

    //

    function animate() {

        requestAnimationFrame( animate );

        render();

        stats.update();

    }

    function render() {

        var delta = 0.75 * clock.getDelta();   //时间间隔

        camera.position.x += ( mouseX - camera.position.x ) * .05;

        camera.position.y = THREE.Math.clamp( camera.position.y + ( - mouseY - camera.position.y ) * .05, 0, 1000 );

        camera.lookAt( scene.position );

        if( mixer ) {

           // console.log( "updating mixer by " + delta );

            mixer.update( delta );

        }

        renderer.render( scene, camera );

    }

</script>

</body>

</html>

THREE.js代码备份——webgl - scene animation（通过加载json文件来加载动画和模型）的更多相关文章

  1. THREE.js代码备份——webgl - geometry - dynamic(模拟海浪，通过时间（毫秒）来控制平面点的运动模拟海浪，鼠标控制写在另外的js中)

    HTML: <!DOCTYPE html> <html lang="en"> <head> <title>three.js webg ...

  2. THREE.js代码备份——webgl - custom attributes [lines]（自定义字体显示、控制字图的各个属性）

    <!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - cu ...

  3. THREE.js代码备份——webgl - materials - cube refraction [balls](以上下左右前后6张图片构成立体场景、透明球体效果)

    <!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - ma ...

  4. THREE.js代码备份——canvas - lines - colors(希尔伯特曲线3D、用HSL设置线颜色)

    <!DOCTYPE html> <html lang="en"> <head> <title>three.js canvas - l ...

  5. THREE.js代码备份——canvas_lines(随机点、画线)

    <!DOCTYPE html> <html lang="en"> <head> <title>three.js canvas - l ...

  6. THREE.js代码备份——线框cube、按键、鼠标控制

    <!DOCTYPE html> <html lang="en"> <head> <title>three.js canvas - g ...

  7. THREE.js代码备份——canvas - geometry - earth(球体贴纹理)

    <!DOCTYPE html> <html lang="en"> <head> <title>three.js canvas - g ...

  8. THREE.js代码备份——canvas_ascii_effect(以AscII码显示图形)

    <!DOCTYPE html> <html lang="en"> <head> <title>three.js - ASCII Ef ...

  9. js和HTML结合（补充知识：如何防止文件缓存的js代码）

    来自<javascript高级程序设计 第三版:作者Nicholas C. Zakas>的学习笔记(二) 使用html标签<script>可以把js嵌入到html页面中,让脚本 ...

随机推荐

  1. Ubuntu安装deb时错误：“dpkg：错误：另外一个进程已经为 dpkg 状态数据库 加锁”解决

    以下方式任选一个即可: 1.重启系统 2.执行(这种方式不要尝试,系统很容易挂) sudo rm /var/lib/dpkg/lock 然后执行修复 sudo dpkg --configure -a

  2. ngTbale真分页实现排序、搜索等功能

    一. 真分页表格基础 1. 需求:分页,排序,搜索都是需要发API到服务端. 2. JS实现代码: getStorage是localStorage一个工具方法,可以自己写这个方法. API参数如下: ...

  3. 打造atom成为golang开发神器

    在我在Windows系统上开发的日子里.我使用IDE开发数年之久.比如Visual Basic IDE, Borland Delphi IDE, Visual C++ 和最后的Visual Studi ...

  4. Linux下CMake使用介绍

    CMake是一个跨平台的编译自己主动配置工具,它使用一个名为CMakeLists.txt的文件来描写叙述构建过程,能够产生标准的构建文件.它能够用简单的语句来描写叙述全部平台的安装(编译过程).它能够 ...

  5. Objective-C NSFileManager 文件管理总结

    createFileAtPath //创建文件 NSFileManager *fm = [NSFileManager defaultManager]; NSString *strpath = [NSS ...

  6. SmartSchool CC校友录V8(毕业入世版)

    SmartSchool CC校友录V8(毕业入世版) 使用说明 CC校友录V8(毕业入世版) 主要面向毕业后在某城市工作的校友,给大家构建一个充分交流的平台,“人脉”积累是本软件的功能特色,为此淡化了 ...

  7. Fragmen的onAttach方法

    现在Android开发多使用一个Activity管理多个Fragment进行开发,不免需要两者相互传递数据,一般是给Fragment添加回调接口,让Activity继承并实现. 回调接口一般都写在Fr ...

  8. 华为FusionSphere概述——计算资源、存储资源、网络资源的虚拟化，同时对这些虚拟资源进行集中调度和管理

    华为FusionSphere概述 FusionSphere是华为自主知识产权的云操作系统,集虚拟化平台和云管理特性于一身,让云计算平台建设和使用更加简捷,专门满足企业和运营商客户云计算的需求.华为云操 ...

  9. poj3463 Sightseeing——次短路计数

    题目:http://poj.org/problem?id=3463 次短路计数问题,在更新最短路的同时分类成比最短路短.长于最短路而短于次短路.比次短路长三种情况讨论一下,更新次短路: 然而其实不必被 ...

  10. Android webkit keyevent 事件传递过程

    前言:基于android webview 上定制自己使用的可移植浏览器apk,遇到好多按键处理的问题.所以索性研究了一下keyevent 事件的传递流程. frameworks 层 keyevent ...