JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>
JavaScript
const scene = new THREE.Scene();
const scene1 = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
camera.position.z = 3;
const light = new THREE.AmbientLight(0x404040, 5);
scene.add(light);
const geometry = new THREE.BoxGeometry(1, 1, 0.1);
const material = new THREE.MeshBasicMaterial({ color: 0xff0 });
const cube = new THREE.Mesh(geometry, material);
cube.position.set(-0.5, 0, 0);
scene.add(cube);
const geometry1 = new THREE.BoxGeometry(1, 1, 0.1);
const material1 = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const cube1 = new THREE.Mesh(geometry1, material1);
cube1.position.set(0.5, 0, 0);
scene.add(cube1);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
var pivot = new THREE.Group();
scene.add(pivot);
pivot.add(cube);
var pivot1 = new THREE.Group();
scene.add(pivot1);
pivot1.add(cube1);
renderer.autoClear = false;
window.addEventListener("mousedown", onMouseDown, false);
var clickCounter = 0;
function onMouseDown(event) {
if (event.isPrimary === false) return;
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObjects([cube, cube1], true);
if (intersects.length > 0) {
clickCounter++;
if (clickCounter % 2 == 1) {
gsap.to(pivot.rotation, {
duration: 1.5,
y: "-=1.570795",
});
gsap.to(pivot1.rotation, {
duration: 1.5,
y: "+=1.570795",
});
} else {
gsap.to(pivot.rotation, {
duration: 1.5,
y: "+=1.570795",
});
gsap.to(pivot1.rotation, {
duration: 1.5,
y: "-=1.570795",
...