Drag and drop ,zoom-in and zoom-out in orbitControl

Questions
1

Hi

I had OrbitControl like this:

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
2

and

const controls = new OrbitControls(camera, canvas);```
3

in the course is enough to have the drag and drop with zoom but in my case
nothing happen

4

my code:

import * as THREE from "three"
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

console.log( OrbitControls)

 const canvas=document.querySelector('.webgl')

 const scene=new THREE.Scene()

 const geometry=new THREE.BoxGeometry(1,1,1)
 const material=new THREE.MeshBasicMaterial( {color:"blue",wireframe:true} )

 const mesh=new THREE.Mesh(geometry, material)
 scene.add(mesh)

 

 const sizes={
     width:800,
     height:600
 }

 //const aspectRatio=sizes.width/ sizes.height
const camera=new THREE.PerspectiveCamera(75,sizes.width /sizes.height,0.1, 10000)

//const camera=new THREE.OrthographicCamera(-1 * aspectRatio,1 * aspectRatio,1,-1 ,0.1,10000)
scene.add(camera)
camera.position.z=2



//Heure
const clock=new THREE.Clock()

 const renderer=new THREE.WebGLRenderer({
     canvas
 })

 const controls = new OrbitControls(camera, canvas);```
5

can I have some idea ?

6

OrbitControls not enought.
Demo: three.js examples
Source: three.js/examples/misc_controls_drag.html at 0ea870f6d70be2886fa035d204404b5448f3c6a6 · mrdoob/three.js · GitHub

7

thanks for your message by comments those line the zoom is working

comments
comments596×309 58.5 KB

8

drag and drop also is working with right click

9

Also can be used TransformControls.js: three.js examples

1 Like