<!DOCTYPE html>

<html lang="en">

    <head>

        <title>three.js webgl - path controls</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;

            font-weight: bold;

            background-color: #fff;

            margin: 0px;

            overflow: hidden;

            }

            #info {

                    color:#000;

            position: absolute;

            top: 0px; width: 100%;

            padding: 5px;

            }

            a { color: red; }

        </style>

    </head>

    <body>

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

        <div id="info">

            <a href="http://threejs.org" target="_blank">three.js</a> - path controls example</br>

            mouse look around

        </div>

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

        <script src="js/controls/PathControls.js"></script>

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

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

        <script>

            if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

            var container, stats;

            var camera, controls, scene, renderer;

            var cross;

            var clock = new THREE.Clock();

            init();

            animate();

            function init() {

                camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );

                controls = new THREE.PathControls( camera );

                controls.waypoints = [ [ -500, 0, 0 ], [ 0, 200, 0 ], [ 500, 0, 0 ] ];

                controls.duration = 28

                controls.useConstantSpeed = true;

                //controls.createDebugPath = true;

                //controls.createDebugDummy = true;

                controls.lookSpeed = 0.06;

                controls.lookVertical = true;

                controls.lookHorizontal = true;

                controls.verticalAngleMap = { srcRange: [ 0, 2 * Math.PI ], dstRange: [ 1.1, 3.8 ] };

                controls.horizontalAngleMap = { srcRange: [ 0, 2 * Math.PI ], dstRange: [ 0.3, Math.PI - 0.3 ] };

                controls.lon = 180;

                controls.init();

                // world

                scene = new THREE.Scene();

                scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );

                scene.add( controls.animationParent );

                var geometry = new THREE.CylinderGeometry( 0, 10, 30, 4, 1 );

                var material =  new THREE.MeshLambertMaterial( { color:0xffffff, shading: THREE.FlatShading } );

                for ( var i = 0; i < 500; i ++ ) {

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

                    mesh.position.x = ( Math.random() - 0.5 ) * 1000;

                    mesh.position.y = ( Math.random() - 0.5 ) * 1000;

                    mesh.position.z = ( Math.random() - 0.5 ) * 1000;

                    mesh.updateMatrix();

                    mesh.matrixAutoUpdate = false;

                    scene.add( mesh );

                }

                // lights

                light = new THREE.DirectionalLight( 0xffffff );

                light.position.set( 1, 1, 1 );

                scene.add( light );

                light = new THREE.DirectionalLight( 0x002288 );

                light.position.set( -1, -1, -1 );

                scene.add( light );

                light = new THREE.AmbientLight( 0x222222 );

                scene.add( light );

                // renderer

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

                renderer.setClearColor( scene.fog.color, 1 );

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

                container = document.getElementById( 'container' );

                container.appendChild( renderer.domElement );

                // stats

                stats = new Stats();

                stats.domElement.style.position = 'absolute';

                stats.domElement.style.top = '0px';

                stats.domElement.style.zIndex = 100;

                container.appendChild( stats.domElement );

                //

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

                // start animation

                controls.animation.play( true, 0 );

            }

            function onWindowResize() {

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

                camera.updateProjectionMatrix();

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

                controls.handleResize();

            }

            function animate() {

                requestAnimationFrame( animate );

                render();

                stats.update();

            }

            function render() {

                var delta = clock.getDelta();

                THREE.AnimationHandler.update( delta );

                controls.update( delta );

                renderer.render( scene, camera );

            }

        </script>

    </body>

</html>

threejs path controls example html的更多相关文章

  1. 重新想象 Windows 8.1 Store Apps (81) - 控件增强: WebView 之加载本地 html, 智能替换 html 中的 url 引用, 通过 Share Contract 分享 WebView 中的内容, 为 WebView 截图

    [源码下载] 重新想象 Windows 8.1 Store Apps (81) - 控件增强: WebView 之加载本地 html, 智能替换 html 中的 url 引用, 通过 Share Co ...

  2. 重新想象 Windows 8.1 Store Apps (81) - 控件增强: 加载本地 html, 智能替换 html 中的 url 引用, 通过 Share Contract 分享 WebView 中的内容, 为 WebView 截图

    原文:重新想象 Windows 8.1 Store Apps (81) - 控件增强: 加载本地 html, 智能替换 html 中的 url 引用, 通过 Share Contract 分享 Web ...

  3. HTML第二篇

    1>压缩文件格式:使用.zip格式较好 2>charset(字符集)  国内最新字符集格式为:gb18030   国际上通用的字符集是:UTF-8 3>添加图片 <img sr ...

  4. 附加属性来控制控件中，要扩展模块的visibility

    可解决: 文本框控件中的按钮,DataGridColumnHeader中加入Filter控件... cs文件中的 附加属性 + 样式文件中的 template+控件 -> visibility ...

  5. 深入浅出WPF-11.Template（模板）01

    模板 在WPF中,模板可以分为两大类: 控件模板(ControlTemplate)是算法内容的表现形式,一个控件怎么组织其内部的结构才能让它更符合业务逻辑,让用户操作更舒服,都是由她控制的.它决定了控 ...

  6. WebGL和ThreeJs学习5--ThreeJS基本功能控件

      Threejs 2017年6月6日 15:06 Stats: new Stats();性能监视器,性能测试的方法,引入 Stats.js        http://www.hewebgl.com ...

  7. threejs和3d各种效果的学习

    写给即将开始threejs学习的自己,各种尝试,各种记忆.不要怕,灰色的年华终会过去. 一个技术学习的快慢,以及你的深刻程度,还有你的以后遇到这个东西的时候的反应速度,很大程度上,取决于你的博客的深刻 ...

  8. threeJS创建mesh，创建平面，设置mesh的平移，旋转、缩放、自传、透明度、拉伸

    这个小案例是当初我在学习的时候,小的一个小案例,代码还需要进一步优化:还请谅解~~:主要用到了threeJS创建mesh,创建平面,设置mesh的平移,旋转.缩放.自传.透明度.拉伸等这些小功能: 采 ...

  9. reactjs中使用threejs从0到1

    搭建本地开发环境 安装nodejs 按照 Create React App 安装指南创建一个新的项目 npx create-react-app react-three-demo 删除掉新项目中 src ...

随机推荐

  1. python_数据类型

    数据类型 1.数字类型 整型(Int) - 通常被称为是整型或整数,是正或负整数,不带小数点.Python3 整型是没有限制大小的,可以当作 Long 类型使用,所以 Python3 没有 Pytho ...

  2. MySQL Workbench中如何开启MySQL的远程帐号

    '; /* 上面的语句表示将 discuz 数据库的所有权限授权给 root这个用户,允许 root用户在192.168.119.120进行远程登陆,并设置 root用户的密码为 123456 . 下 ...

  3. 十九、Spring框架（注解方式测试）

    一.注解方式测试 1.注解方式测试使用junit.使用junit-4.12.jar和hamcrest-all-1.3.jar(单元测试包) 把这两个jar包,导入到lib文件夹下. 2.TestSpr ...

  4. this.$route和this.$router的区别

    1. this.$router: 表示全局路由器对象,项目中通过router路由参数注入路由之后,在任何一个页面都可以通过此方法获取到路由器对象,并调用其push(), go()等方法: 2. thi ...

  5. JTA 使用 MySQL 分布式事务

    假定在MySQL实例1上有表 create table person( id int, name ) ) MySQL实例2上也有一张同样的表,现在从实例1中的 person 表中删除一条数据,并把这条 ...

  6. Http Header Content-Typ

    Http Header里的Content-Type一般有这三种:application/x-www-form-urlencoded:数据被编码为名称/值对.这是标准的编码格式.multipart/fo ...

  7. linux nat style

      1● nat style 2● link style    

  8. suffix word ality ally an ancy ance an aneity out ~1

    1● ality 状态,性质   2● ally al+ly ~地   3● an ~地方 ,~人       1★ ance=ancy 性质 ,状态   2★ant ~人,~剂,~的   3★ an ...

  9. 未来Linux系统将是运维行业必备的技能之一

    关于linux,这个并不是每个人都能用或者需要用的,因为平时有很多人用电脑只是为了上上网,聊聊天,打打游戏,这个是完全不需要用linux的.关于linux,是不能用正常的大家所熟知的window来认知 ...

  10. OOP ⑴

    1.面向对象 类和对象的关系 类是我们在生活中,对身边的一系列事物,进行的不自觉的分类! 只是脑海中的一个印象! 在现实生活中,不存在! 存在的是我们这个印象的具体反映! 对象:用来描述客观事物的一个 ...