3.0 代码构建的最基本结构

说明：

我们必需首先知道，Three.js 的一些入门级概念：

我们需要知道，OpenGL 是一套三维实现的标准，为什么说是标准，因为它是跨平台，跨语言的。甚至CAD以及市面上众多的制图软件的底层，用的也是这一套标准。

而在JS中，这套标准的实现方式是基于OpenGL 标准开放的WebGL， 专注于网页的3D效果实现。

3D的基本实现原理，其实没有什么新的产物，还是基于HTML、CSS、JS 的产物，只不过它可以更加复杂而已，可以实现极为强大的效果和功能，这是下一代的Web革命。

Canvas画布，是我们在Html中接触的概念。

什么是Three.js ？

和其他众多的js库，一样，Three.js也是一套库，不过它专注于3D视图实现，它面向的对象是WebGL，库的作用是让我们可以更加高效的产出代码，减少代码量，我们只需要用它暴露给我们的接口，就能快速的完成我们需要的图形，而不需要我们直接面向WebGL，那将很复杂，代码量很大。

总得来讲，Three.js 是为了便利我们的开发而出现的产物，它的作用是简化开发、减少代码量。

代码结构

组成：

一个典型的Three.js程序至少要包括：

渲染器（Renderer）、

场景（Scene）、

照相机（Camera），

以及你在场景中创建的物体。

渲染器的两种写法方式

渲染器（Renderer）,的组成其实就是两个小部分，一个是dom，一个是画布初始化函数到该dom。 然后把这两个绑定起来。

这里说的渲染器的两种写法，其实就是我们学html和js的时候，可以手写一个dom节点，也可以用js创建一个dom节点。

方式一：js创建

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <script type="text/javascript" src="./three.js"></script>

    <title>Document</title>

</head>

<body onload="init()">

    <script>

        function init() {

            var renderer = new THREE.WebGLRenderer();

            renderer.setSize(800, 600);

            document.getElementsByTagName('body')[0].appendChild(renderer.domElement);

            renderer.setClearColor(0x00000);

            var scene = new THREE.Scene();

            var aspect = window.innerWidth / window.innerHeight;

            var camera = new THREE.OrthographicCamera(-4 * aspect, 4 * aspect, -3 * aspect, 3 * aspect, 1, 500);

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

            camera.lookAt(new THREE.Vector3(0, 0, 0));

            scene.add(camera);

            var circle = new THREE.Mesh(new THREE.CircleGeometry(3, 50, Math.PI, Math.PI / 3 * 4),

                // Math.PI / 3 * 4)怎么来的？ ： Math.PI * 2 是一整个圆（平面投影360度），那么Math.PI*2 * 2/3 就可以画出一个2/3的圆（扇形区域）

                new THREE.MeshBasicMaterial({

                    color: 0xff0000,

                    wireframe: true

                })

            )

            scene.add(circle)

            renderer.render(scene, camera);

        }

    </script>

</body>

</html>

　　

方式二：手写dom，然后绑定。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <script type="text/javascript" src="./three.js"></script>

    <title>Document</title>

</head>

<body onload="init()">

    <canvas id="mainCanvas" width="800px" height="600px"></canvas>

</body>

<script>

    function init() {

        var renderer = new THREE.WebGLRenderer({

            canvas: document.getElementById('mainCanvas')

        });

        renderer.setClearColor(0x000000);

        var scene = new THREE.Scene();

        var camera = new THREE.OrthographicCamera(-2, 2, 1.5, -1.5, 1, 10);

        camera.position.set(4, 3, 5);

        scene.add(camera);

        camera.lookAt(new THREE.Vector3(0, 0, 0));

        var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3, 1, 2, 3),

            new THREE.MeshBasicMaterial({

                color: 0xff0000,

                wireframe: true

            })

        )

        scene.add(cube);

        renderer.render(scene, camera);

    }

</script>

</html>

　　

基本代码整体构建说明

代码结构以下给出注释

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <script type="text/javascript" src="./three.js"></script>

    <title>Document</title>

</head>

<body onload="init()">

    <!-- 页面加载触发init()初始化函数， -->

    <script>

        function init() {

        //渲染器

            var renderer = new THREE.WebGLRenderer();

            renderer.setSize(800, 600);

            document.getElementsByTagName('body')[0].appendChild(renderer.domElement);

            renderer.setClearColor(0x00000);

        //场景

            var scene = new THREE.Scene();

            var aspect = window.innerWidth / window.innerHeight;

        //相机

            var camera = new THREE.OrthographicCamera(-4 * aspect, 4 * aspect, -3 * aspect, 3 * aspect, 1, 500);

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

            camera.lookAt(new THREE.Vector3(0, 0, 0));

            scene.add(camera);

            var circle = new THREE.Mesh(new THREE.CircleGeometry(3, 50, Math.PI, Math.PI / 3 * 4),

                new THREE.MeshBasicMaterial({

                    color: 0xff0000,

                    wireframe: true

                })

            )

            scene.add(circle)

        //触发渲染

            renderer.render(scene, camera);

        }

    </script>

</body>

</html>

　　

《Three.js入门指南》一书，在第一章就简要的介绍了创建一个Three.js程序的过程。

《Three.js 入门指南》3.0 - 代码构建的最基本结构。的更多相关文章

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

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

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

    3.1.2 正式代码结构 & ORBIT CONTROLS插件(轨道控制) 说明 本节内容属于插入节,<Three.js入门指南>这本书中,只是简单的介绍了一些概念,是一本基础的入 ...

  3. d3.js 入门指南

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

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

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

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

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

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

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

  7. require.js入门指南(一)

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

  8. Vue.js 入门指南

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

  9. require.js入门指南(三)

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

随机推荐

  1. 必备技能三、render渲染函数

    Vue 推荐使用在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template ...

  2. CORS(cross-origin-resource-sharing)跨源资源共享

    其实就是跨域请求.我们知道XHR只能访问同一个域中的资源,这是浏览器的安全策略所限制,但是开发中合理的跨域请求是必须的.CORS是W3的一个工作草案,基本思想就是:使用自定义的HTTP头部让浏览器与服 ...

  3. 【WPF学习】第五十八章 理解逻辑树和可视化树

    在前面章节中,花费大量时间分析了窗口的内容模型——换句话说,研究了如何在其他元素中嵌套元素,进而构建完整的窗口. 例如,考虑下图中显示的一个非常简单的窗口,该窗口包含两个按钮.为创建该按钮,在窗口中嵌 ...

  4. 28 复杂的使用Specification查询

    /** * Specification的多表查询 */ @Test public void testFind() { Specification<LinkMan> spec = new S ...

  5. 【python pip】一招解决pip下载过慢问题

    目录 概述 壹:问题描述 贰:解决过程 一.问题分析 二.问题解决 方法一:下载时加入参数-i [镜像源地址] 方法二:设置源 三.国内镜像源地址 叁:作者有话 作者 概述 在我们经常使用pip安装插 ...

  6. Ubuntu部署Asp.net core网站无法访问

    前几天应工作需要,在阿里云上部署一个测试站点.本以为分分钟的事情,没想到打脸了. 当时直接新建一个webapi项目,publish后直接上传到阿里云,随后设置nginx转发网站端口5000. 接着打开 ...

  7. 基于osg的python三维程序开发（三）------几何形体及纹理

    def createScene(): geode = osg.Geode() pointsGeom = osg.Geometry() vertices = osg.Vec3Array() vertic ...

  8. Spring Cloud 理论篇

    show me the code and talk to me,做的出来更要说的明白 github同步收录 我是布尔bl,你的支持是我分享的动力! 微服务 在 jsp 时代,应用前后端耦合,前后端 a ...

  9. drf分页功能

    什么是restful规范 是一套规则,用于程序之间进行数据交换的约定. 他规定了一些协议,对我们感受最直接的的是,以前写增删改查需要写4个接口,restful规范的就是1 个接口,根据method的不 ...

  10. WINDOWS上JDK安装与环境变量设置

    一.JDK安装 jdk版本:jdk1.8.0_144 下载链接:https://pan.baidu.com/s/1eS2bFhg 密码:e3q1 下载JDK后点击安装,可以根据需要修改JDK的安装目录 ...