<!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. 改善java程序的151个建议--数组和集合

    60.性能考虑,数组是首选,在基本类型处理方面.数组还是占优势的,并且集合类的底层也都是通过数组实现.建议在性能要求较高的场景中使用数组替代集合. 61.假设有必要.使用变长数组:我们能够通过对数组扩 ...

  2. WebView与JavaScript交互--Android

    转载请注明出处:  http://blog.csdn.net/forwardyzk/article/details/46819925 在工作中,有一个这种需求,须要用到WebView与javascri ...

  3. 自己制作Android包括@hide接口的SDK

    Android系统存在一些系统级应用与framework代码耦合较深,编译的时候依赖非常多类里面的@hide接口.这类应用怎么来编译呢?首先我们须要制作一份包括Hide接口的SDK,方法例如以下(以a ...

  4. 嵌入式C语言经常使用keyword

    1.statickeyword 这个keyword前面也有提到.它的作用是强大的. 要对statickeyword深入了解.首先须要掌握标准C程序的组成. 标准C程序一直由下列部分组成:       ...

  5. UVA1602 Lattice Animals 搜索+剪枝

    题目大意 给出一个$w\times h$的网格,定义一个连通块为一个元素个数为$n$的方格的集合$A,\forall x\in A, \exists y\in A$,使得$x,y$有一条公共边.现要求 ...

  6. YTU 2774: Prepare for CET6

    2774: Prepare for CET6 时间限制: 1 Sec  内存限制: 128 MB 提交: 40  解决: 37 题目描述 Hard to force the CET4&6 is ...

  7. Android开发常用框架汇总

    作为一名程序猿,好的工具会让你在搬运工的道路上越走越远.以下框架是AC在开发过程中经常会使用到的一些好的框架.列在这里做一个小小的总结,包含但不限于此. 响应式编程 RxJava https://gi ...

  8. bzoj 3721 Final Bazarek

    题目大意: n个数 选k个使和为奇数且最大 思路: 可以先将这n个数排序 然后先去最大的k个数 若和为奇数则直接输出 为偶数可以用没选的最大的奇数替换选了的最小的偶数或用没选的最大的偶数替换选了的最小 ...

  9. 【POJ 1958】 Strange Towers of Hanoi

    [题目链接] http://poj.org/problem?id=1958 [算法] 先考虑三个塔的情况,g[i]表示在三塔情况下的移动步数,则g[i] = g[i-1] * 2 + 1 再考虑四个塔 ...

  10. P3567 [POI2014]KUR-Couriers 主席树

    这个题比一般主席树还要简单,但是用来练习主席树再好不过了,在这里我再放一下主席树板子. 代码: #include<iostream> #include<cstdio> #inc ...