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
var position, newPos;
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(5,2,5)
var renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.rotateSpeed *= -0.35;
controls.enableDamping = true;
controls.dampingFactor = 1;
controls.panSpeed=0.1;
updateCameraOrbit();
var light = new THREE.DirectionalLight(0xffffff);
light.position.setScalar(10);
scene.add(light);
scene.add(new THREE.AmbientLight(0x404040));
var wallMaterial = new THREE.MeshLambertMaterial({
color: "gray",
wireframe: false
});
var building = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), wallMaterial);
scene.add(building);
building.scale.set(10,0.3,10);
//
window.addEventListener("mousedown", onMouseDown, false);
function onMouseDown(event) {
var selectedObject;
var mouse = new THREE.Vector2();
var raycaster = new THREE.Raycaster();
mouse.set((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1);
raycaster.setFromCamera(mouse, camera);
intersects = raycaster.intersectObjects([building],true);
if (intersects.length > 0) {
for ( var i = 0; i < intersects.length; i++ ) {
selectedObject=intersects[i];
newPos = selectedObject.object.position.clone();
newPos.y = camera.position.y;
const point = intersects[0].point
building.updateMatrixWorld();
position = building.worldToLocal(point);
gsap.to(camera.position, {
duration: 2,
x: position.x*10,
y: newPos.y,
z: position.z*10,
onUpdate: function() {
controls.enabled = false;
},
onComplete: function() {
...