<!DOCTYPE html>

<html lang="en">

	<head>

		<title>three.js webgl - level-of-details</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 {

				background:#000;

				color:#fff;

				padding:0;

				margin:0;

				font-weight: bold;

				overflow:hidden;

			}

			#info {

				position: absolute;

				top: 0px; width: 100%;

				color: #ffffff;

				padding: 5px;

				font-family: Monospace;

				font-size: 13px;

				text-align: center;

				z-index:100;

			}

			a { color:red }

		</style>

	</head>

	<body>

		<div id="info">

			<a href="http://threejs.org" target="_blank">three.js</a> - level-of-details WebGL example

		</div>

		<script src="../build/three.js"></script>

		<script src="js/controls/FlyControls.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, scene, renderer;

			var geometry, objects;

			var controls, clock = new THREE.Clock();

			init();

			animate();

			function init() {

				container = document.createElement( 'div' );

				document.body.appendChild( container );

				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 15000 );

				camera.position.z = 1000;

				controls = new THREE.FlyControls( camera );

				controls.movementSpeed = 1000;

				controls.rollSpeed = Math.PI / 10;

				scene = new THREE.Scene();

				scene.fog = new THREE.Fog( 0x000000, 1, 15000 );

				scene.autoUpdate = false;

				var light = new THREE.PointLight( 0xff2200 );

				light.position.set( 0, 0, 0 );

				scene.add( light );

				var light = new THREE.DirectionalLight( 0xffffff );

				light.position.set( 0, 0, 1 ).normalize();

				scene.add( light );

				var geometry = [

					[ new THREE.IcosahedronGeometry( 100, 4 ), 50 ],

					[ new THREE.IcosahedronGeometry( 100, 3 ), 300 ],

					[ new THREE.IcosahedronGeometry( 100, 2 ), 1000 ],

					[ new THREE.IcosahedronGeometry( 100, 1 ), 2000 ],

					[ new THREE.IcosahedronGeometry( 100, 0 ), 8000 ]

				];

				var material = new THREE.MeshLambertMaterial( { color: 0xffffff, wireframe: true } );

				var i, j, mesh, lod;

				for ( j = 0; j < 1000; j ++ ) {

					lod = new THREE.LOD();

					for ( i = 0; i < geometry.length; i ++ ) {

						mesh = new THREE.Mesh( geometry[ i ][ 0 ], material );

						mesh.scale.set( 1.5, 1.5, 1.5 );

						mesh.updateMatrix();

						mesh.matrixAutoUpdate = false;

						lod.addLevel( mesh, geometry[ i ][ 1 ] );

					}

					lod.position.x = 10000 * ( 0.5 - Math.random() );

					lod.position.y =  7500 * ( 0.5 - Math.random() );

					lod.position.z = 10000 * ( 0.5 - Math.random() );

					lod.updateMatrix();

					lod.matrixAutoUpdate = false;

					scene.add( lod );

				}

				renderer = new THREE.WebGLRenderer();

				renderer.setPixelRatio( window.devicePixelRatio );

				renderer.setSize( window.innerWidth, window.innerHeight );

				renderer.sortObjects = false;

				container.appendChild( renderer.domElement );

				//

				window.addEventListener( 'resize', onWindowResize, false );

			}

			function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;

				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			function animate() {

				requestAnimationFrame( animate );

				render();

			}

			function render() {

				controls.update( clock.getDelta() );

				scene.updateMatrixWorld();

				scene.traverse( function ( object ) {

					if ( object instanceof THREE.LOD ) {

						object.update( camera );

					}

				} );

				renderer.render( scene, camera );

			}

		</script>

	</body>

</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. [Uva P11168] Airport

    题目是英文的,这里就不给出来了. 题目的大意是说,在平面上有n个点,要找一条直线,使所有点到直线的平均距离最小,且这些点都在该直线的同一侧(包括直线上). 那么,既然要使距离最小化,还要使所有点一定在 ...

  2. ActiveMQ Advisory Message

    http://activemq.apache.org/advisory-message.html ActiveMQ broker 内部维持了一些 topic,保存了一些系统信息,客户端可以订阅这些 t ...

  3. Talend 数据转换

    2个系统都有客户信息,产品信息. 要从一个系统a导出数据给另一个系统b用. 有2个方法. 1.在a系统的客户表,产品表加一个字段,记录b系统对应的ID,导出时直接用sql转换了. 2. 用ETL工具转 ...

  4. 未能加载文件或程序集“Oracle.DataAccess”或它的某一个 依赖项。如何解决？

    之前项目做大数据批量添加使用了OracleBulkCopy,这个是引用Oracle.DataAccess.Client的命名空间,所以项目要引用一个Oracle.DataAccess.dll, 但是运 ...

  5. 从概率图模型pgm到rbm

    有向图模型:directed acyclic graph  DAG  贝叶斯网络 对称的,无向图, UGM: undirected graphic model  UGM, 更有名的名称是MRF,mar ...

  6. linux下uptime命令详解

    uptime uptime 另外还有一个参数 -V(大写),是用来查询版本的 procps是一个实用程序包,主要包括ps top kill等程序主要用来显示与控制一些系统信息,进程状态之类的内容. 以 ...

  7. Java Web(三) Servlet会话管理

    会话跟踪 什么是会话? 可简单理解为,用户打开一个浏览器,点击多个超链接,访问服务器多个web资源,然后关闭服务器,整个过程称为一个会话.从特定客户端到服务器的一系列请求称为会话.记录会话信息的技术称 ...

  8. CAD（镜像对象）（镜像后的微调）（门窗标注）5.14

    由于绘制的cad图形整体是对称的,所以先画了一半,然后再镜像过去.沿着某一对称轴. 注意:1.有些三维内容在二维是选择不上的.2.对称轴上的柱子和墙体之类的不能选中.把轴网和标注的图层锁起来.冻结起来 ...

  9. python 自然语言处理（三）____条件频率分布

    条件频率分布就是频率分布的集合,每个频率分布有一个不同的“条件”,这个条件通常是文本的类别.当语料文本分为几类(文体,主题,作者等)时,可以计算每个类别独立的频率分布,这样,就可以通过条件频率分布研究 ...

  10. ASP.Net MVC(3) 之Razor视图引擎的基础语法

    Razor视图引擎的基础语法: 1.“_”开头的cshtml文档将不能在服务器上访问,和asp.net中的config文档差不多. 2.Razor语法以@开头,以@{}进行包裹. 3.语法使用: 注释 ...