<!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. 在docker上安装运行mysql实例

    ps:实验环境是:CentOS Linux release 7.3  64位1.获取mysql镜像从docker hub的仓库中拉取mysql镜像docker pull mysql查看镜像docker ...

  2. Ubuntu 16.04粘贴板增强工具Parcellite

    默认在Ubuntu已经有粘贴板增强工具,比如保存最近五个的复制文本历史. 1.系统默认 使用:[Ctrl]+[;] 然后用数字进行选择即可,但是只支持文本,只能保存最近5次 2.安装Parcellit ...

  3. 1.4－动态路由协议OSPF③

    OSPF的路由汇总 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~                         用默认的网络地址 因为 无论在何种路 ...

  4. ftk学习记（输入框篇）

    [ 声明:版权全部.欢迎转载.请勿用于商业用途. 联系信箱:feixiaoxing @163.com] 昨天讲了进度条,我们还是看看它的运行效果是怎么样的.截图例如以下, 进度条使用的情况还是比較多的 ...

  5. 【转】Linux 查看CPU信息、机器型号等硬件信息

    测试机器的硬件信息: 查看CPU信息(型号) # cat /proc/cpuinfo | grep name | cut -f2 -d: | uniq -c       8  Intel(R) Xeo ...

  6. 四:Java之字符串操作String、StringBuffer和StringBuilder

    string是我们经经常使用到的一个类型,事实上有时候认为敲代码就是在重复的操作字符串,这是C的特点,在java中.jdk非常好的封装了关于字符串的操作.三个类String .StringBuffer ...

  7. CentOS 7下安装Hadoop2.2

    这里就介绍CentOS的安装了,直接进入Hadoop2.2伪分布模式安装. 1.安装包下载 1.1.下载JDK1.7 眼下JDK的版本号是jdk1.8.0_25.这里下载的是jdk1.7.0_67. ...

  8. 进程同步与相互排斥：POSIX有名信号量

    在 POSIX 标准中,信号量分两种,一种是无名信号量,一种是有名信号量. 无名信号量一般用于线程间同步或相互排斥,而有名信号量一般用于进程间同步或相互排斥. 它们的差别和管道及命名管道的差别类似.无 ...

  9. 【Ubuntu】莫名其妙硬盘空间满了

    一个个翻找,发现是 ~/.cache 占用了很多空间,遂删去其中内容 没有什么负面影响,删掉之后节省了许多空间

  10. java多线程——饥饿和公平

    一.概念 饥饿:如果一个线程因为 CPU 时间全部被其他线程抢走而得不到 CPU 运行时间,这种状态被称之为“饥饿”: 二.饥饿原因 高优先级线程吞噬所有的低优先级线程的 CPU 时间. 线程被永久堵 ...