【ThreeJS基础教程-高级几何体篇】2.6.1 BufferGeometry应用1-物体居中与包围盒的应用

最新推荐文章于 2024-04-29 10:08:35 发布

幻梦丶海炎

最新推荐文章于 2024-04-29 10:08:35 发布

阅读量865

点赞数 4

分类专栏： Threejs基础教程文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_42760477/article/details/127872741

版权

Threejs基础教程专栏收录该内容

29 篇文章 6 订阅

订阅专栏

BufferGeometry应用1-物体居中与包围盒的应用

学习ThreeJS的捷径
问题案例：为什么会围绕Y轴旋转
- 问题代码
- 案例效果
模型中心的概念
包围盒简介
修正Mesh中心到包围盒中心
关于模型中心的一些碎碎念
下一篇预告

学习ThreeJS的捷径

本段内容会写在0篇以外所有的，本人所编写的Threejs教程中

对，学习ThreeJS有捷径
当你有哪个函数不懂的时候，第一时间去翻一翻文档
当你有哪个效果不会做的时候，第一时间去翻一翻所有的案例，也许就能找到你想要的效果
最重要的一点，就是，绝对不要怕问问题，越怕找找别人问题，你的问题就会被拖的越久

如果你确定要走WebGL/ThreeJS的开发者路线的话，以下行为可以让你更快的学习ThreeJS

没事就把所有的文档翻一遍，哪怕看不懂，也要留个印象，至少要知道Threejs有什么
没事多看看案例效果，当你记忆的案例效果足够多时，下次再遇到相似问题时，你就有可能第一时间来找对应的案例，能更快解决你自己的问题
上述案例不只是官网的案例，郭隆邦技术博客，跃焱邵隼，暮志未晚等站点均有不少优质案例，记得一并收藏
http://www.yanhuangxueyuan.com/ 郭隆邦技术博客
https://www.wellyyss.cn/ 跃焱邵隼
http://www.wjceo.com/ 暮志未晚
这三个站点是我最常逛的站点，推荐各位有事没事逛一下，看看他们的案例和写法思路，绝对没坏处

问题案例：为什么会围绕Y轴旋转

上一篇中我们创造了自定义的BufferGeometry，然后接下来，我希望让它自转起来，于是，我写了这样的代码

问题代码

	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas{
            display: block;
        }
        body {
            margin: 0;
            overscroll-behavior: none;
        }
        #btns{
            position: absolute;
            top:10%;
            width: 500px;
            height: 100px;
            left: 50%;
            transform:translateX(-50%);
        }
    </style>
</head>
<body>
<div id="btns"></div>

<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>

<script type="importmap">
			{
				"imports": {
					"three": "../../three.js-master/build/three.module.js"
				}
			}
		</script>
<script type="module">
    import * as THREE from '../../three.js-master/build/three.module.js';
    import {OrbitControls} from "../../three.js-master/examples/jsm/controls/OrbitControls.js";

    let scene,renderer,camera,orbitControls;

    let mesh;

    function init(){
        scene = new THREE.Scene();
        renderer = new THREE.WebGLRenderer({
            alpha:true,
            antialias:true
        });
        renderer.setSize(window.innerWidth,window.innerHeight);
        document.body.appendChild(renderer.domElement);
        camera = new THREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,1,1000);
        camera.position.set(10,10,10);
        orbitControls = new OrbitControls(camera,renderer.domElement);
        let light = new THREE.PointLight();
        camera.add(light);
        scene.add(camera);

        let helper = new THREE.AxesHelper(5);
        scene.add(helper);

    }
    function addMesh(){
        const geometry = new THREE.BufferGeometry();
        const vertices = new Float32Array( [
            -1.0, -1.0,  1.0,
            1.0, -1.0,  1.0,
            1.0,  1.0,  1.0,

            1.0,  1.0,  1.0,
            -1.0,  1.0,  1.0,
            -1.0, -1.0,  1.0
        ] );

        geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );

        geometry.computeVertexNormals();

        let material = new THREE.MeshStandardMaterial({
            color:"#ff0000",
            side:THREE.DoubleSide
        });
        mesh = new THREE.Mesh(geometry,material);
        scene.add(mesh);
    }
    function render(){
        renderer.render(scene,camera);
        requestAnimationFrame(render);
        mesh.rotation.y += 0.01;
    }
    init();
    addMesh();
    render();
</script>
</body>
</html>

案例效果

在这里插入图片描述

这里就涉及到一个概念，叫模型中心

模型中心的概念

模型中心是一个Vector3，这个中心，并不是说我们视觉上看到的最中心，有可能是任何的位置，这个中心直接影响的，就是我们的旋转和缩放，对平移移动较小

举个例子
在这里插入图片描述

当我们的中心在这里的时候，物体就会围绕中心，做圆周运动，而不是自转

当我们的中心在这里的时候，物体的缩放也会直接影响物体的位置，缩放值越高，距离中心会越远

当我们的中心在图形中心时，图形才会自转

当我们的中心在图形中心时，图形缩放时，才会均匀缩放

暮佬的这个案例可以让你亲自体验一下模型中心偏移带来的后果

108 THREE.JS 使用矩阵对3D对象进行位置设置

所以，一般来说，我们在和建模师做交流的时候，一定要要求建模师，把模型的中心点，放到模型的包围盒中心，这样才能保证我们在操作模型的时候，不会出现问题

包围盒简介

这里的介绍为本人理解
包围盒会取所有你构成图形顶点的x,y,z的最大最小值，构成一个box，这个box可以完美装下你的模型，这个就是包围盒

一般来说，包围盒中心，是常规模型的中心，把模型的中心设置到包围盒中心时，我们在操作模型的时候，就很少能遇到问题

包围盒Box3官方文档
官方也提供了Box2的包围盒，但是笔者从来没用过，所以这里不做讨论
当然，官方也提供了可以显示包围盒的辅助对象
包围盒的辅助对象官方文档

修正Mesh中心到包围盒中心

修正原理很简单，就是把几何体的整体数据与包围盒的中心做一个减法，让模型直接移动到中心

	mesh.geometry.center();
	//或者在创建geometry时,直接将geometry移动到中心
	geometry.center();

但是，我们发现，我们的模型虽然是修正了中心，但是位置也跟着变了，怎么办

首先我们先记录一下原模型的中心，然后再执行.center()将模型移回标准中心

	    let center = geometry.boundingBox.getCenter(new THREE.Vector3());

        geometry.center();

接下来用mesh来移动到这个中心

	 mesh.position.copy(center);

这样，我们就可以看到以自身为中心旋转的图形了

在这里插入图片描述

关于模型中心的一些碎碎念

有时候，建模软件导出来的模型，你使用上面的方法居中，也未必能成功，笔者曾在居中问题上栽了无数的坑，且模型基本上都是FBX格式，也基本上都是从网上下载的未知版本的FBX格式文件。。。最终，笔者也没能彻底解决模型不能居中的问题

但是，有一种方法是绝对能解决这个问题的，就是在建模师手中，建模师在导出模型前，一定要有一个好习惯，就是把模型的中心轴放到包围盒中心，就可以最大程度的避免程序来处理这个问题

下一篇预告

BufferGeometry的实际应用2