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. 我的学习笔记之node----node.js+socket.io实时聊天（1）

    本想着从hello word开篇,也确实写了相关学习笔记.各种原因吧,现在又着急写出作品,便作罢. 这里将记录一个node.js+socket.io的实时聊天程序.(当然我也是跟着网上各种教程资料学习 ...

  2. drf(请求封装/认证/权限/节流)

    1.请求的封装 class HttpRequest(object): def __init__(self): pass @propery def GET(self): pass @propery de ...

  3. javascript中怎么判断两个数据类型相等

    在 JavaScript 中,判断一个变量的类型尝尝会用 typeof 运算符,在使用 typeof 运算符时采用引用类型存储值会出现一个问题,无论引用的是什么类型的对象,它都返回 "obj ...

  4. Axure 文本框去掉边框 富文本 粘贴文字图标

    在今天做原型的过程中,碰到两个问题: 1 文本框该如何去掉边框 2 富文本粘贴文字图标 第一个问题:首先是思路错了,又跑到元件上面找边框,跑到style里面去border的线,结果是不成功. 正解:属 ...

  5. niginx:duplicate MIME type "text/html" in nginx.conf 错误(转载)

    把nginx升级到最新以后,发现用原来的配置启动的时候会提示: duplicate MIME type "text/html" in /usr/local/nginx/conf/n ...

  6. Java第一节课考试

    1 package kaoshi; import java.util.Scanner; public class ScoreInformation { Scanner input=new Scanne ...

  7. Java 并发同步工具(转)

    转自:https://www.jianshu.com/p/e80043ac4115 在 java 1.5 中,提供了一些非常有用的辅助类来帮助我们进行并发编程,比如 CountDownLatch,Cy ...

  8. 都2020年了 还要学JSP吗？

    前言 2020年了,还需要学JSP吗?我相信现在还是在大学的同学肯定会有这个疑问. 其实我在18年的时候已经见过类似的问题了「JSP还应该学习吗」.我在18年发了几篇JSP的文章,已经有不少的开发者评 ...

  9. 前端视频直播技术总结及video.js在h5页面中的应用

    全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/12557070.html,多谢,=.=~ (如果对你有帮助的话请帮我点个赞啦) 目前有一个需求是在 ...

  10. iOS开发：判断iPhone是否是刘海屏iPhoneX、iPhoneXR、iPhoneXs、iPhoneXs Max等

    保证能判断,呕心沥血,不行切JIJI 方法一 Objective-C // iPhoneX.iPhoneXR.iPhoneXs.iPhoneXs Max等 // 判断刘海屏,返回YES表示是刘海屏 - ...