three.js当物体移动位置后 更新场景Scene的中心位置

原来的位置：

老代码：

<script setup>
 
// 导入 threejs
import * as THREE from "three";
// 导入轨道控制器
import { OrbitControls} from  "three/examples/jsm/controls/OrbitControls.js"
 
// 创建场景
const scene = new THREE.Scene();
//创建相机
const camera = new THREE.PerspectiveCamera(
    45,//视角
    window.innerWidth / window.innerHeight,
    0.1,//近平面
    1000 //远平面
)
 
//创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
//创建几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);
// 创建材质
const parent_material = new THREE.MeshBasicMaterial({ color: 0xff0000 });//红色几何体
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });//绿色几何体
 
// 创建网格
const cube = new THREE.Mesh(geometry, parent_material);

 
cube.position.x = -3;

 
// 将网格添加到场景中
scene.add(cube)
 
// 设置相机位置
camera.position.z = 5;
camera.position.x = 2;
camera.position.y = 2;
camera.lookAt(0, 0, 0)


 
// 添加坐标辅助器
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );
 
// 轨道控制器
const controls = new OrbitControls( camera, renderer.domElement );
controls.update();
 
renderer.render(scene, camera);
 
 
 
// 渲染函数
function animate() { 
    requestAnimationFrame(animate);
    controls.update();
    // 渲染
    renderer.render(scene, camera);
}
animate();
</script>
 
<template>
  <div>
   
  </div>
  
</template>
 
<style >
*{
  margin:0;
  padding:0
}
 
canvas{
  display: block;
  position: fixed;
  left:0;
  top:0;
  width:100vw;
  height:100vh;
}
</style>

方法一：增加一个group （缺点：如果有底图的地图，会发现没有更新实际的位置）

围绕正方形可以旋转浏览：

源码：

<script setup>

// 导入 threejs
import * as THREE from "three";
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"

// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(
    45, // 视角
    window.innerWidth / window.innerHeight,
    0.1, // 近平面
    1000 // 远平面
);

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);
// 创建材质
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 }); // 红色几何体

// 创建网格
const cube = new THREE.Mesh(geometry, material);
cube.position.x = -3; // 移动 cube 的位置

// 创建组
const group = new THREE.Group();

// 将 cube 添加到组中
group.add(cube);

// 将坐标辅助器添加到组中
const axesHelper = new THREE.AxesHelper(5);
group.add(axesHelper);

// 将组添加到场景中
scene.add(group);

// 将组进行平移，让 cube 的位置看起来像是新的原点
group.position.x = 3; // 反向移动 group，这样 cube 就会位于新原点

// 设置相机位置
camera.position.z = 5;
camera.position.x = 2;
camera.position.y = 2;
camera.lookAt(0, 0, 0); // 相机始终看向世界坐标系的 (0, 0, 0)

// 轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.update();

renderer.render(scene, camera);

// 渲染函数
function animate() {
    requestAnimationFrame(animate);
    controls.update();

    // 渲染
    renderer.render(scene, camera);
}
animate();
</script>


 
<template>
  <div>
   
  </div>
  
</template>
 
<style >
*{
  margin:0;
  padding:0
}
 
canvas{
  display: block;
  position: fixed;
  left:0;
  top:0;
  width:100vw;
  height:100vh;
}
</style>

方法二： 更改摄像机的位置：

<script setup>

// 导入 threejs
import * as THREE from "three";
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"

// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(
    45, // 视角
    window.innerWidth / window.innerHeight,
    0.1, // 近平面
    1000 // 远平面
);

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);
// 创建材质
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 }); // 红色几何体

// 创建网格
const cube = new THREE.Mesh(geometry, material);
cube.position.x = -3; // 移动 cube 的位置

// 将 cube 添加到场景中
scene.add(cube);

// 添加坐标辅助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper); // 辅助器保持在世界原点，不会跟随 cube 移动

// 设置相机位置
camera.position.set(2, 2, 5);

// 将相机的焦点设置为 cube 的位置
camera.lookAt(cube.position);  // 让相机看向 cube 的新位置

// 轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.target = cube.position;  // 将轨道控制器的焦点设置为 cube 的位置
controls.update();

renderer.render(scene, camera);

// 渲染函数
function animate() {
    requestAnimationFrame(animate);
    controls.update();

    // 渲染
    renderer.render(scene, camera);
}
animate();
</script>



<style >
*{
  margin:0;
  padding:0
}
 
canvas{
  display: block;
  position: fixed;
  left:0;
  top:0;
  width:100vw;
  height:100vh;
}
</style>