Drag and drop et le Zoom qui ne marche avec OrbitControls

Bonsoir

Je viens d 'aborder la notion de OrbitControls sur ThreeJS

mon code

Code:

1
2
3
4
5
6
7
 
import * as THREE from "three"
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 
 
 const controls = new OrbitControls(camera, canvas);

dans mon cours le drag and drop puis le zoom marchent

mais dans mon cas rien ne se passe

je poste l'intégralité de mon code ici

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
 
 
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);
 
 
 //cursor
 
 const cursor={
     x:0,
     y:0
 
 }
 
   window.addEventListener("mousemove" ,(event)=>{
       cursor.x=event.clientX / sizes.width - 0.5
       cursor.y= -(event.clientY / sizes.height - 0.5) 
 
   })
 
 console.log(cursor)
 
const cx=()=>{
    const elapsedTime=clock.getElapsedTime()
    camera.position.x =Math.sin(cursor.x * Math.PI * 2) * 3
    camera.position.z=Math.cos(cursor.x * Math.PI * 2) * 3
    camera.position.y= cursor.y * 3
    camera.lookAt(new THREE.Vector3())
 
    renderer.render(scene, camera)
    window.requestAnimationFrame(cx)
}
cx()
 
 renderer.setSize(sizes.width, sizes.height)

Puis je avoir des explications svp ?

en commentant les lignes dans la fonction j'obtiens le résultat escompté

\ô/
:koi:

Citation:

en commentant les lignes

... mais de quelles lignes parles-tu ??

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
const cx=()=>{
   // const elapsedTime=clock.getElapsedTime()
   // camera.position.x =Math.sin(cursor.x * Math.PI * 2) * 3
    //camera.position.z=Math.cos(cursor.x * Math.PI * 2) * 3
   // camera.position.y= cursor.y * 3
   // camera.lookAt(new THREE.Vector3())
 
    renderer.render(scene, camera)
    window.requestAnimationFrame(cx)
}
cx()