<!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. js javascript 容错处理代码屏蔽js错误

    加入到head <SCRIPT language=javascript> window.onerror=function(){return true;} </SCRIPT> o ...

  2. CentOS是哪个版本 CentOS版本信息查看技巧

    root@MyMail ~ # uname Linux root@MyMail ~ # uname -r 2.6.18-164.el5 [root@localhost ~]# uname -a Lin ...

  3. [NOIP 2015TG D1T3] 斗地主

    题目描述 牛牛最近迷上了一种叫斗地主的扑克游戏.斗地主是一种使用黑桃.红心.梅花.方片的A到K加上大小王的共54张牌来进行的扑克牌游戏.在斗地主中,牌的大小关系根据牌的数码表示如下:3<4< ...

  4. 在Eclipse中无法链接到svn，出现Previous operation has not finished; run 'cleanup' if it was interrupted异常

    由于使用了clean或是clean up导致和svn断开链接 1.下载一个sqlite3.exe 2.将sqlite3.exe放到本项目的.svn同级目录下(.svn默认是隐藏,让.svn文件夹显示查 ...

  5. MSSQL优化（TUNING & OPTMIZATION & 优化）之——计划重用（plan reusing）

    Oracle中,为了减少系统内的硬解析,从而节省系统资源,有绑定变量.计划共享(通过cursor_sharing参数)等一系列措施.那么,SQL Server作为三大商业关系库之一,是否也存在这样的机 ...

  6. linux重命名所有find查找到的文件/文件夹

    一.说明 在某些时候我们想要将所有find命令查找到的文件或文件夹全都重命名,比如都加上.bak后辍 二.操作命令 find /dir -name "*pattern*" -exe ...

  7. VMware进入BIOS

    在虚拟机关机状态下,点击“虚拟机”--“电源”--“打开电源时进入固件”即自动启动进入bios

  8. 把旧系统迁移到.Net Core 2.0 日记（4) - 使用EF+Mysql

    因为Mac 不能装SqlServer, 所以把数据库迁移到MySql,然后EntityFramework要改成Pomelo.EntityFrameworkCore.MySql 数据库迁移时,nvarc ...

  9. JSP开发Web应用系统

    1.动态网站开发基础 1-1:动态网页 a.为什么需要动态网页(当我们需要修改网页内容的时候,都要重新上传一次覆盖原来的页面.而且,制作必须要通过专用的网页制作工具,比如:Dreamweaver.Fr ...

  10. Easyui的datagrid的行编辑器Editor中添加事件（修改某个单元格带出其他单元格的值）

    项目中有个datagrid需要编辑行时,用到Editor的属性,那么如何添加一个事件 问题:同一个编辑行中的某个单元格值改变时,修改其他单元格的值 页面用到的datagrid <table id ...