1.webGL

　　一种网络标准，定义了一些较底层的图形接口。

2.Three.js

　　一个3Djs库，webGL开源框架中比较优秀的一个。除了webGL以外，Three.js还提供了基于Canvas、SVG标签的渲染器。

　　这是一个开源项目。

3.环境

　　找一个喜欢的jsIDE。调试建议使用Chrome或者Firefox。

4.下载

　　传送门

5.使用

<head>

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

</head>

　　webGL的渲染需要canvas，Three.js可以生成，也可以自定义canvas：

<body onload="init()">

    <canvas id="mainCanvas" width="400px" height="300px" ></canvas>

</body>

在js中定义一个init函数，在HTML加载后执行：

function init(){

　　// ...

}

　　Three.js程序要包括三大组建：

　　场景（Scene）、相机（Camera）、渲染器（Renderer），以及你创建的物体。

6.渲染器（Renderer）

　　渲染器将和Canvas元素进行绑定，接着上面的：

var renderer = new THREE.WebGLRenderer({

    canvas: document.getElementById(‘mainCanvas’)

});

　　如果想要Three.js生成Canvas元素，在HTML中就不需要定义canvas，在js中可以这样写：

var renderer = new THREE.WebGLRenderer();

renderer.setSize(400,300);

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

　　第二行设置了Canvas的宽高。第三行将渲染器对应的Canvas元素添加到<body>中。

　　下面这句可以设置背景为黑色：

renderer.setClearColor(0x000000);

7.场景（Scene）

　　在Three.js中添加的物体都是添加到场景中的。在程序最开始的时候进行实例化，然后将物体添加到场景中即可。

var scene = new THREE.Scene();

8.照相机（Camera）

　　webGL和Three.js使用的坐标系是右手坐标系：

　　相机分正投影相机和透视投影相机。这里先定义一直透视投影的照相机，：

var camera = new THREE.PerspectiveCamera(45,4/3,1,1000);

//四个参数分别对应：视角、近处的裁面的距离、远处的裁面的距离、实际窗口的纵横比（后面会详细讨论）

camera.position.set(0,0,5);//设置相机位置

scene.add(camera);//添加到场景中。

9.长方体

　　创建一个x,y,z方向长度分别为1、2、3的红色长方体：

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

　　new THREE.MeshBasicMaterial({

　

　　　　color: 0xff0000

　　})

);

scene.add(cube);

　　其中，THREE.Mesh表示网格模型；THREE.CubeGeometry表示立方体盒子；MeshBasicMaterial是一种材质：对光照无感，给几何体一种简单的颜色或显示线框。最后添加到场景中。

10.渲染

　　在定义了场景中的物体，设置好的照相机之后，渲染器就知道如何渲染出二维的结果了。调用渲染器的渲染函数，就能使其渲染一次了。

renderer.render(scene, camera);

11.示例

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>3.js测试一</title>

</head>

<body onload="init()">

<canvas id="mainCanvas" width="400px" height="300px" ></canvas>

<script type="text/javascript" src="js/three.min.js"></script><!--路径改成你的-->

        <script type="text/javascript">

            function init() {

                // renderer 渲染器

                var renderer = new THREE.WebGLRenderer({

                    canvas: document.getElementById('mainCanvas')　　//绑定canvas

                });

                renderer.setClearColor(0x000000); // black 

                // scene 场景

                var scene = new THREE.Scene();　　//实例化场景

                // camera 照相机

                var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);　　//透视投影相机参数设置

                camera.position.set(0, 0, 5);　　//相机位置设置

                scene.add(camera);　　//添加到场景

                // a cube in the scene 创建的物体

                var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3),　　//创建网格，参数一：几何体（立方体）

                        new THREE.MeshBasicMaterial({　　//参数二：材质（网格基础材质）

                            color: 0xff0000　　//设置颜色

                        })

                );

                scene.add(cube);　　//添加到场景

                // render 渲染

                renderer.render(scene, camera);

            }

        </script>

</body>

</html>

　　渲染的效果是：

　　下一篇： Three.js基础探寻二

　　整理自张雯莉《Three.js入门指南》

　　其他参考：WebGL中文网

Three.js基础探寻一的更多相关文章

  1. Three.js基础探寻二——正交投影照相机

    本篇主要介绍照相机中的正交投影照相机. 第一篇传送门:Three.js基础探寻一 1.照相机 图形学中的照相机定义了三维空间到二维屏幕的投影方式. 针对投影方式照相机分为正交投影照相机和透视投影照相机 ...

  2. Three.js基础探寻九——网格

    在学习了几何形状和材质之后,我们就能使用他们来创建物体了.最常用的一种物体就是网格(Mesh),网格是由顶点.边.面等组成的物体:其他物体包括线段(Line).骨骼(Bone).粒子系统(Partic ...

  3. Three.js基础探寻十——动画

    本篇将介绍如果使用Three.js进行动态画面的渲染.此外,将会介绍一个Three.js作者写的另外一个库stat.js,用来观测每秒帧数(FPS). 1.实现动画效果 1.1 动画原理 对于Thre ...

  4. Three.js基础探寻四——立方体、平面与球体

    前面简单介绍了webGL和Three.js的背景以及照相机的设定,接下来介绍一些Three.js中的几何形状. 1.立方体 虽然这一形状的名字叫立方体(CubeGeometry),但它其实是长方体,也 ...

  5. Three.js基础探寻三——透视投影照相机

    本篇主要介绍Three.js照相机中的透视投影照相机. 上一篇:正交投影照相机 5.透视投影照相机构造函数 透视投影照相机(Perspective Camera)的构造函数是: THREE.Persp ...

  6. Three.js基础探寻五——正二十面体、圆环面等

    除了立方体.平面.球体,Three.js还提供了很多其他几何形状. 1.圆形 CircleGeometry可以创建圆形或者扇形: THREE.CircleGeometry(radius, segmen ...

  7. Three.js基础探寻八——法向材质与材质的纹理贴图

    4.法向材质 法向材质可以将材质的颜色设置为其法向量的方向,有时候对于调试很有帮助. 法向材质的设定很简单,甚至不用设置任何参数: new THREE.MeshNormalMaterial() 材质的 ...

  8. Three.js基础探寻七——Lamber材质与Phong材质

    材质(Material)是独立于物体顶点信息之外的与渲染效果相关的属性.通过设置材质可以改变物体的颜色.纹理贴图.光照模式等. 本篇将介绍基本材质以及两种基于光照模型的材质(Lamber与Phong) ...

  9. Three.js基础探寻六——文字形状与自定义形状

    1.文字形状 说起3d文字想起了早年word里的一些艺术字: 时间真快. 那么TextGeometry可以用来创建三维的文字形状. 使用文字形状需要下载和引用额外的字体库.这里,我们以 helveti ...

随机推荐

  1. Codeforces Round #431 (Div. 2) B. Tell Your World

    B. Tell Your World time limit per test 1 second memory limit per test 256 megabytes input standard i ...

  2. HNOI2017大佬

    贼难的一道题 虽然算法都不难,但组合起来就是想不到 首先,最简单的一步,对所有大佬,嘲讽你减的自信值和你做水题回复自信值都是不变的,写个\(dp\),设\(dp[i][j]\)表示第\(i\)天自信值 ...

  3. 【POJ3090】Visible Lattice Points

    题目大意:求 \[\sum\limits_{i=2}^n\phi(i)\] 题解:利用与埃筛类似的操作,可在 \(O(nlogn)\) 时间求出结果. 代码如下 #include <cstdio ...

  4. .net跨防火墙链接oracle连接池链接长时间无通讯数据被断开后报错问题解决

    环境: .net 4.0以上使用Oracle.ManagedDataAccess组件链接oracle数据库,应用程序与数据库之间存在硬件防火墙. 症状:应用程序启动后正常访问,如果出现长时间无数据库请 ...

  5. MATLAB运行edge函数闪退

    出现这种问题时,先检查代码有没有问题,换一张图片是不是也有闪退情况. 如果以上都检查过没问题,还是有闪退现象,那就检查MATLAB的版本是不是太低了,比如r2010a版本运行edge函数时,就经常出现 ...

  6. Solr7.1--- 生产环境搭建

    准备三台虚拟机,把Solr-7.1.0.tgz上传到三个节点上.我上传到了自定义的目录/mysoft. 我的环境是CentOS7+Solr7.1.0 如果发现图文不符,因为我之前操作截图后,关闭出去吃 ...

  7. (reverse)Palindromes hdu2163

    Palindromes 链接:http://acm.hdu.edu.cn/showproblem.php?pid=2163 (此题是为了对于JAVA温故知新的) Problem Description ...

  8. 内置窗口 pyqt5

    1.使用Qt Designer设计三个窗口 注意:在主窗口中需要添加一个girdLayout 2.创建**.py from PyQt5.QtWidgets import QMainWindow, QA ...

  9. CF786B Legacy && 线段树优化连边

    线段树优化连边 要求点 \(x\) 向区间 \([L, R]\) 连边, 一次的复杂度上限为 \(O(n)\) 然后弄成线段树的结构 先父子连边边权为 \(0\) 这样连边就只需要连父亲就可以等效于连 ...

  10. JVM调优命令-jinfo

    jinfo JVM Configuration info这个命令作用是实时查看和调整虚拟机运行参数. 之前的jps -v口令只能查看到显示指定的参数,如果想要查看未被显示指定的参数的值就要使用jinf ...