Three -- orbitcontrols track controller

Constructors

OrbitControls( object : Camera, domElement : HTMLDOMElement )
object: （ must ） The camera to be controlled . The camera is not allowed to be a child of any other object , Unless the object is the scene itself .
domElement: For event listening HTML Elements .

Sample code

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );

const controls = new OrbitControls( camera, renderer.domElement );

//controls.update() must be called after any manual changes to the camera's transform
camera.position.set( 0, 20, 100 );
controls.update();

function animate() {

	requestAnimationFrame( animate );

	// required if controls.enableDamping or controls.autoRotate are set to true
	controls.update();

	renderer.render( scene, camera );

}

Modular references

export

stay node_modules\three\examples\js\controls\OrbitControls.js Add... At the top import * as THREE from ‘three’

import * as THREE from 'three'

Import

Introduce

import 'three/examples/js/controls/OrbitControls'

Usage mode

Mode one

In the rendering function, as in the previous code block animate In the method , Use controls.update()

Mode two

Use event monitoring , Callback function rendering ：controls.addEventListener(‘change’, animate)