当前位置：首页 > article >正文

Three.js基础入门笔记

article 2024/11/5 0:22:42

Three.js基础入门笔记

- - WebGL
  - Canvas
  - Three.js是什么？
  - OpenGL、WebGL、Canvas、Three.js四者关系
  - Three.js应用场景有哪些？
  - Three.js入门准备
  - - 1、支持WebGL的浏览器：
    - 2、Three.js中三维坐标系
  - Three.js库引入的两种方式
  - Three.js基础案例展示
  - 三维空间容器
  - - 1、场景（scene）
    - 2、相机（camera）
    - 3、渲染器（renderer）

提到 Three.js，就需要先说一下 OpenGL 和 WebGL， OpenGL 是一个跨平台的3D/2D的绘图标准（规范），WebGL（Web Graphics Library）是一种3D绘图协议，它允许把JavaScript和OpenGL 结合在一起运用，但使用WebGL原生的API来写3D程序非常的复杂，同时需要相对较多的数学知识，对于前端开发者来说学习成本非常高。

WebGL

WebGL是一种Javascript的3D图形接口，把JavaScript和OpenGL ES 2.0结合在一起。

OpenGL
OpenGL是开放式图形标准，跨编程语言、跨平台，Javascript、Java 、C、C++ 、 python 等都能支持OpenGL ，OpenGL的Javascript实现就是WebGL。OpenGL ES 2.0是OpenGL的子集，针对手机、游戏主机等嵌入式设备而设计。

Canvas

Canvas是HTML5的画布元素，在使用Canvas时，需要用到Canvas的上下文，可以用2D上下文绘制二维的图像，也可以使用3D上下文绘制三维的图像，其中3D上下文就是指WebGL。

Three.js是什么？

官网：Javascript 3D library（JavaScript 3D 库）。Three.js是基于webGL的封装的一个易于使用且轻量级的3D库，Three.js对WebGL提供的接口进行了非常好的封装，简化了很多细节，大大降低了学习成本，极大地提高了性能，功能也非常强大，用户不需要详细地学习 WebGL，就能轻松创作出三维图形，是前端开发者研发3D绘图的主要工具。微信小游戏跳一跳也是在基于Three.js研发的，Threejs现在是独领风骚。

简言之：Three.js就是能够实现3D效果的JS库

OpenGL、WebGL、Canvas、Three.js四者关系

OpenGL：3D绘图标准
WebGL：OpenGL + JavaScript
Canvas：WebGL + Canvas 2D
Three.js：一个基于WebGL封装的库

类似于：
ECMAscript：脚本语言规范
JavaScript：脚本语言
jQuery: 一个基于JavaScript封装的库

简单一句话概括：WebGL和Three.js的关系，相当于JavaScript和jQuery的关系。
在这里插入图片描述

Three.js应用场景有哪些？

Web3D游戏、3D物体模型展示、数据可视化、Web VR

Three.js入门准备

1、支持WebGL的浏览器：

Google Chrome 9+
Firefox 4+
Opera 15+
Safari 5.1+
Internet Explorer 11
Microsoft Edge

推荐使用Chrome浏览器

2、Three.js中三维坐标系

Three .js中的三维坐标系：
在这里插入图片描述

Three.js库引入的两种方式

1、通过CDN方式引入

<script src="https://cdn.bootcss.com/three.js/92/three.js"></script>

2、把Three.js下载到本地，直接引入

<script src="./three.js"></script>

Three.js基础案例展示

<html>
<head>
    <title>Three.js基础案例</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }

        canvas {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <script src="https://cdn.bootcss.com/three.js/r83/three.min.js"></script>
    <script>
       
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(
            50, 
            window.innerWidth / window.innerHeight, 
            0.1, 
            1000 
        );
        camera.position.set(5, 10, 10);
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        var geometry = new THREE.BoxGeometry(4, 4, 4);
        var materialBasic = new THREE.MeshBasicMaterial({
            color: 0xffffff, 
            wireframe: true 
        });
        var materialNormal = new THREE.MeshNormalMaterial();
        var cube = THREE.SceneUtils.createMultiMaterialObject(geometry, [
            materialBasic,
            materialNormal
        ]);
        camera.lookAt(cube.position);
        scene.add(cube);
        var spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(0, 20, 20);
        spotLight.intensity = 5;
        scene.add(spotLight);
        var axes = new THREE.AxisHelper(6);
        scene.add(axes);
        renderer.render(scene, camera);
    </script>
</body>
</html>

三维空间容器

使用三维空间，需要创建一个三维空间的容器，我们通常把这个容器叫做场景。

Thress.js 三大要素（核心）：
场景（scene）、相机（camera）、渲染器（renderer）
相机获取到场景内显示的内容，然后再通过渲染器渲染到画布上面

1、场景（scene）

场景是一个三维空间，是存放所有物品的容器，可以把场景想象成一个空房间，房间里面可以放置要呈现的物体、相机、光源等。

场景允许在什么地方、摆放什么东西来交给three.js来进行渲染，场景也就是放置物体、灯光和相机的地方。

创建场景：要构件一个场景很简单，只需要new一个场景对象出来即可：var scene = new THREE.Scene()

var scene = new THREE.Scene(); // 创建场景

2、相机（camera）

在场景中需要添加一个相机，相机用来确定观察位置、方向、角度，相机看到的内容，就是我们最终在屏幕上看到的内容。在程序运行过程中，可以调整相机的位置、方向、角度。

想象一下，在房间里放了一个摄像机，你不在房间里面，但可以远程控制相机移动，摄像机传给远程电脑上展示出来的画面，就是Threejs在屏幕上呈现的画面。

在Three.js中有两种常用的相机：透视投影相机（perspectiveCamera）和正交投影相机（OrthographicCamera ）

透视投影相机（perspectiveCamera）
特点：透视相机的效果是模拟人眼看到的效果，跟人眼看到的世界是一样的，近大远小。
用途：大部分场景都适合使用透视投影相机，因为跟真实世界的观测效果一样；

创建透视投影相机：var camera = new THREE.PerspectiveCamera(fov, aspect, near, far);

3、渲染器（renderer）

渲染器的作用就是将相机拍摄出的画面在浏览器中呈现出来。渲染器决定了渲染的结果应该画在页面的什么元素上面，并且以怎样的方式来绘制。

Three.js中有很多种类的渲染器，例如webGLRenderer、canvasRenderer、SVGRenderer，通常使用的是WebGLRenderer渲染器。

创建WebGLRenderer渲染器：var renderer = new THERR.WebGLRenderer();

创建完渲染器后，需要调用render方法将之前创建好的场景和相机相结合从而渲染出来，即调用渲染器的render方法：renderer.render(scene,camera)

var renderer = new THREE.WebGLRenderer(); // 创建一个 WebGL 渲染器
renderer.setSize(window.innerWidth, window.innerHeight); // 通过调用 setSize() 方法设置渲染的长宽（设置渲染器为全屏）
document.body.appendChild(renderer.domElement); // 将渲染结果展示到页面上
renderer.render(scene, camera); // 结合场景和相机进行渲染，即用摄像机拍下此刻的场景（最后一步）

说明：

setSize() 方法设置渲染的长宽。
renderer 的 domElement 元素，表示渲染器中的画布，所有的渲染都是画在 domElement 上，所以这里的 appendChild 表示将这个 domElement 挂接在 body 下面，这样渲染的结果就能够在页面中显示了。
render()方法中传递我们的场景和相机，相当于传递了一张由相机拍摄场景得到的一张底片，它将图像渲染到我们的画布中。

以上就是Three.js中完成3D绘图的三大要素（场景、相机、渲染器），利用这三大要素，我们才能够使用相机将场景渲染到网页上去。

查看全文

http://www.kler.cn/a/379397.html