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. [C++入门篇]了解C++

    前言 我是杨某人,点击右下方"+"一键关注我.如果你喜欢我的文章,那么拒绝白嫖行为.然后..请多来做客鸭. 如果你是已经入门的大佬,请滑到下方点个推荐再走. 我个人认为,博客有两种 ...

  2. jQuery插件select2跨域设置xhrFields参数

    ajax跨越时默认不带cookie,如果需要带cookie调用,需要设置参数 xhrFields: { withCredentials: true },如: $.ajax({url : "h ...

  3. Java 基础（六）：循环

    循环 老生常谈的一个控制流程了,我们在是使用数组和集合的时候,遍历元素的时候经常会用到循环的结构,Java具有非常灵活的三种循环机制: 根据是否知道循环的次数可以为分为while循环,do...whi ...

  4. Python基础篇(一)_基本语法元素

    Python基础篇——基本语法元素 缩进:体现强制可读性,一般缩进4个空格.一个或多个Tab 注释:单行注释----以 # 开头 多行注释----每行以 # 开头,以 # 结束 变量:无须提前声明.可 ...

  5. Java中请优先使用try-with-resources而非try-finally

    Java中请优先使用try-with-resources而非try-finally Java库包含了很多需要手工调用close方法来关闭的资源.比如说InputStream.OutputStream及 ...

  6. requests模块使用二

    1.cookies和session 1.1.什么是cookie和session? cookie是网站用来辨别用户身份,进行会话跟踪,存储在本地终端上的数据. session(会话)起来本含义是指有始有 ...

  7. Java 中，如何对日期进行加减操作

    今天在做项目时,遇到了对时间的加减进行操作的需求,根据传入的日期字符串,操作参数("+","-"),加数(要操作的天数),对日期进行加减操作,经查询资料,自己写 ...

  8. hdu2066多源最短路

    题目链接:http://icpc.njust.edu.cn/Problem/Hdu/2066/ SPFA可以高效过,代码如下: #include<bits/stdc++.h> using ...

  9. wr720n v4 折腾笔记(二):刷入不死Uboot

    0x01 前言 接着上节刷入Openwrt开始说起,此次开始刷入不死Uboot,刷入之后就可以在Uboot里面随便刷机,再也不怕成砖了. 固件附件地址: 下载地址1(还是之前一的包) flash文件地 ...

  10. JUnit 5基础指南

    A Guide to JUnit 5 准备 添加maven依赖: <dependency> <groupId>org.junit.jupiter</groupId> ...