1. <!DOCTYPE html>
  2. <html lang="en">
  3. 	<head>
  4. 		<title>three.js webgl - level-of-details</title>
  5. 		<meta charset="utf-8">
  6. 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7. 		<style>
  8. 			body {
  9. 				background:#000;
  10. 				color:#fff;
  11. 				padding:0;
  12. 				margin:0;
  13. 				font-weight: bold;
  14. 				overflow:hidden;
  15. 			}
  16.  
  17. 			#info {
  18. 				position: absolute;
  19. 				top: 0px; width: 100%;
  20. 				color: #ffffff;
  21. 				padding: 5px;
  22. 				font-family: Monospace;
  23. 				font-size: 13px;
  24. 				text-align: center;
  25. 				z-index:100;
  26. 			}
  27.  
  28. 			a { color:red }
  29.  
  30. 		</style>
  31. 	</head>
  32.  
  33. 	<body>
  34. 		<div id="info">
  35. 			<a href="http://threejs.org" target="_blank">three.js</a> - level-of-details WebGL example
  36. 		</div>
  37.  
  38. 		<script src="../build/three.js"></script>
  39.  
  40. 		<script src="js/controls/FlyControls.js"></script>
  41.  
  42. 		<script src="js/Detector.js"></script>
  43. 		<script src="js/libs/stats.min.js"></script>
  44.  
  45. 		<script>
  46.  
  47. 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
  48.  
  49. 			var container, stats;
  50.  
  51. 			var camera, scene, renderer;
  52.  
  53. 			var geometry, objects;
  54.  
  55. 			var controls, clock = new THREE.Clock();
  56.  
  57. 			init();
  58. 			animate();
  59.  
  60. 			function init() {
  61.  
  62. 				container = document.createElement( 'div' );
  63. 				document.body.appendChild( container );
  64.  
  65. 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 15000 );
  66. 				camera.position.z = 1000;
  67.  
  68. 				controls = new THREE.FlyControls( camera );
  69. 				controls.movementSpeed = 1000;
  70. 				controls.rollSpeed = Math.PI / 10;
  71.  
  72. 				scene = new THREE.Scene();
  73. 				scene.fog = new THREE.Fog( 0x000000, 1, 15000 );
  74. 				scene.autoUpdate = false;
  75.  
  76. 				var light = new THREE.PointLight( 0xff2200 );
  77. 				light.position.set( 0, 0, 0 );
  78. 				scene.add( light );
  79.  
  80. 				var light = new THREE.DirectionalLight( 0xffffff );
  81. 				light.position.set( 0, 0, 1 ).normalize();
  82. 				scene.add( light );
  83.  
  84. 				var geometry = [
  85.  
  86. 					[ new THREE.IcosahedronGeometry( 100, 4 ), 50 ],
  87. 					[ new THREE.IcosahedronGeometry( 100, 3 ), 300 ],
  88. 					[ new THREE.IcosahedronGeometry( 100, 2 ), 1000 ],
  89. 					[ new THREE.IcosahedronGeometry( 100, 1 ), 2000 ],
  90. 					[ new THREE.IcosahedronGeometry( 100, 0 ), 8000 ]
  91.  
  92. 				];
  93.  
  94. 				var material = new THREE.MeshLambertMaterial( { color: 0xffffff, wireframe: true } );
  95.  
  96. 				var i, j, mesh, lod;
  97.  
  98. 				for ( j = 0; j < 1000; j ++ ) {
  99.  
  100. 					lod = new THREE.LOD();
  101.  
  102. 					for ( i = 0; i < geometry.length; i ++ ) {
  103.  
  104. 						mesh = new THREE.Mesh( geometry[ i ][ 0 ], material );
  105. 						mesh.scale.set( 1.5, 1.5, 1.5 );
  106. 						mesh.updateMatrix();
  107. 						mesh.matrixAutoUpdate = false;
  108. 						lod.addLevel( mesh, geometry[ i ][ 1 ] );
  109.  
  110. 					}
  111.  
  112. 					lod.position.x = 10000 * ( 0.5 - Math.random() );
  113. 					lod.position.y =  7500 * ( 0.5 - Math.random() );
  114. 					lod.position.z = 10000 * ( 0.5 - Math.random() );
  115. 					lod.updateMatrix();
  116. 					lod.matrixAutoUpdate = false;
  117. 					scene.add( lod );
  118.  
  119. 				}
  120.  
  121. 				renderer = new THREE.WebGLRenderer();
  122. 				renderer.setPixelRatio( window.devicePixelRatio );
  123. 				renderer.setSize( window.innerWidth, window.innerHeight );
  124. 				renderer.sortObjects = false;
  125. 				container.appendChild( renderer.domElement );
  126.  
  127. 				//
  128.  
  129. 				window.addEventListener( 'resize', onWindowResize, false );
  130.  
  131. 			}
  132.  
  133. 			function onWindowResize() {
  134.  
  135. 				camera.aspect = window.innerWidth / window.innerHeight;
  136. 				camera.updateProjectionMatrix();
  137.  
  138. 				renderer.setSize( window.innerWidth, window.innerHeight );
  139.  
  140. 			}
  141.  
  142. 			function animate() {
  143.  
  144. 				requestAnimationFrame( animate );
  145. 				render();
  146.  
  147. 			}
  148.  
  149. 			function render() {
  150.  
  151. 				controls.update( clock.getDelta() );
  152.  
  153. 				scene.updateMatrixWorld();
  154. 				scene.traverse( function ( object ) {
  155.  
  156. 					if ( object instanceof THREE.LOD ) {
  157.  
  158. 						object.update( camera );
  159.  
  160. 					}
  161.  
  162. 				} );
  163.  
  164. 				renderer.render( scene, camera );
  165.  
  166. 			}
  167.  
  168. 		</script>
  169.  
  170. 	</body>
  171. </html>

　　

LOD，听起来很牛逼的样子的更多相关文章

  1. 不推荐别的了，IDEA 自带的数据库工具就很牛逼！

    MySQL 等数据库客户端软件市面上非常多了,别的栈长就不介绍了, 其实 IntelliJ IDEA 自带的数据库工具就很牛逼,不信你继续往下看. 本文以 IntelliJ IDEA/ Mac 版本作 ...

  2. 很牛逼的android真机调试，手机、平板、电视都可

    1.首先通过路由器,搭建局域网 2.手机开wifi,记住ip地址,平板开wifi,记住ip地址,电视开wifi,记住ip 3.然后再eclipse里面“窗口-首选项-android-ddms里面设置使 ...

  3. 【死磕 NIO】— Proactor模式是什么？很牛逼吗？

    大家好,我是大明哥. 上篇文章我们分析了高性能 IO模型Reactor模式,了解了什么是Reactor 模式以及它的三种常见的模式,这篇文章,大明再介绍另外一种高性能IO模型: Proactor. 为 ...

  4. HDU 6071 Lazy Running（很牛逼的最短路）

    http://acm.hdu.edu.cn/showproblem.php?pid=6071 题意: 1.2.3.4四个点依次形成一个环,现在有个人从2结点出发,每次可以往它相邻的两个结点跑,求最后回 ...

  5. copy and paste ，做到这样也很牛逼了

    db笔记本 mysql资源 mysql5.1中文参考手册 mysql管理 基于linux使用mysql二进制包安装mysql5.5 mysql client命令行选项 mysqld服务器系统变量和状态 ...

  6. Serializable 都这么牛逼了，Parcelable 还要你何用？

    一些闲聊 距离上一篇文章似乎又是很久了,看起来也没有很多反馈,催更就更不用说了.哈哈,放弃了. 话说最近公司在招聘一批至少 5 年开发经验的 Android 开发工程师,我也是忙开了花,激动得不行呀. ...

  7. cssViewer牛逼的chrome插件

    很牛逼,功能很强大.

  8. Animate.css 一款牛逼的css3动画库

    Animate.css是一款很牛逼的,跨浏览器的css3动画库,使用方法也很简单只要引入一个animate.min.css就可以了, 简单使用 1 首先引入 animate的 css 文件样式 cdn ...

  9. 一个很牛的计算pi的c程序！

    C语言是面向过程的一种高级程序设计语言,它在世界范围内使用很广泛,而且很流行.很多大型的应用软件,基本上是用C语言所编写的.在对操作系统以及系统使用程序.需要对硬件进行操作的场合,C语言较其他的高级语 ...

随机推荐

  1. img 标签

    设计网页时经常使用的图片有三种,它们的相同点是都经过了压缩,压缩比越高,图像品质越差. GIF(Graphics Interchange Format):最多支持256色,支持透明,支持多帧动画显示效 ...

  2. 两个有序数组的中位数（第k大的数）

    问题:两个已经排好序的数组,找出两个数组合并后的中位数(如果两个数组的元素数目是偶数,返回上中位数). 感觉这种题目挺难的,尤其是将算法完全写对.因为当初自己微软面试的时候遇到了,但是没有想出来思路. ...

  3. Ubuntu 16 修改时区！

    网上大部分解决办法是命令tzselect,然后选择亚洲-->中国->上海,但很遗憾,一点效果没有:后找到解决办法,运行命令dpkg-reconfigure tzdata,选择Asia--& ...

  4. Spring事务的开启方式

    1.通过注解方式@Transactional @Transactional(rollbackForClassName = { "Exception", "RuntimeE ...

  5. 尚学堂java 参考答案 第九章

    一.选择题 1.AC 解析:A.注意题目是Collections不是 Collection,前者是一个until下的类,后者才是接口 C.Set中的数据是无序且不能重复的 2.A 解析:将发生数组越界 ...

  6. Blazor

    https://docs.microsoft.com/zh-cn/windows/uwp/get-started/construct-form-learning-track https://docs. ...

  7. hdu3518

    题解: 后缀数组 枚举长度为k(1<=k<=len/2)的满足要求的子串个数 代码: #include<cstdio> #include<cmath> #inclu ...

  8. java①

    1.MyEclipse Eclipse Idea 等 都是 开发java的IDE工具! 2.面试题: JDK: java开发工具包!(Java Development TooKit)! 是整个java ...

  9. python -input用户输入

    #接收用户输入信息用input就可以了 #还有输入密码的,也就是隐藏的,pycharm中不好用,要到命令行去 import getpass name = input('name:') age = in ...

  10. java开发简易计算器

    所选用的编译工具为NetBeans /* * To change this license header, choose License Headers in Project Properties. ...