<!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. Vue.js 引入外部js方法

    1.外部文件config.js 第一种写法 //常量的定义 const config = { baseurl:'http://172.16.114.5:8088/MGT2' } //函数的定义 fun ...

  2. 码云git使用三(本地代码合并)

    现在我们已经学会了把“本地代码上传至码云git服务器”和“从码云git服务器下载代码到本地”. 我们现在学习怎么上传代码到服务器注意事项和步骤. 1.我们修改代码后,我们需要先+Add后再Commit ...

  3. Win10系列：UWP界面布局基础2

    属性设置 在面向对象程序开发中,所提及的属性通常指的是对象的属性.在XAML代码中,定义元素时也可以为其设置属性,例如对于一个TextBox元素,有背景属性.宽度属性和高度属性等.为了满足实际应用的需 ...

  4. Win10系列：JavaScript动画4

    上面介绍的动画效果是通过Windows动画库创建的,这里的旋转动画是通过设置页面元素的style对象的相关属性来创建,此动画的效果是将界面元素沿着指定的方向进行旋转.下面介绍style对象的几个常用属 ...

  5. Uboot USB模式(RK3288变砖头的解决办法)

    RK3288启动后有三种模式,可以分别进行操作. 第一种是normal也就是正常的启动模式.这个模式无法刷固件.一般板子通电就是这个模式 第二种是loader模式.就是刷固件模式.这个模式可以刷各种i ...

  6. outline: none;

    outline: none:用在去掉某个选中后显示的外边框,(追求细节) http://www.w3school.com.cn/cssref/pr_outline.asp

  7. 【原创】QString 函数 replace()indexOf()、 lastindexOf()

    1.替换函数 示例: QString x = "Say yes!"; QString y = "no"; x.replace(, , y); // x == & ...

  8. vue-6-事件处理

    <div id="example-2"> <button v-on:click="greet">Greet</button> ...

  9. Python select 详解(转）

    I/O多路复用是在单线程模式下实现多线程的效果,实现一个多I/O并发的效果.看一个简单socket例子: import socket SOCKET_FAMILY = socket.AF_INET SO ...

  10. C++基础知识：泛型编程

    1.泛型编程的概念 ---不考虑具体数据类型的编程模式Swap 泛型写法中的 T 不是一个具体的数据类型,而是泛指任意的数据类型. 2.函数模板 - 函数模板其实是一个具有相同行为的函数家族,可用不同 ...