Three.js学习笔记

20171112 发布于2019-08-21 15:12 / 2909人阅读

摘要：和使用的坐标系是右手坐标系。与都是指到照相机位置在深度平面的位置，而照相机不应该拍摄到其后方的物体，因此这两个值应该均为正值。

Three.js是一个3D JavaScript库。Three.js封装了底层的图形接口，使得程序员能够在无需掌握繁冗的图形学知识的情况下，也能用简单的代码实现三维场景的渲染。

一个典型的Three.js程序至少要包括渲染器（Renderer）、场景（Scene）、照相机（Camera），以及你在场景中创建的物体。

渲染器（Renerer）

渲染器将和Canvas元素进行绑定，在HTML中手动定义了id为mainCanvas的Canvas元素，那么Renderer可以这样写：

var renderer = new THREE.WebGLRenderer({
        canvas: document.getElementById("mainCanvas")
    });

将背景色（用于清除画面的颜色）设置为黑色：

renderer.setClearColor(0x000000);

场景（Scene）

在Three.js中添加的物体都是添加到场景中的，因此它相当于一个大容器。一般说，场景里没有很复杂的操作，在程序最开始的时候进行实例化，然后将物体添加到场景中即可。

var scene = new THREE.Scene();

照相机（Camera）

我们使用Three.js创建的场景是三维的，而通常情况下显示屏是二维的，那么三维的场景如何显示到二维的显示屏上呢？照相机就是这样一个抽象，它定义了三维空间到二维屏幕的投影方式。
WebGL和Three.js使用的坐标系是右手坐标系。

var camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);
//我们把 camera 放在 XYZ 坐标为 (50, 50, 50) 的位置上，并且朝向坐标原点。
camera.position.set(50, 50, 50);
camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(camera);

正交投影照相机（Orthographic Camera）的构造函数是：

THREE.OrthographicCamera(left, right, top, bottom, near, far)

这六个参数分别代表正交投影照相机拍摄到的空间的六个面的位置，这六个面围成一个长方体，我们称其为视景体（Frustum）。只有在视景体内部（下图中的灰色部分）的物体才可能显示在屏幕上，而视景体外的物体会在显示之前被裁减掉。

为了保持照相机的横竖比例，需要保证(right - left)与(top - bottom)的比例与Canvas宽度与高度的比例一致。
near与far都是指到照相机位置在深度平面的位置，而照相机不应该拍摄到其后方的物体，因此这两个值应该均为正值。为了保证场景中的物体不会因为太近或太远而被照相机忽略，一般near的值设置得较小，far的值设置得较大，具体值视场景中物体的位置等决定。

渲染

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

renderer.render(scene, camera);

GPU云服务器云服务器 three.js three.js极客 three.js教程 three.js cdn

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88125.html

WebGL three.js学习笔记创建three.js代码的基本框架

摘要：学习学习笔记介绍是一种绘图协议，它把和结合在一起，通过增加的一个绑定，可以为提供硬件加速渲染。环境搭建为了以后的学习方便，首先是搭建一个万能框架，所有的开发都可以在此框架上进行。 WebGL学习----Three.js学习笔记（1） webgl介绍 WebGL是一种3D绘图协议，它把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个Ja...

mtunique 2019-08-23 17:06 评论0 收藏0
WebGL three.js学习笔记自定义顶点建立几何体

摘要：自定义顶点建立几何体与克隆本身已经有很多的网格模型，基本已经够我们的使用，但是如果我们还是想自己根据顶点坐标来建立几何模型的话，也是可以的。并且不仅要更新顶点，还要更新线条的连接方式，否则是没有效果的。自定义顶点建立几何体与克隆 Three.js本身已经有很多的网格模型，基本已经够我们的使用，但是如果我们还是想自己根据顶点坐标来建立几何模型的话，Three.js也是可以的。基本效果...

joyvw 2019-08-23 17:06 评论0 收藏0
【three.js学习笔记】场景

摘要：对象是所有不同对象的容器，也就是说该对象保存所有物体光源摄像机以及渲染所需的其他对象。对象又是被称为场景图，它不仅仅是一个对象数组，还包含了整个场景图树形结构中的所有节点每个添加到场景的对象，甚至包括本身都是继承自一个名为的对象。 THREE.Scene THREE.Scene 对象是所有不同对象的容器，也就是说该对象保存所有物体、光源、摄像机以及渲染所需的其他对象。 THREE.S...

codecraft 2019-08-22 16:02 评论0 收藏0
【three.js学习笔记】几何体

摘要：构造函数分别是长宽高是对应长宽高的分段，在使用线模式进行渲染的时候，可以看到效果如下。长宽高分别被截为段，段，段。球体构造函数球体半径水平方向和垂直方向上分段数。最小值为，默认值为。构造函数形状数组可选的参数对象，可配置参数。 Geometry api Geometry var geometry = new THREE.Geometry(); 立方体（BoxGeometry）老版本...

dendoink 2019-08-22 16:04 评论0 收藏0
【three.js学习笔记】光

摘要：环境光的位置对呈现的效果无任何效果环境光的构造函数只有一个参数进制的颜色值。半球光点光源点光源的光线来自同一点，并向外发射。点光源的构造函数有三个参数，比平行光多了一个距离参数，光会从光源经过的距离一路衰减为。 Lightapi 光源的基类。 Light( color, intensity ) color 光源颜色的RGB数值 intensity 光源强度的数值。看到的颜色使...

YancyYe 2019-08-22 16:21 评论0 收藏0