There are two cubes in the scene:
const material1 = new THREE.MeshBasicMaterial({color: ‘#00ff00’});
const cube1 = new THREE.Mesh(geometry, material1);
cube1.position.set(0, 0, 0);
const material2 = new THREE.MeshBasicMaterial({color: ‘#ffff00’});
const cube2 = new THREE.Mesh(geometry, material1);
cube1.position.set(-3, 0, 0);
Cube1 (green) is at the origin (center position of the screen), and cube2 (yellow) is offset by -3 along the X-axis.
Press the left mouse button and drag to see cube2 (yellow) rotating around cube1 (green). This is the track OrbitControls working.
My current requirement is to rotate cube1 (green) around cube2 (yellow).
I used the following statement: control. target=cube2. position; It meets the requirements, but it pulls cube2 (yellow) back to the origin.
This is not what I expected.May I ask how I can solve it?
Thank you!
<template>
<div ref="container" style="width: 100%; height: 100%"></div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import * as THREE from "three";
// 轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
const container = ref(null);
// 场景 相机 渲染 轨道控制器 模型
let scene, camera, renderer, control, cube1, cube2;
let axesHelper1, axesHelper2, gridHelper;
onMounted(() => {
init();
animate();
// 监听窗口变化
window.addEventListener("resize", () => {
// 重置渲染器宽高比
renderer.setSize(window.innerWidth, window.innerHeight);
// 重置相机宽高比
camera.aspect = window.innerWidth / window.innerHeight;
// 更新相机投影矩阵
camera.updateProjectionMatrix();
});
});
// 场景
function initScene() {
scene = new THREE.Scene();
}
// 相机
function initCamera() {
camera = new THREE.PerspectiveCamera(
30,
window.innerWidth / window.innerHeight,
1,
5000,
);
camera.position.z = 20;
scene.add(camera);
}
// 轨道控制器
function initControl() {
control = new OrbitControls(camera, renderer.domElement);
// 设置阻尼
control.enableDamping = true;
control.dampingFactor = 0.05;
}
// 渲染
function initRenderer() {
// 创建渲染器 antialias 抗锯齿
renderer = new THREE.WebGLRenderer({ antialias: true });
// 尺寸
renderer.setSize(window.innerWidth, window.innerHeight);
// 设置像素比
renderer.setPixelRatio(window.devicePixelRatio);
container.value.appendChild(renderer.domElement);
}
// 模型
function initModel() {
const geometry = new THREE.BoxGeometry(1, 1, 1);
// region 原点
const material1 = new THREE.MeshBasicMaterial({ color: "#00ff00" });
cube1 = new THREE.Mesh(geometry, material1);
cube1.position.set(0, 0, 0);
axesHelper1 = new THREE.AxesHelper(2);
cube1.add(axesHelper1);
scene.add(cube1);
// endregion 原点
// region 模型2
const material2 = new THREE.MeshBasicMaterial({ color: "#ffff00" });
cube2 = new THREE.Mesh(geometry, material2);
cube2.position.set(-5, 0, 0);
axesHelper2 = new THREE.AxesHelper(2);
cube2.add(axesHelper2);
scene.add(cube2);
// endregion 模型2
// 网格辅助器
gridHelper = new THREE.GridHelper(10, 10);
scene.add(gridHelper);
}
function init() {
// 场景
initScene();
// 相机
initCamera();
// 渲染器
initRenderer();
// 轨道控制器
initControl();
// 模型
initModel();
}
function animate() {
requestAnimationFrame(() => {
animate();
});
control.update();
// 重新渲染
renderer.render(scene, camera);
}
</script>
<style scoped></style>
