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. 盘点Linux运维常用工具(一)-web篇之httpd

    #前言:想把自己学的各种服务进行分类归档起来,于是就写了盘点Linux运维常用工具,Linux方面使用到的web应用服务有httpd(apache).nginx.tomcat.lighttpd,先了解 ...

  2. 《深入理解 Java 虚拟机》读书笔记：虚拟机字节码执行引擎

    正文 执行引擎是 Java 虚拟机最核心的组成部分之一.在不同的虚拟机实现里,执行引擎在执行 Java 代码时可能会有解释执行(通过解释器执行)和编译执行(通过即时编译器产生本地代码执行)两种选择,也 ...

  3. Uiautomator1.0与Uiautomator2.0测试项目搭建与运行原理

    Uiautomator是Android原生测试框架,可以用于白盒接口测试也可以用于UI自动化测试,Uiautomator分1.0版本与2.0版本,它们都是基于UiAutomation的测试框架,都是通 ...

  4. mysql那些事之索引篇

    mysql那些事之索引篇 上一篇博客已经简单从广的方面介绍了一下mysql整体架构以及物理结构的内容. 本篇博客的内容是mysql的索引,索引无论是在面试还是我们日常工作中都是非常的重要一环. 索引是 ...

  5. 升级cocoapods到指定版本

    把cocoapods升级到1.7.4 sudo gem install -n /usr/local/bin cocoapods -v 1.7.4

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

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

  7. File的获取功能（新手）

    //导入包.import java.io.File;/*File的获取功能*///创建的一个类.public class zylx2 { //公共静态的主方法. public static void ...

  8. Mybatis总结一之SQL标签方法

    ---恢复内容开始--- 定义:mapper.xml映射文件中定义了操作数据库的sql,并且提供了各种标签方法实现动态拼接sql.每个sql是一个statement,映射文件是mybatis的核心. ...

  9. Leetcode_877. 石子游戏(区间dp)

    偶数堆石子,只能从首尾取,取多的赢. 每次操作会产生两个子状态,区间dp,记得先枚举长度. code class Solution { public: int dp[505][505]; bool s ...

  10. System.Text.Json 序列化对所有 JSON 属性名称使用 camel 大小写

    asp.net core3.x 新增的序列号接口System.Text.Json 序列化时,如果要对所有 JSON 属性名称使用 camel 大小写 将 JsonSerializerOptions.P ...