<!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. （待解决，效率低下）47. Permutations II C++回溯法

    思路是在相似题Permutations的基础上,将结果放到set中,利用set容器不会出现重复元素的特性,得到所需结果 但是利用代码中的/* */部分通过迭代器遍历set将set中的元素放在一个新的v ...

  2. lucene 根据 id 获取索引内容（C# / .NET）

    封装代码如下: public MakerArtiImodel GetIndexModelById(int id) { string indexPath = StrHelper.rootPath + & ...

  3. utf8mb4与utf8的区别

    今天在测试小程序保存表情时,数据库插入数据时报错ER_TRUNCATED_WRONG_VALUE_FOR_FIELD: Incorrect string value: '\xF0\x9F\x98\x8 ...

  4. linux过滤旧文件中的空行和注释行剩余内容组成新文件

    一.说明 在某些场景下我们想要将旧文件中空行和注释行过滤掉,将产生实际效果的行保留. 比如redis提供的配置示例文件中有很多用于说明的空行和注释行,我们想把产生实际效果的配置行筛选出来组成新的简洁的 ...

  5. windows的网上邻居

    要说以前中学最怕上什么课就是电脑课,要说电脑印象最深的是什么软件就是总摆在桌面又听不懂又点进去什么都没有的“网上邻居”. “网上邻居”指的是同一局域网内在线的的电脑,更简单些就是连在同一路由器中开机的 ...

  6. vue项目如何打包前后端不分离发布手把手教学apache、nginx

    vue项目如何不分离发布 1.首先yarn build 我用了vue-cli脚手架,bulid后的dist文件夹里的index.html有加版本号,那么为什么需要加版本号呢? a.回滚 b.解决浏览器 ...

  7. response对象、转发、重定向

    1.response:响应.    该对象是用来响应用户请求后的结果.2.response中的常用方法:  response.setCharacterEncoding();该方法用来处理响应时的字符集 ...

  8. 大白菜装机版一键制作启动u盘教程

    第一步 下载并且安装好大白菜装机版,打开安装好的大白菜装机版,插入u盘等待软件成功读取到u盘之后,点击“一键制作启动u盘”进入下一步操作.如下图所示 第二步 在弹出的信息提示窗口中,点击“确定”进入下 ...

  9. asp.net webapi 返回json结果的方法

    第一种: public static void Register(HttpConfiguration config) { //1.将默认的xml格式化程序清除 GlobalConfiguration. ...

  10. angular4-事件绑定

    事件绑定语法(可以通过 (事件名) 的语法,实现事件绑定) <date-picker (dateChanged)="statement()"></date-pic ...