<!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. 洛谷—— P1419 寻找段落

    https://www.luogu.org/problem/show?pid=1419 题目描述 给定一个长度为n的序列a_i,定义a[i]为第i个元素的价值.现在需要找出序列中最有价值的“段落”.段 ...

  2. HDU——1215 七夕节

    暴力枚举....(正解好像不是这样...) 代码: #include<cstdio> #include<cstdlib> #include<cstring> #in ...

  3. 分析helo1项目中的 Web.xml

    web.xml文件位于hello1 中target/WEB-INF/classes/javaeetutorial目录下. 这个web.xml文件包含Facelets应用程序所需的几个元素: 其中(1) ...

  4. Linux服务管理（Ubuntu服务管理工具sysv-rc-conf）（转）

    Linux运行级别 Linux系统任何时候都运行在一个指定的运行级上,并且不同的运行级的程序和服务都不同,所要完成的工作和要达到的目的都不同,系统可以在这些运行级之间进行切换,以完成不同的工作. 运行 ...

  5. RAC fail over 测试

    oracle rac 11gr2中提供了多种 failover方式,这里只测试 server side TAF. 也就是说在server端配置的failover.这种配置方式的好处就是,如果有什么改动 ...

  6. Hibernate插入错误：GenericJDBCException: could not insert:

    数据库中一般不能建立user(表名为User)表,将User类改名,又一次建立映射,问题就能够解决 当然,还有还有一种情况.就是类中id类型错误.要设置为Integer型才干够设置自己主动增长,否则也 ...

  7. CocoaPods pod instal慢、卡住解决方法

    CocoaPods pod install慢.卡住解决方法 近期使用CocoaPods来加入第三方类库,不管是运行pod install还是pod update都卡在了Analyzing depend ...

  8. SVN Working copying &#39;xxxxx/xxxx/xxxx&#39; locked

    使用SVN想更新上传时提示Working copying 'xxxx/xxxx/xxx' locked 解决方法: 选中你的项目,上面工具栏一行找到 Action → Cleanup all  Wor ...

  9. 对数据html文本 的处理

    对数据html文本 的处理  : 提取文字.图片.分句 ''' SELECT * FROM Info_Roles WHERE Flag=1 LIMIT 2; select top y * from 表 ...

  10. 关于三星手机调用相机返回后activity被回收的问题

    今天遇到个问题很蛋疼啊,别的手机没问题,唯独三星机型的手机跳转到相机之后,回来activity没了.这个或许是三星内部回收机制的关系,因为相机打开之后消耗会比较大, 所以后面的进程都给暂时回收掉了,加 ...