BufferGeometry(立体正方形案例，由三角形片组成)

1.BufferGeometry是自由度最高的geometry类型，可以自由指定每个顶点的位置、颜色、法线（影响光照）。进一步理解Buffer,就是将顶点位置数组、顶点颜色数组等放在一个缓存区中，加快加载和运行速度。

2.缓冲存储在BufferGeometry的一个叫attributes的集合对象里。这个集合存放索引index、位置position、法线normal、颜色color.每一个项都是由3个成员组成。

{itemSize : '表示几个字节组成',array : '有多少个项目',numltens : '表示项目占的内存数组'
}

Uint16Array :这个对象将分配指定个数16 位无符号整数，初始为0。可以通过两种构造函数来分配一块连续的内存：

uint16Array = new Uint16Array(length);//直接收length，表示分配指定长度的16位无符号整数数组。
uint16Array = new Uint16Array(array);//将array数组中的值拷贝一份给uint16Array。

Float32Array:32 位浮点值的类型化数组。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><div id="container"></div></body><script src="//cdn.bootcss.com/three.js/r83/three.js" type="text/javascript" charset="utf-8"></script><!--<script src="../../js/Detector.js" type="text/javascript" charset="utf-8"></script>--><script src="//cdn.bootcss.com/stats.js/r10/Stats.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">
//      if(!Detector.webgl){
//          Detector.addGetWebGLMessage();
//      };var container, stats;var camera, scene, renderer;var mesh;init();animate();function init(){container = document.getElementById('container');camera = new THREE.PerspectiveCamera(27, window.innerWidth / window.innerHeight, 1, 3500);camera.position.z = 2750;scene = new THREE.Scene();scene.fog = new THREE.Fog(0x050505, 2000, 3500 );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();var positions = new Float32Array( triangles * 3 * 3);var normals = new Float32Array( triangles * 3 * 3);var colors = new Float32Array( triangles * 3 * 3);var color = new THREE.Color();var n = 800, n2 = n/2;var d = 12, d2 = d/2;var pA = new THREE.Vector3();var pB = new THREE.Vector3();var pC = new THREE.Vector3();var cb = new THREE.Vector3();var ab = new THREE.Vector3();for( var i = 0; i < positions.length; i += 9 ){var 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;pA.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();//法向量的方向可以这样表示N(nx, ny, nz);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;//颜色用rgb表示, rgb每一个分量取值范围0-1,vx,vy,vz分别对应rgb值。var 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', new THREE.BufferAttribute( positions, 3));geometry.addAttribute('normal', new THREE.BufferAttribute( normals, 3));geometry.addAttribute('color', new THREE.BufferAttribute( colors, 3));geometry.computeBoundingSphere();var material = new THREE.MeshPhongMaterial({color : 0xaaaaaa, ambient : 0xaaaaaa, specular : 0xffffff, shininess : 250,side : THREE.DoubleSide, vertexColors : THREE.VertexColors});mesh = new THREE.Mesh( geometry, material);scene.add(mesh);renderer = new THREE.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 = new Stats();stats.domElement.style.position = 'absolute';stats.domElement.style.top = '0px';container.appendChild(stats.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();stats.update();}function render(){var time = Date.now() * 0.001;mesh.rotation.x = time * 0.25;mesh.rotation.y = time * 0.5;renderer.render(scene, camera);}</script>
</html>

转载于:https://my.oschina.net/zhubaoxin/blog/843371

BufferGeometry(立体正方形案例，由三角形片组成)相关推荐

css实现立体正方形旋转效果
今天呢,用一段简单的代码来实现一个非常炫酷的立方体旋转的案例,主要使用的代码是css的动画以及3d的位移.旋转等属性.具体代码如下: 以上就是使用css代码实现一个3D立体正方形旋转的案例,希望能帮助 ...
设计一个抽象类图形类，在该类中包含有至少两个抽象方法求周长和求面积，分别定义圆形类、长方形类、正方形类、三角形类来继承图形类，并实现上述两个方法
设计一个抽象类图形类,在该类中包含有至少两个抽象方法求周长和求面积,分别定义圆形类.长方形类.正方形类.三角形类来继承图形类,并实现上述两个方法设计抽象类就要使用abstract关键字,抽象类中的 ...
正方形和三角形面积C语言,探讨正方形中的三角形动态面积
中学数学中,经常会涉及到研究某个几何图形内部几何图形的面积,比如在正方形ABCD的边上任取一点P,然后以边AD作为三角形的底边,从而移动点P,探讨三角形DAP的动态面积.这样的动态过程在黑板上难以实现 ...
web 3d旋转立体正方形
transform动画 3D旋转立体正方形在一个大的div里放置六个小div,分别向前后,向左右,向上下移动相等位置,再将平面div旋转,添加animation动画 <!DOCTYPE htm ...
CSS3 transform动画 3D旋转立体正方形
CSS3 transform动画 3D旋转立体正方形在一个大的div里放置六个小div,分别向前后,向左右,向上下移动相等位置,再将平面div旋转,添加animation动画 <!DOCTYP ...
html5+css3立体正方形效果案例
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>& ...
打印正方形和各种三角形
<程序设计基础-实训指导教程>杨莉龚义建 ISBN 978-7-03-032846-5 p28 [实训内容11] 分别输出下列四个图形 * * * * * * * * * * * * * ...
空心正方形图案空心三角形图案
一. KiKi学习了循环,BoBo老师给他出了一系列打印图案的练习,该任务是打印用"*"组成的"空心"正方形图案. 输入描述: 多组输入,一个整数(3~20), ...
正方形隐藏呈三角形html,border三角形
border:100px solid ; box-shadow: inset 0 1px,inset 1px 0px,inset 0 -1px,inset -1px 0px; width:0px; h ...

BufferGeometry(立体正方形案例，由三角形片组成)

BufferGeometry(立体正方形案例，由三角形片组成)相关推荐

最新文章

热门文章