Threee与WebGl介绍

weixin_50249314

已于 2022-05-23 15:14:15 修改

阅读量291

点赞数

文章标签： javascript 前端开发语言

于 2022-02-19 22:59:55 首次发布

本文链接：https://blog.csdn.net/weixin_50249314/article/details/122991265

版权

什么是 WebGL？

WebGL（Web 图形库）是一种 JavaScript API，用于在任何兼容的 Web 浏览器中呈现交互式 3D 和 2D 图形，而无需使用插件。WebGL 通过引入一个与 OpenGL ES 2.0 紧密相符合的 API，可以在 HTML5 元素中使用（简介引自 MDN）。

以我的理解，WebGL 给我们提供了一系列的图形接口，能够让我们通过 JavaScript 去使用 GPU 来进行浏览器图形渲染的工具。

什么是 Three.js？

Three.js 是一款 webGL 框架，由于其易用性被广泛应用。Three.js 在 WebGL 的 API 接口基础上，又进行的一层封装。它是由居住在西班牙巴塞罗那的程序员 Ricardo Cabbello Miguel 所开发，他更为人知的网名是 Mr.doob。

Three.js 以简单、直观的方式封装了 3D 图形编程中常用的对象。Three.js 在开发中使用了很多图形引擎的高级技巧，极大地提高了性能。另外，由于内置了很多常用对象和极易上手的工具，Three.js 的功能也非常强大。最后，Three.js 还是完全开源的，你可以在 GitHub 上找到它的源代码，并且有很多人贡献代码，帮助 Mr.doob 一起维护这个框架。

WEBGL 和 Three.js 的关系

WebGL 原生 API 是一种非常低级的接口，而且还需要一些数学和图形学的相关技术。对于没有相关基础的人来说，入门真的很难，Three.js 将入门的门槛降低了一大截，对 WebGL 进行封装，简化我们创建三维动画场景的过程。只要你有一定的 JavaScript 基础，有一定的前端经验，我坚信，用不了多长时间，三维制作会变得很简单。

用最简单的一句话概括：WebGL 和 Three.js 的关系，相当于 JavaScript 和 jQuery 的关系。

功能概述

Three.js 作为 WebGL 框架中的佼佼者，由于它的易用性和扩展性，使得它能够满足大部分的开发需求，Three.js 的具体功能如下：

Three.js 掩盖了 3D 渲染的细节：Three.js 将 WebGL 原生 API 的细节抽象化，将 3D 场景拆解为网格、材质和光源（即它内置了图形编程常用的一些对象种类）。
面向对象：开发者可以使用上层的 JavaScript 对象，而不是仅仅调用 JavaScript 函数。
功能非常丰富：Three.js 除封装了 WebGL 原始 API 之外，Three.js 还包含了许多实用的内置对象，可以方便地应用于游戏开发、动画制作、幻灯片制作、髙分辨率模型和一些特殊的视觉效果制作。
速度很快：Three.js 采用了 3D 图形最佳实践来保证在不失可用性的前提下，保持极高的性能。
支持交互：WebGL 本身并不提供拾取（Picking）功能（即是否知道鼠标正处于某个物体上）。而 Three.js 则固化了拾取支持，这就使得你可以轻松为你的应用添加交互功能。
包含数学库：Three.js 拥有一个强大易用的数学库，你可以在其中进行矩阵、投影和矢量运算。
内置文件格式支持：你可以使用流行的 3D 建模软件导出文本格式的文件，然后使用 Three.js 加载，也可以使用 Three.js 自己的 JSON 格式或二进制格式。
扩展性很强：为 Three.js 添加新的特性或进行自定义优化是很容易的事情。如果你需要某个特殊的数据结构，那么只需要封装到 Three.js 即可。
支持HTML5 Canvas：Three.js 不但支持 WebGL，而且还支持使用 Canvas2D、Css3D 和 SVG 进行渲染。在未兼容 WebGL 的环境中可以回退到其它的解决方案。

场景（scene）

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

相机（camera）

// An highlighted block
 var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 500); //实例化相机
  	 camera.position.set(0, 0, 15);
  	 // PerspectiveCamera(透视摄像机)
  	 // 一共四个参数：分别对应 视野角度（FOV）、长宽比（aspect ratio）、近截面（near）和远截面（far）

渲染（renderer）

// An highlighted block
 var renderer = new THREE.WebGLRenderer(); //创造一个渲染器
     renderer.setSize(window.innerWidth, window.innerHeight); //设置宽和高
     // 将renderer的dom元素添加我们的HTML文档中。这就是渲染器用来显示场景给我们看的<canvas>元素
     document.body.appendChild(renderer.domElement); //添加到dom
     renderer.setClearColor(0xb9d3ff, 1); //设置渲染器背景颜色

立方体（BoxGeometry）

// An highlighted block
 var geometry = new THREE.BoxGeometry( 1, 1, 1 );
 // 几何体有很多，这里只是用了一个立方体

材料（material）

// An highlighted block
 var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
 // 就是说这个立方体用什么材料构建

网格（material）

// An highlighted block
 var mesh = new THREE.Mesh( geometry, material ); //创建网格
 // 把几何体与材料融合就得到了网格，这才是我们要去渲染的

上述几步，我们已经创造了我们3d所需要的东西，下一步就是把网格放入场景，用渲染器渲染场景即可

网格放入场景

// An highlighted block
 scene.add( mesh ); //将网格添加到场景
 camera.position.set(0, 0, 15);

渲染器渲染

// An highlighted block
renderer.render( scene, camera );

立方体运动

// An highlighted block
function animate() {
    requestAnimationFrame( animate );

    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.01;

    renderer.render( scene, camera );
};
animate();

这里是引用

创建一个场景（Creating a scene）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个Three.js案例</title>
    <link rel="stylesheet" href="./css/index.css">
    <style>
        body {
            margin: 0;
        }

        canvas {
            width: 100%;
            height: 100%;
            display: block;
        }
        
    </style>
</head>

<body  onload="init()">

<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script> 
    
    
    <!--  <script src="./three.js-master/build/three.js"></script>-->
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/three.js"></script> -->

<script>
    //声明一些全局变量
    var renderer, camera, scene, geometry, material, mesh ;


    //初始化渲染器
    function initRenderer() {
        renderer = new THREE.WebGLRenderer(); //实例化渲染器
        renderer.setSize(window.innerWidth, window.innerHeight); //设置宽和高
        document.body.appendChild(renderer.domElement); //添加到dom
        // renderer.setClearColor(0xb9d3ff, 1); //设置渲染器背景颜色
        
    }

    //初始化场景
    function initScene() {
        scene = new THREE.Scene(); //实例化场景
    }

    //初始化相机
    function initCamera() {
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 500); //实例化相机
        camera.position.set(0, 0, 15);//设置相机位置
    }

    //创建模型
    function initMesh() {
        material = new THREE.MeshNormalMaterial( { color: 0x00ff00 } ); //创建材质

        geometryGeometry = new THREE.BoxGeometry( 2, 2, 2 ); //创建几何体

        geometry = new THREE.Mesh( geometryGeometry, material ); //创建网格模型对象Mesh

        sphereGeometry=new  THREE.SphereGeometry(1,32,32)// 创建圆形
        sphere=new THREE.Mesh(sphereGeometry,material)//创建网格模型对象Mesh
        // 设置场景
        scene.add( geometry ); //将网格添加到场景  正方形
        scene.add(sphere) //将网格添加到场景  圆形
        sphere.position.x=5   
    }


    //运行动画
    function animate() {
        requestAnimationFrame(animate); //循环调用函数

        geometry.rotation.x += 0.01; //每帧网格模型的沿x轴旋转0.01弧度
        geometry.rotation.y += 0.02; //每帧网格模型的沿y轴旋转0.02弧度
        
        renderer.render( scene, camera ); //渲染界面
    }

    //初始化函数，页面加载完成是调用
    function init() {
        initRenderer();
        initScene();
        initCamera();
        initMesh();


        animate();

    }

 
</script>
</body>
</html>