首页 > 代码库 > LOD,听起来很牛逼的样子
LOD,听起来很牛逼的样子
<!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="http://www.mamicode.com/build/three.js"></script> <script src="http://www.mamicode.com/js/controls/FlyControls.js"></script> <script src="http://www.mamicode.com/js/Detector.js"></script> <script src="http://www.mamicode.com/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,听起来很牛逼的样子
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。