<!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. 使用AJAX报406错误

    使用AJAX报406错误,基本有一下两种情况: (1)90%的可能是没有添加jackson包: (2)10%的可能是请求的url后缀是*.html 在springmvc里面,如果请求的是*.html, ...

  2. python操作文件（增、删、改、查）

    内容 global log 127.0.0.1 local2 daemon maxconn 256 log 127.0.0.1 local2 info defaults log global mode ...

  3. selinux介绍/状态查看/开启/关闭

    SELinux(Security-Enhanced Linux) 是美国国家安全局(NSA)对于强制访问控制的实现,是 Linux历史上最杰出的新安全子系统--百度百科. 基于经验来说SELinux在 ...

  4. 微信小程序生成二维码

    微信小程序客户端生成二维码的方法, 请参考这里: https://github.com/demi520/wxapp-qrcode  代码片段如下: const QR = require(". ...

  5. swiper添加了自动滚动效果，然后用手指划过页面，发现自动滚动效果不生效了

    我给swiper添加了自动滚动效果,然后用手指划过页面,发现自动滚动效果不生效了,哪里出了问题呢? 添加参数 autoplayDisableOnInteraction : false,

  6. I/O复用(select)——回声服务器端/客户端

    一.select 使用select函数可以将多个文件描述符集中到一起统一监视,监视事件如下: 是否存在待读取数据. 是否可传输无阻塞传输数据. 是否发生异常. 将关心上述3种事件的文件描述发分别注册到 ...

  7. Ubuntu 14.04下如何更换更新源（更新为163源）

    之前的安装ubuntu桌面版的之后安装yum,vim等会遇到一些问题, 比如:Ubuntu 14.04下如何更换更新源(更新为163源) 解决: http://jingyan.baidu.com/ar ...

  8. 基于bootstrap的后台左侧导航菜单和点击二级菜单刷新二级页面时候菜单展开显示当前菜单

    本文使用的框架版本为: bootstrap3,Jquery2.1.0  (其他jquery可能会报错,菜单项不执行 效果如下: 1.在项目中引入框架: <link rel="style ...

  9. 模块化&os&sys

    syspath python 使用import模块调用的优先级是根据sys.path路径来的,此变量中位置在列表中的先后顺序来调用,如果先找到对应的模块,则先调用此模块. import sys pri ...

  10. where的顺序对运行的影响--无影响

    2.表连接的时候,大表与小表的顺序是哪个在前.3.在多表连接时,是表与表先连接起来,再执行对单表的限制条件where条件:还是先执行单表的限制where条件,再进行表连接?4.多表连接时,如4个表,我 ...