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

<!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文件来加载动画和模型）的更多相关文章

THREE.js代码备份——webgl - geometry - dynamic(模拟海浪，通过时间（毫秒）来控制平面点的运动模拟海浪，鼠标控制写在另外的js中)
HTML: <!DOCTYPE html> <html lang="en"> <head> <title>three.js webg ...
THREE.js代码备份——webgl - custom attributes [lines]（自定义字体显示、控制字图的各个属性）
<!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - cu ...
THREE.js代码备份——webgl - materials - cube refraction [balls](以上下左右前后6张图片构成立体场景、透明球体效果)
<!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - ma ...
THREE.js代码备份——canvas - lines - colors(希尔伯特曲线3D、用HSL设置线颜色)
<!DOCTYPE html> <html lang="en"> <head> <title>three.js canvas - l ...
THREE.js代码备份——canvas_lines(随机点、画线)
<!DOCTYPE html> <html lang="en"> <head> <title>three.js canvas - l ...
THREE.js代码备份——线框cube、按键、鼠标控制
<!DOCTYPE html> <html lang="en"> <head> <title>three.js canvas - g ...
THREE.js代码备份——canvas - geometry - earth(球体贴纹理)
<!DOCTYPE html> <html lang="en"> <head> <title>three.js canvas - g ...
THREE.js代码备份——canvas_ascii_effect(以AscII码显示图形)
<!DOCTYPE html> <html lang="en"> <head> <title>three.js - ASCII Ef ...
js和HTML结合（补充知识：如何防止文件缓存的js代码）
来自<javascript高级程序设计第三版:作者Nicholas C. Zakas>的学习笔记(二) 使用html标签<script>可以把js嵌入到html页面中,让脚本 ...

随机推荐

angularjs中比较实用的multipleselect选择框
一. HTML HTML中比较多逻辑代码,修改的时候要注意修改很多绑值的地方. <div class="form-group"> <label class=&qu ...
Redis源代码分析（三十）--- pubsub公布订阅模式
今天学习了Redis中比較高大上的名词,"公布订阅模式".公布订阅模式这个词在我最開始接触听说的时候是在JMS(Java Message Service)java消息服务中听说的. ...
LeetCode 451. Sort Characters By Frequency （根据字符出现频率排序）
Given a string, sort it in decreasing order based on the frequency of characters. Example 1: Input: ...
Tcl学习之--命名空间
Tcl解释器将全部的命令和全局变量分组管理.这些小组称为命名空间,一个命名空间中的命令和变量不会影响到还有一个命名空间.这些命名空间呈树形组织.一个命名空间的命令能够被还有一个命名空间引入.命名空间树 ...
李洪强经典面试题30-iOS应用性能调优的25个建议和技巧
iOS应用性能调优的25个建议和技巧本文来自iOS Tutorial Team 的 Marcelo Fabri,他是Movile的一名 iOS 程序员.这是他的个人网站:http://www.mar ...
cts帧
RTS/CTS机制的工作原理是.发送网站在向接收网站发送数据包之前.即在DIFS之后不是马上发送数据,而是代之以发送一个请求发送RTS(Ready To Send)帧,以申请对介质的占用,当接收 ...
Ajax之XMLHttpRequst对象
XMLHttpRequest对象提供客户端与Http服务器异步通信的协议.通过该协议,Ajax可以使页面像桌面应用程序一样,只同服务器进行数据层的交换,而不用每次都刷新页面,也不用每次将数据处理工作提 ...
Ubuntu下用命令行快速打开各类型文件(转)
nautilus /media/pm/文档/book/system/必读nautilus /media/pm/文档/book/android/ndk 内核/framerwork/android wai ...
VS2010 使用TeeChart绘图控件 - 之二 - 绘制图形（折线图，柱状图）
1.前期准备具体可见VS2010 使用TeeChart绘图控件 - 之一控件和类的导入 1. 1 添加TeeChart控件,给控件添加变量m_TeeChart 添加TeeChart控件,右击控件, ...
Nginx的alias与root的用法区别和location匹配规则
1.alias与root的用法区别最基本的区别:alias指定的目录是准确的,root是指定目录的上级目录,并且该上级目录要含有location指定名称的同名目录. location /abc/ { ...

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

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

随机推荐

热门专题