3.1.2 正式代码结构 & ORBIT CONTROLS插件（轨道控制）

说明

本节内容属于插入节，《Three.js入门指南》这本书中，只是简单的介绍了一些概念，是一本基础的入门级别的书。

在实践过程中，在学习过程中，我发现不论是官方，还是大牛的文章，都不是这样去结构话代码的。混乱，不易于管理维护。

所以，为了以后继续学习，以及各种好处，有必要在这里，好好的熟悉一下这种良好的代码结构。

此外，前面的学习，不难发现，我们不能通过鼠标拖动，来更好的观察我们的效果，为了实现这一目的，我们提前学习一下轨道控制。  我们首先以 ORBIT 轨道控制为切入点进行学习。

其他的也都大同小异，学到的时候，就直接能上手了。同时，Three.js提供后给我们了多种不同的轨道控制。 而Orbit是最常用的一种。

预览效果

在正式开始之前，先看一个即将实现的效果。

我们可以使用鼠标对其进行放大缩小，转动，移动。

完整的代码结构

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        html,

        body {

            margin: 0;

            height: 100%;

        }

        canvas {

            display: block;

        }

    </style>

</head>

<body onload="draw();">

</body>

<!-- 引入Three.js -->

<script src="./lib/three.js"></script>

<!-- 引入OrbitControls控制器js库 -->

<script src="./lib/OrbitControls.js"></script>

<script>

    //定义渲染器变量

    var renderer;

    //定义初始化渲染器

    function initRender() {

        renderer = new THREE.WebGLRenderer();

        renderer.setSize(window.innerWidth, window.innerHeight); //设置Canvas画布大小

        document.body.appendChild(renderer.domElement); //将画布渲染器绑定到新增的dom节点上；

    }

    //定义相机

    var camera;

    //初始化相机

    function initCamera() {

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

        camera.position.set(0, 0, 400);

    }

    //定义场景

    var scene;

    //初始化场景

    function initScene() {

        scene = new THREE.Scene();

        //辅助工具

        var helper = new THREE.AxesHelper(900);

        scene.add(helper);

    }

    //定义光源

    var light;

    // //初始化光源

    function initLight() {

        scene.add(new THREE.AmbientLight(0xffffff)); //加入环境光

        // light = new THREE.DirectionalLight(0xffffff); //加入平行光

        // light.position.set(-50, 20, -50); //设置光源位置

        scene.add(light); //光源也需要加入到场景

    }

    //定义模型初始化函数，要点是材质和基础模型

    function initModel() {

        var material = new THREE.MeshLambertMaterial({ //材质

            color: 0xff0000,

            wireframe: true

        });

        //定义基础模型，并贴上上面的定义的材质

        var cube = new THREE.Mesh(new THREE.BoxGeometry(100, 100, 100, 1, 1, 1), material);

        scene.add(cube);

    }

    //定义用于互交的轨道控制器

    var controls; //定义控制器变量

    function initControls() {

        //定义控制器核心

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

        controls.enableDampling = true; //使动画循环使用时阻尼或自转 意思是否有惯性

        controls.enableZoom = false; //是否允许缩放

        controls.enablePan = false; //是否开启鼠标右键拖拽

        controls.autoRotate = true; //是否允许自动旋转

        controls.dampingFactor = 0.25; //动态阻尼系数：就是鼠标拖拽旋转灵敏度

        controls.minDistance = 200; //设置相机距离原点的最近距离；

        controls.maxDistance = 600; //设置相机距离原点的最远距离；

    }

    function animate() {

        //更新控制器

        controls.update();

        render();

        requestAnimationFrame(animate);

    }

    //定义渲染触发函数

    function render() {

        renderer.render(scene, camera);

    }

    //窗口变动触发的函数

    function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;

        camere.updateProjectionMatrix();

        render();

        renderer.setSize(window.innerWidth, window.innerHeight);

    }

    //全部方法入口

    function draw() {

        initRender();

        initScene();

        initCamera();

        initModel();

        initLight();

        initControls();

        animate();

        window.onresize = onWindowResize;

    }

</script>

</html>

　　

不难发现，这种代码结构非常的清晰明了，易于维护和修改。

同时，这里给出了Orbit控制器的定义方式，需要注意的是，我们需要单独引入ORBIT CONTROLS插件（轨道控制）的js库：OrbitControls.js

《Three.js 入门指南》3.1.2 - 一份整齐的代码结构以及使用ORBIT CONTROLS插件（轨道控制）实现模型控制的更多相关文章

  1. d3.js 入门指南 - 仪表盘

    D3的全称是Data-Driven Documents(数据驱动的文档),是一个用来做数据可视化的JavaScript函数库,而JavaScript文件的后缀通常为.js,所以D3被称为D3.js. ...

  2. d3.js 入门指南

    说到数据可视化,我们会行到很多优秀的框架,像echarts.highcharts,这些框架很优雅,健壮,能满足我们对可视化的大部分需求,但是缺点也很明显,就是这些框架几乎是不可定制化的,当遇到特殊的需 ...

  3. 《Three.js 入门指南》3.0 - 代码构建的最基本结构。

    3.0 代码构建的最基本结构 说明: 我们必需首先知道,Three.js 的一些入门级概念: 我们需要知道,OpenGL 是一套三维实现的标准,为什么说是标准,因为它是跨平台,跨语言的.甚至CAD以及 ...

  4. 《Three.js 入门指南》0 - 说明

    本笔记,摘自:<Three.js 入门指南>一书 地址链接为:https://www.ituring.com.cn/book/miniarticle/58552 本书的前言摘录: 本书结构 ...

  5. Vue.js 入门指南之“前传”（含sublime text 3 配置）

    题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指南”的“前传”吧.此文献给跟我一样“白痴 ...

  6. App开发Native.js入门指南

    概述 Native.js技术,简称NJS,是一种将手机操作系统的原生对象转义,映射为JS对象,在JS里编写原生代码的技术.如果说Node.js把js扩展到服务器世界,那么Native.js则把js扩展 ...

  7. Vue.js 入门指南

    1.Vue.js是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注 ...

  8. Node js 入门指南(1)

    目录 Node Js 定义 特点 Node使用方式 Tip: 使用导出文件的注意事项 Node 内置模块 http 模块 定义 使用方法 fs 模块 定义 使用方法 读取文件方式 同步读取 异步读取 ...

  9. Three.js 入门指南(核心对象)

    推荐大家可以看看这个:http://wenku.baidu.com/link?url=RQU2exzV_EF3GATc3bzQU2o9LGMuCmiN5nUJth5SLG3E2TrxtBLQodJU_ ...

随机推荐

  1. docker 升级后启动异常处理

    docker升级后启动时提示如下错误: Unable to create at Docker.Core.Pipe.NamedPipeClient.d__5.MoveNext() --- End of ...

  2. 20 本地SQL查询

    Spring Data JPA同样也支持sql语句的查询 //nativeQuery : 使用本地sql的方式查询 @Query(value="select * from customer& ...

  3. for循环结合range使用方法

    range概念:表示一个数据范围 基本的语法格式:range(开始数据,结束数据(不包括结束数据),步长) 记住一个公式:下一个数据=开始数据+步长 步长:表示的是数据前后的间隔 OK,基本的概念和语 ...

  4. 逐浪CMS全面升级为.NET Core 3.0性能大提升

    微软发布了.Net Core 3.0正式版,逐浪CMS也在第一时间做了全面升级,并做了一系列的优化和调整,性能大幅提升,并解决了一些历史遗留问题,添加了一些新的功能.如后台固有小程序功能做了升级,功能 ...

  5. go package 学习笔记 —— strconv（string与其他基本数据类型(int, float, bool)的转换）

    strconv实现了go中基本数据类型与string之间的转换. How to use in go go doc:https://godoc.org/strconv import "strc ...

  6. 数据挖掘入门系列教程（四点五）之Apriori算法

    目录 数据挖掘入门系列教程(四点五)之Apriori算法 频繁(项集)数据的评判标准 Apriori 算法流程 结尾 数据挖掘入门系列教程(四点五)之Apriori算法 Apriori(先验)算法关联 ...

  7. 03、MySql的数据类型

    MySQL中定义数据字段的类型对你数据库的优化是非常重要的. MySQL支持多种类型,大致可以分为三类:数值.日期/时间和字符串(字符)类型. 1.数字类型 类型 大小 范围(有符号) 范围(无符号) ...

  8. 创建 VuePress + GithubPages + TravisCI 在线文档

    目录 最终效果 思路 总体 过程 用到的东西 相关 创建Github仓库 创建Github仓库 SSH密钥链接Github 生成SSH密钥 Github添加SSH密钥 测试SSH密钥 配置VuePre ...

  9. Worktile 进军软件开发与协作的初心与野心

    作为国内领先的企业协作工具,过去6年Worktile经历了中国SaaS跌宕起伏的蛮荒时代.当国内2C领域逐步布局成熟,巨头和资本也逐步将目光聚焦在2B这个万亿级大赛道,疫情期间和之后,都将加速企业服务 ...

  10. Selenium系列（二） - 控制浏览器操作的详细解读

    如果你还不想从头学起Selenium,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1680176.html 其次,如果你不懂前端基础知识 ...