<!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. 快速学习HTML

    1.先写基本的框架标签 2.HTML基本标签 段落标签 <p></p> 空格标签   标题标签 <h1></h1>……<h6></h6 ...

  2. 通过cassandra-cli客户端了解cassandra的内部数据结构

    和cassandra数据库交互的方式有两种,一种是通过类似于cassandra-cli命令的thrift api,或者通过cassandra提供的cql(cassandra query lanugag ...

  3. pycharm(Tip of Day)

    You can easily override the methos of the base class by press Ctrl + 0 ( code | override methods) Yo ...

  4. ueditor自定义额外参数

    <script>ue.ready(function () { ue.setContent('123456');//设置富文本编辑器初始化数据 ue.execCommand('serverp ...

  5. learning ddr state diagram

  6. learning shell display alert function

    [Purpose]        Shell print function base on err info wrn ext output level   [Eevironment]        U ...

  7. 用highchaarts做股票分时图

    1.首先向社区致敬给予灵感参考: https://bbs.hcharts.cn/thread-1985-1-1.html(给予参考的的例子js配置代码未进行压缩,可以清楚看到配置信息)   2.公司是 ...

  8. OOP⑻

    1.接口: 类 和 对象 对象 is a 类 例子: 小鸟 is a 动物 飞机 is a 交通工具 子弹 is a 武器 卫星 is a 通讯工具 问题? 01. 小鸟 飞机 子弹 卫星 虽然不是一 ...

  9. MariaDB的线程及连接

    转自 linux公社 今天在这里介绍一下确认mariaDB(和MySQL一样)的链接数及线程数的方法.MariaDB和MySQL有什么不一样,现在还没有弄清楚. 这是减少数据库的负载,并能提高数据库运 ...

  10. [Leetcode 104]求二叉树的深度Depth of BinaryTree

    [题目] Given a binary tree, find its maximum depth. The maximum depth is the number of nodes along the ...