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. CSS的四种样式

    行内式CSS样式 在标签内部使用的样式 <div id="one" style="width:50p"></div> 内嵌式CSS样式 ...

  2. 【Vue】---- 手动封装on，emit，off

    一.概念 1. $on("事件名称",回调函数) 事件绑定,一个事件名称上面可能绑定多个函数 2. $emit("事件名称",需要传递的值) 事件触发时,会触发 ...

  3. css 一行自适应等比例布局

    一.浮动布局+百分比 .row { width:100%; overflow:hidden; zoom:1; } .item { float: left; width: 20%; } 该样式兼容性较好 ...

  4. 新手学黑客攻防-黑客攻击电脑方式和认识IP地址

    听说过黑客,没见过黑客,从最基础的开始学习,让我能在互联网中保护自己的隐私安全和信息安全. 黑客攻击电脑方式 黑客攻击的方式多种多样,但常见的只有以下几种,基本上每个黑客都会用到: 网络报文嗅探 网络 ...

  5. .NET写入文件操作

    2018-01-16  22:44:35 许多程序需要记录运行日志,这就需要将程序运行记录写入本机,一般是.txt 文本或.csv 文件.具体操作如下: 一.C#   using System.IO; ...

  6. 扩展el-input 加一个控制精度的命令（directives）

    使用el-input时 出现需要精度控制的需求,因为每一个el-input需要精度不用 所以我给这个虚拟dom绑定了一个精度值,根据这个值去控制精度. 下面附上代码: html: <el-inp ...

  7. git命令，github网站以及sourceTree用法详解

    1.git下载安装 这里只是windows安装方法: 进入这个网址:http://msysgit.github.com/,点击下载,就会下载下来一个exe文件,双击打开,安装即可 完成安装之后,就可以 ...

  8. C# MP3播放帮助类

    本文为原创文章如需转载请注明出处: /// <summary> /// ************************************************* /// 类名:M ...

  9. 【NLP面试QA】预训练模型

    目录 自回归语言模型与自编码语言 Bert Bert 中的预训练任务 Masked Language Model Next Sentence Prediction Bert 的 Embedding B ...

  10. Android初级控件

    Android初级控件 从今天开始就对Android进行正式的学习,首先先来学习一下初级的控件 1.TextView  文本框,用于显示文字,不可编辑. 常用属性 android:autoLink   ...