three.js轨道控制器OrbitControls.js

最新推荐文章于 2024-03-05 10:20:07 发布

置顶 coder_路远

最新推荐文章于 2024-03-05 10:20:07 发布

阅读量4w

点赞数 18

分类专栏： Three.js入门 Three.js开发文章标签： OrbitControls.js控件轨道控制器

本文链接：https://blog.csdn.net/qq_37338983/article/details/78575333

版权

Three.js开发同时被 2 个专栏收录

17 篇文章 13 订阅

订阅专栏

Three.js入门

14 篇文章 13 订阅

订阅专栏

学习交流欢迎加群：789723098，博主会将一些demo整理共享

轨道控制器OrbitControls.js是一个相当神奇的控件，用它可以实现场景用鼠标交互，让场景动起来，控制场景的旋转、平移，缩放，下面介绍轨道控制器的代码实现方式：

//添加轨道控制器
//新建一个轨道控制器
orbitControls = new THREE.OrbitControls(camera, renderer.domElement);
orbitControls.target = new THREE.Vector3(0, 0, 0);//控制焦点
orbitControls.autoRotate = false;//将自动旋转关闭
clock = new THREE.Clock();//用于更新轨道控制器

新建一个轨道控制器后，就要让它实时工作和更新，一般写在渲染和动画的函数里面：

elta = clock.getDelta();//获取时间差
orbitControls.update(delta);//更新时间

实际上轨道控制器还有很多属性可以设置，但在本例中没有应用到，详细的用法可参考官方文档：点击打开链接。

操控	效果
按住鼠标左键并移动	摄像机围绕场景中心旋转
转动鼠标滑轮或按住中键并移动	放大和缩小
按住鼠标右键并移动	在场景中平移
上、下、左、右方向键	在场景中平移

下面结合实际例子，实现一个场景的轨道控制。（这个例子的静态版本在我的另一篇文章：点击打开链接），加了轨道控制器后，其效果如下图所示：

下面是示例程序代码的呈现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>threejs-basic-geometry</title>
    <style>
        body{
            font-family: Monospace;
            background: #f0f0f0;
            margin: 0px;
            overflow: hidden;
        }
    </style>
</head>
<body>
<script type="text/javascript" src="build/three.js"></script>
<script type="text/javascript" src="js/Detector.js"></script>
<script type="text/javascript" src="js/controls/OrbitControls.js"></script>
<script type="text/javascript">

    //检测webgl的支持情况
    if(!Detector.webgl) {Detector.addGetWebGLMessage();}

    var container;
    var camera, scene, renderer;
    //用于轨道控制器
    var orbitControls, clock, delta;
    main();
    render();

    //主函数
    function main(){
        //添加一个div元素
        container = document.createElement('div')
        document.body.appendChild(container);
        scene = new THREE.Scene();//创建一个新场景
        //添加一个透视相机
        camera = new THREE.PerspectiveCamera(30,
                      window.innerWidth/window.innerHeight, 1, 1000);
        camera.position.set(100, 300, 100);//设置相机位置
        camera.lookAt(new THREE.Vector3(0,0,0));//让相机指向原点
        //渲染
        //antialias:true增加抗锯齿效果
        renderer = new THREE.WebGLRenderer({antialias:true});
        renderer.setClearColor(new THREE.Color(0x000000));//设置窗口背景颜色为黑
        renderer.setSize(window.innerWidth, window.innerHeight);//设置窗口尺寸
        //将renderer关联到container，这个过程类似于获取canvas元素
        container.appendChild(renderer.domElement);
        //添加轨道控制器
        //新建一个轨道控制器
        orbitControls = new THREE.OrbitControls(camera, renderer.domElement);
        orbitControls.target = new THREE.Vector3(0, 0, 0);//控制焦点
        orbitControls.autoRotate = false;//将自动旋转关闭
        clock = new THREE.Clock();//用于更新轨道控制器
        //给场景添加光源
        //自然光
        var ambientLight = new THREE.AmbientLight( 0x606060 );
        scene.add( ambientLight );
        //平行光源
        var directionalLight = new THREE.DirectionalLight( 0xffffff );
        directionalLight.position.set( 1, 0.75, 0.5 ).normalize();
        scene.add( directionalLight );
        plane();
        cube();
        sphere();
        cylinder();
    }
    //创建一个平面
    function plane(){
        var planeGeo = new THREE.PlaneGeometry(100,100,10,10);//创建平面
        var planeMat = new THREE.MeshLambertMaterial({  //创建材料
            color:0x666666,
            wireframe:false
        });
        var planeMesh = new THREE.Mesh(planeGeo, planeMat);//创建网格模型
        planeMesh.position.set(0, 0, -20);//设置平面的坐标
        planeMesh.rotation.x = -0.5 * Math.PI;//将平面绕X轴逆时针旋转90度
        scene.add(planeMesh);//将平面添加到场景中
    }

    //创建一个立方体
    function cube(){
        var cubeGeo = new THREE.CubeGeometry(20, 20, 20, 5, 5, 5);//创建立方体
        var cubeMat = new THREE.MeshLambertMaterial({//创建材料
            color:0x003300,
            wireframe:false
        });
        var cubeMesh = new THREE.Mesh(cubeGeo, cubeMat);//创建立方体网格模型
        cubeMesh.position.set(20, 10, 0);//设置立方体的坐标
        scene.add(cubeMesh);//将立方体添加到场景中
    }

    //创建一个球
    function sphere(){
        var sphereGeo = new THREE.SphereGeometry(16, 40, 40);//创建球体
        var sphereMat = new THREE.MeshLambertMaterial({//创建材料
            color:0x0000FF,
            wireframe:false
        });
        var sphereMesh = new THREE.Mesh(sphereGeo, sphereMat);//创建球体网格模型
        sphereMesh.position.set(-25, 16, 0);//设置球的坐标
        scene.add(sphereMesh);//将球体添加到场景
    }
    //创建圆柱体
    function cylinder(){
        //创建圆柱体
        var cylinderGeo = new THREE.CylinderGeometry(15, 15 ,40 ,40 ,40);
        var cylinderMat = new THREE.MeshLambertMaterial({//创建材料
            color:0xFF6600,
            wireframe:false
        });
        //创建圆柱体网格模型
        var cylinderMesh = new THREE.Mesh(cylinderGeo, cylinderMat);
        cylinderMesh.position.set(0, 20, -40);//设置圆柱坐标
        scene.add(cylinderMesh);//向场景添加圆柱体
    }
    //渲染
    function render(){
        delta = clock.getDelta();
        orbitControls.update(delta);
        requestAnimationFrame(render);
        renderer.render(scene, camera);
    }

</script>

</body>
</html>

coder_路远

关注

18
点赞
踩
53

收藏

觉得还不错? 一键收藏
14
评论
three.js轨道控制器OrbitControls.js

学习交流欢迎加群：789723098，博主会将一些demo整理共享轨道控制器OrbitControls.js是一个相当神奇的控件，用它可以实现场景用鼠标交互，让场景动起来，控制场景的旋转、平移，缩放，下面介绍轨道控制器的代码实现方式：//添加轨道控制器//新建一个轨道控制器orbitControls = new THREE.OrbitControls(camera, rende...
复制链接

扫一扫