当前位置：网站首页>Three. JS introductory learning notes 08:orbitcontrols JS plug-in - mouse control model rotation, zoom in, zoom out, translation, etc

Three. JS introductory learning notes 08:orbitcontrols JS plug-in - mouse control model rotation, zoom in, zoom out, translation, etc

2022-07-07 15:48:00 【Jiang Duoduo_ Mostly Harmless 】

Learning reference
https://blog.csdn.net/qq_30100043/article/details/79606355

One . introduce

1. introduce OrbitControls.js file , stay three.js Found in the official download package
Insert picture description here

<script type="text/javascript" src="js/OrbitControls.js"></script>

Two . add to

 // User interaction plug-ins   Press and hold the left mouse button to rotate , Right click and hold the pan , Scroll wheel zoom 
    var controls = new THREE.OrbitControls( camera, renderer.domElement );
        //  If you use animate When the method is used , Delete this function 
        //controls.addEventListener( 'change', render );
        //  Make the animation rotate or damp when cycling   Does the meaning have inertia 
        controls.enableDamping = true;
        // Dynamic damping coefficient   It's the mouse drag rotation sensitivity 
        //controls.dampingFactor = 0.25;
        // Can I zoom 
        controls.enableZoom = true;
        // Whether to rotate automatically 
        controls.autoRotate = true;
        // Set the maximum distance from the camera to the origin 
        controls.minDistance  = 1;
        // Set the maximum distance from the camera to the origin 
        controls.maxDistance  = 200;
        // Whether to turn on right-click drag and drop 
        controls.enablePan = true;

3、 ... and . effect

Insert picture description here

Four . Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3d_camera0313</title>
<script type="text/javascript" src="js/three.js"></script>
<script type="text/javascript" src="js/OrbitControls.js"></script>
<script type="text/javascript" src="js/stats.min.js"></script>
<script type="text/javascript" src="js/dat.gui.min.js"></script>
<script type="text/javascript" src="js/AxesHelper.js"></script>
<style>
* {
    
    margin: 0;
    padding: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
//renderer
    var renderer = new THREE.WebGLRenderer({
    antialias:true});
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setClearColor(0xd2d2d2,1.0);
        document.getElementsByTagName("body")[0].appendChild(renderer.domElement);
    
//scene 
    var scene = new THREE.Scene();
    
//camera
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
        camera.position.set(0, 4, 5);
        camera.lookAt(new THREE.Vector3(0,0,0));

//light
    var light = new THREE.PointLight(0xffffff);
        scene.add(new THREE.AmbientLight(0x444444));// The ambient light 
        light.position.set(0,10,10);
        scene.add(light);
        
//tool
     var helper = new THREE.AxesHelper(50);// Shaft assist , The parameter is axis size 
         scene.add(helper);

//model
     var loader = new THREE.ObjectLoader();
         loader.load("json/test0313.json",function (obj) {
    
         scene.add(obj);
        });

 //stats
    var stats = new Stats();
    	stats.domElement.style.position = 'absolute';
    	stats.domElement.style.right = '0px';
    	stats.domElement.style.top = '0px';
    	document.body.appendChild(stats.domElement);
    //document.getElementsByTagName("body")[0].appendChild(stats.domElement);// Both writing methods can be 


//OrbitControls  Press and hold the left mouse button to rotate , Right click and hold the pan , Scroll wheel zoom 
    var controls = new THREE.OrbitControls( camera, renderer.domElement );

        //  If you use animate When the method is used , Delete this function 
        //controls.addEventListener( 'change', render );
        //  Make the animation rotate or damp when cycling   Does the meaning have inertia 
        controls.enableDamping = true;
        // Dynamic damping coefficient   It's the mouse drag rotation sensitivity 
        //controls.dampingFactor = 0.25;
        // Can I zoom 
        controls.enableZoom = true;
        // Whether to rotate automatically 
        controls.autoRotate = true;
        // Set the maximum distance from the camera to the origin 
        controls.minDistance  = 1;
        // Set the maximum distance from the camera to the origin 
        controls.maxDistance  = 200;
        // Whether to turn on right-click drag and drop 
        controls.enablePan = true;
 
 //render
   id = setInterval(draw, 20);    
        function draw() {
    
        stats.begin();
        renderer.render(scene, camera); 
        stats.end();
        }
</script>
</body>
</html>