DOCTYPEhtml><htmllang="en"><head><title>WebGL高性能渲染title><metacharset="utf-8"><metaname="viewport"content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><style>body{color: #cccccc;font-family:Monospace;font-size:13px;text-align:center;background-color: #050505;margin: 0px;overflow: hidden;}#info{position: absolute;top: 0px;width: 100%;padding: 5px;}a{color: #0080ff;}style>head><body><divid="container">div><divid="info">高性的绘制点数据讲解，绘制了50万个点，帧数在30帧以上div><scriptsrc="js/three.js">script><scriptsrc="js/Detector.js">script><scriptsrc="js/libs/stats.min.js">script><script>//判断浏览器是否支持WebGLif(! Detector.webgl ) Detector.addGetWebGLMessage();var container, stats;var camera, scene, renderer;var mesh;init();animate();//实现真循环functioninit(){container = document.getElementById('container');//camera =newTHREE.PerspectiveCamera(27, window.innerWidth / window.innerHeight,1,3500);camera.position.z =2750;scene =newTHREE.Scene();scene.fog =newTHREE.Fog(0x050505,2000,3500);//scene.add(newTHREE.AmbientLight(0x444444));var light1 =newTHREE.DirectionalLight(0xffffff,0.5);light1.position.set(1,1,1);scene.add( light1 );var light2 =newTHREE.DirectionalLight(0xffffff,1.5);light2.position.set(0,-1,0);scene.add( light2 );//var triangles =1600000;var geometry =newTHREE.BufferGeometry();var positions =newFloat32Array( triangles *3*3);// 这里是每个顶点一个法线，也可以一个面一个法线var normals =newFloat32Array( triangles *3*3);// 每个顶点一种颜色var colors =newFloat32Array( triangles *3*3);var color =newTHREE.Color();var n =800, n2 = n/2;// triangles spread in the cubevar d =12, d2 = d/2;// individual triangle sizevar pA =newTHREE.Vector3();var pB =newTHREE.Vector3();var pC =newTHREE.Vector3();var cb =newTHREE.Vector3();var ab =newTHREE.Vector3();for(var i =0; i < positions.length; i +=9){// positionsvar x = Math.random()* n - n2;var y = Math.random()* n - n2;var z = Math.random()* n - n2;var ax = x + Math.random()* d - d2;var ay = y + Math.random()* d - d2;var az = z + Math.random()* d - d2;var bx = x + Math.random()* d - d2;var by = y + Math.random()* d - d2;var bz = z + Math.random()* d - d2;var cx = x + Math.random()* d - d2;var cy = y + Math.random()* d - d2;var cz = z + Math.random()* d - d2;positions[ i ]= ax;positions[ i +1]= ay;positions[ i +2]= az;positions[ i +3]= bx;positions[ i +4]= by;positions[ i +5]= bz;positions[ i +6]= cx;positions[ i +7]= cy;positions[ i +8]= cz;// flat face normalspA.set( ax, ay, az );pB.set( bx, by, bz );pC.set( cx, cy, cz );cb.subVectors( pC, pB );ab.subVectors( pA, pB );cb.cross( ab );cb.normalize();var nx = cb.x;var ny = cb.y;var nz = cb.z;normals[ i ]= nx;normals[ i +1]= ny;normals[ i +2]= nz;normals[ i +3]= nx;normals[ i +4]= ny;normals[ i +5]= nz;normals[ i +6]= nx;normals[ i +7]= ny;normals[ i +8]= nz;// colorsvar vx =( x / n )+0.5;var vy =( y / n )+0.5;var vz =( z / n )+0.5;color.setRGB( vx, vy, vz );colors[ i ]= color.r;colors[ i +1]= color.g;colors[ i +2]= color.b;colors[ i +3]= color.r;colors[ i +4]= color.g;colors[ i +5]= color.b;colors[ i +6]= color.r;colors[ i +7]= color.g;colors[ i +8]= color.b;}geometry.addAttribute('position',newTHREE.BufferAttribute( positions,3));// geometry.addAttribute( 'normal', new THREE.BufferAttribute( normals, 3 ) );geometry.addAttribute('color',newTHREE.BufferAttribute( colors,3));geometry.computeBoundingSphere();// var material = new THREE.MeshPhongMaterial( {// color: 0xaaaaaa, specular: 0xffffff, shininess: 250,// side: THREE.DoubleSide, vertexColors: THREE.VertexColors// } );var material =newTHREE.PointsMaterial({size:1,vertexColors:THREE.VertexColors});mesh =newTHREE.Mesh( geometry, material );scene.add( mesh );//renderer =newTHREE.WebGLRenderer({antialias:false});renderer.setClearColor( scene.fog.color );renderer.setPixelRatio( window.devicePixelRatio );renderer.setSize( window.innerWidth, window.innerHeight );renderer.gammaInput =true;renderer.gammaOutput =true;container.appendChild( renderer.domElement );//stats =newStats();stats.domElement.style.position ='absolute';stats.domElement.style.top ='0px';container.appendChild( stats.domElement );//window.addEventListener('resize', onWindowResize,false);}functiononWindowResize(){//改变相机的纵横比例以及更新相机的投影矩阵camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize( window.innerWidth, window.innerHeight );}//functionanimate(){requestAnimationFrame( animate );render();stats.update();}functionrender(){var time = Date.now()*0.001;mesh.rotation.x = time *0.25;mesh.rotation.y = time *0.5;renderer.render( scene, camera );}script>body>html>
