有时模型的默认中心并不是几何中心,需要自己调整
// 重置几何中心
mesh1.geometry.computeBoundingBox();
mesh1.geometry.center();
完整代码
createScene(){
const width = window.innerWidth; //窗口文档显示区的宽度作为画布宽度
const height = window.innerHeight; //窗口文档显示区的高度作为画布高度
const camera = new THREE.PerspectiveCamera(50, width / height, 1, 3000);
camera.position.set(150,0,150);
camera.lookAt(0,0,0);
const scene = new THREE.Scene;
// let modelUrl = "http://47.100.63.79:8002/profile/upload/2023/03/30/baiji_20230228162245A005.FBX"
let modelUrl = this.modelUrl;
const manager = new THREE.LoadingManager();
// add handler for TGA textures
manager.addHandler(/\.tga$/i, new TGALoader());
const fbxLoader = new FBXLoader(manager);
let mesh1;
let myReq;
let _this = this
fbxLoader.load(modelUrl,function (fbx) {
console.log('控制台查看加载fbx文件返回的对象结构', fbx)
// console.log('fbx对象场景属性',fbx.scene)\
mesh1 = fbx.children[0].clone();
mesh1.position.set(0,0,0)
// mesh1.translate(0,0,0)
// 重置几何中心
mesh1.geometry.computeBoundingBox();
mesh1.geometry.center();
scene.add(mesh1);
//mesh:模型
const box = new THREE.Box3().setFromObject( mesh1 );
const size = box.size();
console.log("size:", size)
const light = fbx.children[1].clone();
scene.add(light);
// _this.computerCameraPos(camera,mesh1);
// scene.add(fbx.scene)
function render() {
// renderer.render(scene, camera);
mesh1.rotateY(0.01);
myReq = requestAnimationFrame(render);
// console.log("console.log(myReq)",myReq)
}
myReq = requestAnimationFrame(render);
/*停止动画*/
// console.log("myReq",myReq)
// cancelAnimationFrame(myReq);
})
// 渲染器执行render方法的时候会读取相机对象的投影矩阵属性projectionMatrix
// 但是不会每渲染一帧,就通过相机的属性计算投影矩阵(节约计算资源)
// 如果相机的一些属性发生了变化,需要执行updateProjectionMatrix ()方法更新相机的投影矩阵
camera.updateProjectionMatrix();
console.log(camera.position)
// renderer.render(scene,camera);
const axesHelper = new THREE.AxesHelper(200);
scene.add(axesHelper);
const light = new THREE.AmbientLight( 0x404040 ); // soft white light
scene.add( light );
const pointLight = new PointLight(0xffffff,1);
pointLight.position.set(100,100,150)
scene.add(pointLight);
const light2 = new THREE.HemisphereLight( 0xffffbb, 0x080820, 1 );
scene.add( light2 );
/* 点光源辅助 */
const spherSize = 5;
const pointLightHelper = new THREE.PointLightHelper(pointLight, spherSize);
// scene.add(pointLightHelper);
const renderer = new THREE.WebGLRenderer( {
//增加下面两个属性,可以抗锯齿
antialias:true,
alpha:true
});
// 获取当前窗口的像素比 设置像素比
renderer.setPixelRatio( window.devicePixelRatio );
//设置背景颜色
renderer.setClearColor(0xBFBFBF, 1);
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.render(scene,camera);
const orbitControls = new OrbitControls(camera,renderer.domElement);
orbitControls.addEventListener("change", function () {
renderer.render(scene, camera)
// 浏览器控制台查看相机位置变化
// console.log('camera.position', camera.position);
})
orbitControls.minDistance = 50;
orbitControls.maxDistance = 400;
// orbitControls.target.set( 0, 0, 0);
orbitControls.update();
//解决加载gltf格式模型颜色偏差问题
// renderer.outputEncoding = THREE.sRGBEncoding;
// 渲染循环
console.log('mesh1', mesh1);
console.log('scene', scene);
console.log('meshBaiJi', scene.children[6]);
let reqID;
function render() {
renderer.render(scene, camera);
// meshBaiJi.rotateX(0.01);
reqID = requestAnimationFrame(render);
}
reqID = requestAnimationFrame(render);
console.log("reqID",reqID)
// renderer.render(scene,camera);
// document.getElementById('webgl').appendChild(renderer.domElement);
this.$refs.three_canvas.appendChild(renderer.domElement);
},
// 计算摄像机位置
computerCameraPos(camera, mod) {
var boxHelper = new THREE.BoxHelper();
boxHelper.setFromObject(mod);
var center = boxHelper.geometry.boundingSphere.center;
var radius = boxHelper.geometry.boundingSphere.radius;
var cameraPos = new THREE.Vector3(
center.x + mod.position.x,
center.y + mod.position.y,
radius * 1.2 + center.z + mod.position.z
// radius * 1.2 + center.z + mod.position.z
);
// threeScene.minCameraZ = cameraPos.z - 100;
// threeScene.maxCameraZ = cameraPos.z + 100;
camera.position.copy(cameraPos);
let lookPos = new THREE.Vector3(
center.x + mod.position.x,
center.y + mod.position.y,
center.z + mod.position.z
);
return lookPos;
}
}
group 居中
给这个group设置一个包围盒
让包围盒居中,然后设置group平移到与包围盒的位置相等
包围盒设置.getCenter()就可以居中
拿到包围盒的中心点坐标后,调用.distance()方法就得到两点直接的距离,根据距离平移group的xyz就可以实现居中了
group.translate -x -y -z
const box = new Box3().setFromObject(model);
const size = box.getSize(new Vector3());
const center = box.getCenter(new Vector3());
// 计算缩放比例
const maxSize = Math.max(size.x, size.y, size.z);
const targetSize = 75; // 目标大小
const scale = targetSize / (maxSize > 1 ? maxSize : 0.5);
model.scale.set(scale, scale, scale);
// 设置模型位置
// model.position.sub(center.multiplyScalar(scale));
// 设置控制器最小缩放值
controls.maxDistance = size.length() * 10;
// 设置相机位置
camera.position.set(150, 0, 150);
// 设置相机坐标系
camera.lookAt(center);
camera.updateProjectionMatrix();