threeJS20-geometry-buffergeometry - 好文

需要电子档书籍或者源码可以Q群：828202939
<https://blog.csdn.net/weixin_39452320/article/details/85482005?_wv=1027&k=58pY3nD>
希望可以和大家一起学习、一起进步！！

如有错别字或有理解不到位的地方，可以留言或者加微信15250969798，博主会及时修改！！！！！

博主的案例并不难，只是为了更好的给想入门threeJS的同学一点点经验！！！！！

涉及的知识点博主已经从three源码库里面摘要出来放在对应的注释里面！

前面学习了常见的几种格式的模型加载，只要选择对应的加载器加载，获取对应的geometry和material就基本可以还原模型了！

后面博主会考虑把loader加载的模型格式补全！

今天我们学习geometry类的BufferGeometry，buffergeometry是自由度最高的一种geometry，它可以自定义顶点、颜色、法线等属性！

本案例是根据顶点生成三角形再组合成一个几何体！

图示：

代码：
<html> <head> <title>threeJS20-geometry-buffergeometry</title> <style> body {
background-color: #000; margin: 0px; overflow: hidden; } #WebGL { width: 100%;
height: 100%; position: absolute; left: 0; top: 0; z-index: 999; } </style>
</head> <body> <script
src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script> <script
src="../../../build/three.js"></script> <script
src="../../js/controls/OrbitControls.js"></script> <div id="WebGL"></div>
<script> 'use strict'; var container, camera, scene, renderer, geometry,
material, animate, controls; //常用变量 var spotLight, mshStdBox, mesh; //自定义对象变量
var target = new THREE.Vector3(0, 30, 0); var webGLW = $('#WebGL').width(); var
webGLH = $('#WebGL').height(); init(); animate(); function init() { container =
document.getElementById('WebGL'); scene = new THREE.Scene(); scene.background =
new THREE.Color(0xcfcfcf); // scene.fog = new THREE.Fog(0xa0a0a0, 2000, 3500);
//雾 camera = new THREE.PerspectiveCamera(40, window.innerWidth /
window.innerHeight, 0.1, 10000); camera.position.set(0, 60, -1000);
camera.lookAt(target); var ambient = new THREE.AmbientLight(0x444444 );
scene.add(ambient); lights(); //灯光：聚光灯 // lightsHelper(spotLight); //灯光显示助手 //
plane() //// 地面 loadModel(); //添加模型 rendererScene(); //场景渲染
OrbitControls(camera, renderer);
//OrbitControls控件模块，90版本鼠标右键上下是移动，96版本之后右键上下是缩放
window.addEventListener('resize', onWindowResize, false); //监听屏幕变化 } function
plane() { // 地面 let grid_mesh = new THREE.Mesh(new
THREE.PlaneBufferGeometry(2000, 2000), new THREE.MeshPhongMaterial({ color:
0x999999, depthWrite: false })); grid_mesh.rotation.x = -Math.PI / 2;
grid_mesh.receiveShadow = true; scene.add(grid_mesh); var grid = new
THREE.GridHelper(2000, 20, 0x000000, 0x000000); grid.material.opacity = 0.2;
grid.material.transparent = true; scene.add(grid); } function lights() { //
SpotLight( color：颜色, intensity：强度, distance：发光距离, angle：角度, penumbra：边缘范围,
decay：衰减 ) spotLight = new THREE.DirectionalLight(0xffffff, 1);
spotLight.position.set(10, 120, -30); spotLight.angle = Math.PI / 4;
spotLight.penumbra = 0.05; //边缘范围，反比 spotLight.decay = 2; //衰减系数，反比
spotLight.distance = 2000; //发光距离 spotLight.castShadow = true; //阴影
spotLight.shadow.mapSize.width = 1024; spotLight.shadow.mapSize.height = 1024;
spotLight.shadow.camera.near = 10; //近截面 spotLight.shadow.camera.far = 2500;
scene.add(spotLight); } function lightsHelper(lightsObject) { //
聚光灯显示助手SpotLightHelper( light:灯光, color：颜色 ) var lightHelper = new
THREE.SpotLightHelper(lightsObject, 0xdfdfdf); scene.add(lightHelper); var mesh
= new THREE.Mesh(new THREE.PlaneBufferGeometry(200, 200), new
THREE.MeshPhongMaterial({ color: 0x9cfcf99, depthWrite: false }));
mesh.rotation.x = -Math.PI / 2; mesh.position.set(0, -20, 0) mesh.receiveShadow
= true; scene.add(mesh); } function loadModel() { //模型 var triangles =
160000;//三角形数量 var geometry = new THREE.BufferGeometry(); var positions = [];
var normals = []; var colors = []; var color = new THREE.Color(); var n = 400,
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 <
triangles; i++) { // 位置 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.push(ax,
ay, az); positions.push(bx, by, bz); positions.push(cx, cy, 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();//标准化 var nx = cb.x;
var ny = cb.y; var nz = cb.z; normals.push(nx, ny, nz); normals.push(nx, ny,
nz); normals.push(nx, ny, nz); // colors var vx = (x / n) + 0.5; var vy = (y /
n) + 0.5; var vz = (z / n) + 0.5; color.setRGB(vx, vy, vz);
colors.push(color.r, color.g, color.b); colors.push(color.r, color.g, color.b);
colors.push(color.r, color.g, color.b); } function disposeArray() {//释放缓存
this.array = null; } // addAttribute ( name : String, attribute :
BufferAttribute ) // .onUpload ( callback : Function )一个回调函数
geometry.addAttribute('position', new THREE.Float32BufferAttribute(positions,
3).onUpload(disposeArray)); geometry.addAttribute('normal', new
THREE.Float32BufferAttribute(normals, 3).onUpload(disposeArray));
geometry.addAttribute('color', new THREE.Float32BufferAttribute(colors,
3).onUpload(disposeArray)); geometry.computeBoundingSphere(); var material =
new THREE.MeshPhongMaterial({ color: 0xaaaaaa, specular: 0xffffff, shininess:
250, side: THREE.DoubleSide, vertexColors: THREE.VertexColors }); mesh = new
THREE.Mesh(geometry, material); scene.add(mesh); } function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth,
window.innerHeight); } function rendererScene() { renderer = new
THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true; renderer.shadowMap.type =
THREE.PCFSoftShadowMap; renderer.gammaInput = true; renderer.gammaOutput =
true; container.appendChild(renderer.domElement); } function
OrbitControls(camera, renderer) { //OrbitControls控件操作模块 controls = new
THREE.OrbitControls(camera, renderer.domElement); controls.target = target;
//控制的target controls.autoRotate = true; //是否自动旋转 controls.autoRotateSpeed =
0.5; //自动旋转速度，正比 } function animate() { requestAnimationFrame(animate); if
(controls) controls.update(); renderer.render(scene, camera); }; </script>
</body> </html>

热门工具换一换