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. 使用JS检测自定义协议是否存在

    [该博客是拼接他人的,原因我们这边PC的开发人员问我,有没有关于js某个对象直接能检测手机或者电脑的自定义协议的,我上网搜了下,貌似移动端的解决比较多] 最终解决方案:还是需要github上面大神写的 ...

  2. Django 图片上传到数据库 并调用显示

    环境:Django2.0 Python3.6.4 建立项目,数据库设置,就不说了. 直接上代码: 在models.py中,需要建立模型,这里使用了ImageField字段,用来存储图片路径,这个字段继 ...

  3. 一文掌握Redis的三种集群方案

    在开发测试环境中,我们一般搭建Redis的单实例来应对开发测试需求,但是在生产环境,如果对可用性.可靠性要求较高,则需要引入Redis的集群方案.虽然现在各大云平台有提供缓存服务可以直接使用,但了解一 ...

  4. js中的堆和栈

    http://www.jscwwd.com/article/5e533ae2552a8e2bf45d3d69 这里先说两个概念:1.堆(heap)2.栈(stack)堆 是堆内存的简称.栈 是栈内存的 ...

  5. css中：link和@import的区别

    两者都是外部引用css的方式.但是有一定的区别: 1. 从属关系:link是一个xhtml标签,除了加载css外,还可以定义 RSS.rel 连接属性等: @import属于css范畴,只能加载css ...

  6. Linux与unix shell编程指南

    第14章 环境和shell变量 1.使用变量时,尽量用花括号将之括起来,防止shell误解变量值. 2.设置变量时的不同模式 variable-name=value 设置实际值到variable-na ...

  7. this.current = params.page || 1 （前提是params对象一定要存在）

    this.current = params.page || 1 (前提是params对象一定要存在)

  8. 如何查看子线程中的GC Alloc

    1)如何查看子线程中的GC Alloc2)Build时,提示安卓NDK异常3)如何获得ParticleSystem产生的三角形数量4)关于图片通道的问题5)GPUSkinning导致模型动画不平滑 M ...

  9. C# RSACryptoServiceProvider 加密解密 RSA 加密解密

    什么是RSA:RSA公开密钥密码体制.所谓的公开密钥密码体制就是使用不同的加密密钥与解密密钥,是一种“由已知加密密钥 推导出 解密密钥在计算上是不可行的”密码体制. 下附代码,在控制台中粘贴在启动类即 ...

  10. 关于CORS(跨域资源共享)的几个http请求头小实验

    对几种与跨域相关的请求头做一个总结 关于跨域可以看:9 种常见的前端跨域解决方案(详解) 看完后可以配合我的代码做些实验,看看注释掉某个响应头会发生什么,整体代码会在最后贴出 跨域简单请求 需要在服务 ...