Orbitcontrols doesn't work when I use glTF camera

Questions
,
1 
let gltfcamera = gltf.cameras[0]
let threecamera = new THREE.PerspectiveCamera(100 / Math.PI, 2000 / 2000, 0.01, 1000)

this.camera=gltfcamera // OrbitControls doesn't work 
this.camera=threecamera // OrbitControls work 

this.controls = new OrbitControls(this.camera!, this.renderer!.domElement)
//other code ....

I don’t know what is the difference between gltf.cameras[0] and new THREE.PerspectiveCamera。they look exactly the same in canvas, but use gltf.cameras[0]
Orbitcontrols does not respond to mouse drags.

2

That is indeed strange. Do you mind demonstrating the issue with a live example?

3

this is all code in vue

<template>
	<div class="demo">

	</div>
</template>
<script setup>
import {onMounted} from 'vue';
import * as THREE from 'three';
import {sRGBEncoding} from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

var scene,renderer,controls,camera

function init(){
	scene = new THREE.Scene()
	renderer = new THREE.WebGLRenderer({antialias: true,alpha:true})
	renderer.physicallyCorrectLights = true;
	renderer.shadowMap.enabled = true;
	renderer.toneMapping = 1;
	renderer.toneMappingExposure = 1;
	renderer.outputEncoding = sRGBEncoding;
	renderer.setSize(500, 500)
	renderer.setClearColor(0x000000,0)
	renderer.setPixelRatio( window.devicePixelRatio );
	document.querySelector('.demo').appendChild(renderer.domElement)
	loadGltf('https://cfdz-misc.oss-cn-shenzhen.aliyuncs.com/zichao-weapp/san_jie_mo_fang.glb')

}
function loadGltf(url){
	var loader = new GLTFLoader()
	.setCrossOrigin('anonymous')
	loader.load(url,  (gltf)=> {
		console.log(gltf.cameras)

		// Controls in this camera doesn't work
		camera=gltf.cameras[0]

		// Controls in this camera will work
		// camera=new THREE.PerspectiveCamera(100 / Math.PI, 2000 / 2000, 0.01, 1000)
		// camera.position.copy(new THREE.Vector3(0,0,1));
		scene.add(gltf.scene);
		initControls()
		render()
	})
}
function initControls(){
	controls = new OrbitControls(camera,renderer.domElement)
}
function render(){
	let renderFunc=()=>{
		controls.update()
		renderer.render(scene,camera)

		requestAnimationFrame(renderFunc)
	}
	renderFunc()
}
onMounted(()=>{
	init()
})
</script>
<style lang="scss" scoped>

</style>
4

This is not a live example.

The error is unfortunately not visible from your code snippets. It’s necessary to debug the issue.

5

sorry , I don’t know how to create a live example.

6

You can create a GitHub repository with you app and then use https://raw.githack.com/ to create a link to your example.

E.g. example in Error loading .fbx model, you can access the user’s repository GitHub - Malmaars/threejs-doneright via Simon's Portfolio.