通过使用数组实现连续内存,从而提高程序加载速度,
在绘制几十万个三角形的时候让它的帧数也保持在60帧
效果:
代码:
<!doctype html> <html> <head> <meta charset="utf-8"/> <title>Cube</title> <style>body{background:#CCCCCC;margin:0;padding:0;}</style> <script src="js/three.js"></script> <!--<script src="js/three.min.js"></script>--> </head> <body> <script> var width = window.innerWidth*98/100; var height = window.innerHeight*98/100; var scene = new THREE.Scene(); scene.fog = new THREE.Fog(0xcccccc, 2000, 3500); //雾效(0xcccccc:颜色;2000:近平面;3500:远平面)近平面要大于camera的近平面,远平面要小于camera的远平面 var camera = new THREE.PerspectiveCamera(27, width/height, 1,3500); camera.position.z = 2750; // scene.add(new THREE.AmbientLight(0x444444)); //添加环境光 var light1 = new THREE.DirectionalLight(0xffffff, 0.5); light1.position.set(1, 1, 1); scene.add(light1); var light2 = new THREE.DirectionalLight(0xffffff, 1.5); light2.position.set(0, -1, 0); scene.add(light2); var triangles = 160000; var geometry = new THREE.BufferGeometry(); geometry.attributes = { index:{ itemSize:1, array:new Uint16Array(triangles * 3), //根据指定长度创建一个无符号的16位整形数组 numItems:triangles * 3 }, position:{ itemSize:3, array:new Float32Array(triangles * 3 * 3), //一个三角形有三个顶点,一个顶点有x,y,z三个值 numItems:triangles * 3 * 3 }, normal:{ itemSize:3, array:new Float32Array(triangles * 3 * 3), numItems:triangles * 3 * 3 }, color:{ itemSize:3, array:new Float32Array(triangles * 3 * 3), numItems:triangles * 3 * 3 } } var flag = 65535/3; //16位的整形最大能表示65535 var indexes = geometry.attributes.index.array; for(var i=0; i<indexes.length; i++){ indexes[i] = i % (flag*3); } geometry.offsets = []; var offsets = triangles/flag; for(var i=0; i<offsets; i++){ //console.log(i); var offset = { start: i*flag*3, index: i*flag*3, count: Math.min(triangles-(i*flag),flag)*3 }; geometry.offsets.push(offset); } var positions = geometry.attributes.position.array; var normals = geometry.attributes.normal.array; var colors = geometry.attributes.color.array; var A = new THREE.Vector3(); var B = new THREE.Vector3(); var C = new THREE.Vector3(); var CB = new THREE.Vector3(); var AB = new THREE.Vector3(); var color = new THREE.Color(); var l = 600; //立方体的边长 var o = 12; //三角形大小 console.log(positions.length); for(var i=0; i<positions.length; i+=9){ var x = Math.random()*l - l/2; var y = Math.random()*l - l/2; var z = Math.random()*l - l/2; var Ax = x + (Math.random()*o - o/2); var Ay = y + (Math.random()*o - o/2); var Az = z + (Math.random()*o - o/2); var Bx = x + (Math.random()*o - o/2); var By = y + (Math.random()*o - o/2); var Bz = z + (Math.random()*o - o/2); var Cx = x + (Math.random()*o - o/2); var Cy = y + (Math.random()*o - o/2); var Cz = z + (Math.random()*o - o/2); 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; A.set(Ax, Ay, Az); B.set(Bx, By, Bz); C.set(Cx, Cy, Cz); CB.subVectors(C, B); AB.subVectors(A, B); CB.cross(AB); CB.normalize(); //规范化(将法向量的长度规范为1) 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; //颜色用R,G,B来表示,R/G/B每个分量的取值范围是0~1 var r = x/l + 0.5; var g = y/l + 0.5; var b = z/l + 0.5; //console.log("r: " + r + "\tg: " + g + "\tb: " + b); color.setRGB(r, g, b); color[i] = color.r; color[i + 1] = color.g; color[i + 2] = color.b color[i + 3] = color.r; color[i + 4] = color.g; color[i + 5] = color.b; color[i + 6] = color.r; color[i + 7] = color.g; color[i + 8] = color.b; } //geometry.computeBoundingSphere(); //计算边界椭圆 //var material = new THREE.MeshPhongMaterial({color:0xffffff,side:THREE.DoubleSide,vertexColors:THREE.VertexColors}); var material = new THREE.MeshPhongMaterial( { color: 0xaaaaaa, ambient: 0xaaaaaa, specular: 0xffffff, shininess: 250, side: THREE.DoubleSide, vertexColors: THREE.VertexColors } ); var mesh = new THREE.Mesh(geometry, material); scene.add(mesh); var renderer = new THREE.WebGLRenderer(); //renderer = new THREE.WebGLRenderer( { antialias: false, clearColor: 0x333333, clearAlpha: 1, alpha: false } ); renderer.setSize(width, height); renderer.setClearColor(scene.fog.color, 1); //renderer.gammaInput = true; //renderer.gammaOutput = true; //renderer.physicallyBasedShading = true; document.body.appendChild(renderer.domElement); function render(){ mesh.rotation.x += 0.005; mesh.rotation.y += 0.005; renderer.render(scene, camera); requestAnimationFrame(render); } render(); </script> </body> </html>
附注:
笔者当前使用的three.js版本是r56
相关推荐
Cocos3D是Cocos2D-x扩展的一个3D模块,它为游戏开发和交互式应用程序提供了强大的3D图形功能。 首先,了解3DMax是一款广泛使用的3D建模、动画和渲染软件,由Autodesk公司开发。它被用于创建高质量的3D模型,这些...
在本文中,我们将深入探讨如何在Windows Presentation Foundation (WPF) 中实现动态加载3D模型。WPF 是Microsoft提供的一种强大的框架,用于...在实际开发中,还要关注性能优化和用户体验,确保模型加载快速、流畅。
Unity性能优化是游戏开发中的重要环节,特别是在使用Unity3D引擎进行C#编程时,确保游戏运行流畅、资源高效利用是提升用户体验的关键。本PDF文档很可能是针对Unity引擎的性能优化策略进行深入探讨的资料,涵盖了多...
本文将深入探讨如何使用Direct3D加载和优化网格模型。 首先,我们要理解网格模型在3D场景中的角色。网格模型是由顶点、边和多边形组成的几何对象,通常以三角形为主,因为它们是最基本的渲染单元,易于处理且计算...
7. **性能优化**:为了提高效率,加载器可能还包含一些优化策略,如预计算顶点变形、减少不必要的计算,或者利用Java3D的缓存机制。 8. **用户交互**:最后,开发者可能希望与加载的3D模型进行交互,比如点击检测、...
总之,3D模型加载是一个涉及文件解析、数据转换、渲染和性能优化等多个环节的复杂过程。实现一个可移植的3D模型加载软件需要对计算机图形学有深入理解,并能灵活运用各种技术解决平台差异和性能问题。
总之,Direct3D加载外部网格模型是3D编程中的核心任务之一。它涉及文件解析、数据存储、渲染技术等多个方面,需要对Direct3D API有深入的理解。通过学习和实践这个知识点,开发者能够创建更加丰富和动态的3D场景。
6. **性能优化**:当处理大型3D模型时,可能需要考虑性能问题。可以通过减少顶点数、使用LOD(Level of Detail)技术或预计算光照来优化模型。 总结起来,WPF结合XAML和3D库提供了一种灵活的方式来动态加载和展示3D...
1. **性能优化**:减少不必要的渲染,优化模型的多边形数量,使用LOD(Level of Detail)技术,根据距离动态调整模型细节。 2. **内存管理**:在不再需要模型时,记得卸载和清除资源,防止内存泄漏。 3. **兼容性**...
优化后的曲线不仅可以加快3D场景的加载速度,还可以减轻计算负担,提高工作效率。 在3DMax中,曲线是由多个控制点构成的,每个控制点都决定了曲线的一部分形状。当曲线过于复杂时,过多的控制点可能导致计算效率...
Android系统下的3D模型应用优化是指在Android平台上运行的三维模型应用程序如何优化其性能和效率,以提供更好的用户体验。以下是相关的知识点: 一、3D模型优化技术 在Android系统下,3D模型优化技术是指通过各种...
6. **pv3D加载流程**: - 解析DAE文件:使用XML解析器读取文件,提取模型数据。 - 构建3D对象:根据解析结果创建pv3D的几何对象、材质和纹理。 - 添加到场景:将3D对象添加到场景中,设置合适的相机位置和光照...
8. **性能优化**: 移动设备的硬件资源有限,因此需要考虑优化,如使用LOD(细节级别)降低复杂度,预加载模型以减少加载时间,或者使用纹理 atlasing 减少纹理切换。 9. **错误处理和兼容性测试**: 考虑到Android...
在本资源包中,gltf模型能在two.js上快速加载,这表明该库优化了gltf的解析和渲染流程,提升了用户体验。 总结来说,这个资源包为化工园区的3D建模和展示提供了多样的选择,无论是gltf的高效加载,还是obj和3dmax的...
5. **优化性能**:考虑到移动设备的性能限制,可能需要对模型进行优化,如降低多边形数量、压缩纹理等,以确保流畅的运行。 6. **调试与测试**:在微信开发者工具中进行调试和预览,确保模型在不同设备上的表现一致...
在实际项目中,可能还需要处理错误、优化性能,或者支持其他3D文件格式。Helix Toolkit库提供了对其他格式(如`.stl`、`.3ds`)的支持,只需相应地替换加载器即可。此外,还可以利用`MaterialGroup`和`MeshGeometry...
本篇文章将深入探讨如何对WPF 3D模型进行优化,以确保在显示大量模型时,应用程序仍然保持流畅且不卡顿。 **1. 模型合并** 模型合并是优化大量3D模型的关键策略之一。通过将多个模型组合成一个单一的3D对象,可以...
总之,UniFBX 2.3.1插件为Unity3D开发者提供了一种高效、灵活的动态加载FBX模型的解决方案,帮助我们更好地管理和优化3D资源,提升游戏的性能和玩家体验。在开发过程中,熟练掌握AssetBundle和UniFBX的使用,无疑会...
9. **优化技巧**:学习如何优化3D性能,例如使用`Leaf`优化、减少渲染细节等。 这个Java 3D小程序是学习3D图形编程的好起点,特别是对于Java开发者而言。通过实践,你可以逐步掌握3D图形学的基本原理和Java 3D库的...
在这个过程中,你可能会遇到一些挑战,如文件格式的不一致性、内存管理、性能优化等。因此,理解3ds格式的细节和熟悉图形编程是非常重要的。此外,你还可以考虑使用现有的3D库,如Assimp或Open Asset Import Library...