Presently, there are two blocks visible within the space:
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);
The initial cube (green) is situated at the center position of the screen, with the second cube (yellow) offset by -3 along the X-axis.
To witness the yellow cube rotating around the green cube, click and drag the left mouse button. This showcases the OrbitControls feature in action.
The current desired action involves rotating the green cube around the yellow cube. In order to achieve this, I tried utilizing the statement: control.target=cube2.position; While this does meet the requirements, it inadvertently pulls the yellow cube back to the original position.
Needless to say, this outcome is not the intended effect. Could someone kindly advise me on how to rectify this issue?
Thank you in advance!
https://i.sstatic.net/Gc50Y.png
<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";
// Orbit Controller
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
const container = ref(null);
// Scene, Camera, Renderer, Orbit Controller, and Models
let scene, camera, renderer, control, cube1, cube2;
let axesHelper1, axesHelper2, gridHelper;
onMounted(() => {
init();
animate();
// Listen for window resizing
window.addEventListener("resize", () => {
// Modify renderer aspect ratio
renderer.setSize(window.innerWidth, window.innerHeight);
// Update camera aspect ratio
camera.aspect = window.innerWidth / window.innerHeight;
// Update camera projection matrix
camera.updateProjectionMatrix();
});
});
// Scene setup
function initScene() {
scene = new THREE.Scene();
}
// Camera setup
function initCamera() {
camera = new THREE.PerspectiveCamera(
30,
window.innerWidth / window.innerHeight,
1,
5000,
);
camera.position.z = 20;
scene.add(camera);
}
// Orbit Controller setup
function initControl() {
control = new OrbitControls(camera, renderer.domElement);
// Set damping
control.enableDamping = true;
control.dampingFactor = 0.05;
}
// Renderer setup
function initRenderer() {
// Create renderer with antialiasing
renderer = new THREE.WebGLRenderer({ antialias: true });
// Set size
renderer.setSize(window.innerWidth, window.innerHeight);
// Set pixel ratio
renderer.setPixelRatio(window.devicePixelRatio);
container.value.appendChild(renderer.domElement);
}
// Model setup
function initModel() {
const geometry = new THREE.BoxGeometry(1, 1, 1);
// Initial cube
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);
// Second cube
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);
// Grid helper
gridHelper = new THREE.GridHelper(10, 10);
scene.add(gridHelper);
}
function init() {
// Scene
initScene();
// Camera
initCamera();
// Renderer
initRenderer();
// Orbit Controller
initControl();
// Models
initModel();
}
function animate() {
requestAnimationFrame(() => {
animate();
});
control.update();
// Render scene
renderer.render(scene, camera);
}
</script>
<style scoped></style>