前端工程师初识Three.js

一、展示效果图

1.1颜色模型自转效果                                                                                                     

 1.2贴图模型自转效果 

二、web图形库的定义

1、什么是WebGL：
     webGL(web图形库)是一个中JavaScript API，用于在web浏览器中呈现交互式2D与3D图形，而且无需使用插件。
     webGL通过引入一个与OpenGL ES2.0紧密相符合的API，就可以在H5(Canvas)元素中使用。
     webGL给我提供了一系列的图形操作接口，能够让我们通过JavaScript去使用GPU来进行浏览器图形渲染。
2、什么是Three.js：
     ThreeJs 是一款WebGL框架(在其API接口基础上又进行了一层封装)，
     ThreeJs以更简单、更直观的方式封装了3D图形编程中的对象。
     ThreeJs在开发中是使用了很多图形引擎的高级技巧，极大的提高了性能。另外，也内置了很多常用对象和极易上手的工具。
     ThreeJs是完全开源的。
3、Three.js的优点：
     现代浏览器的功能越来越强大，逐渐形成了复杂应用和图形的平台，同时，大多数浏览器实现了对webGL的支持，但是直接使用webGL先关接口进行，需要学习复杂的着色器语言，开发周期长，不利于项目的快速开发。
     面对这种情况，ThreeJs应运而生，不但封装了webGL，将接口简单化，而且还基于面向对象的开发思维，将数据结构对象化。
4、ThreeJs的7个特点
     1.面向对象：开发者可以使用上层的JavaScript对象，而不是仅仅调用JavaScript函数；
     2.功能丰富：ThreeJs包含了许多实用方便的内置对象，可以快速地应用于游戏开发、动画制作等一些特殊的视觉制作。
     3.性能很高：其采用了3D图形最佳实践来保证在不失可用的前提下，保持极高的性能。
     4.支持交互：webGL本身不提供拾取(Picking)功能(即是否知道鼠标正处于某个物体上)。而ThreeJs固化了拾取支持，这可以轻松为应用添加交互功能
     5.包含数据库：其拥有一个强大易用的数学库，可以在其中进行矩阵、投影和矢量运算。
     6.拓展性极强：可以很方便的为ThreeJs添加新的特性或进行自定义优化，如果我们需要某个特殊的数据结构，那么只需要封装到ThreeJs中即可。
     7.支持H5的Canvas：其不但支持webGL，还支持使用Canvas2D,Css3D和SVG进行渲染。在未兼容webGL的环境中还可以退回到其它的解决方案。
 三、文件目录结构创建

     1.index.html 运行文件
     2.main.js 逻辑文件
     3.three.js 资源库
     4.live-server 自动全局监听实时更新(提供热更新),启动服务。全局依赖安装：npm i  live-server -g

     项目运行，使用vs code 编辑器，在控制台执行 live-server，启动项目

四、main.js文件逻辑代码：
 ~function(){
    // 1、创建场景和摄像机
        // 1.创建场景
        const Scene = new THREE.Scene();
        // 2.创建摄像机：仿真人眼视觉
        /*
            Perspective projection(P)：透视投影，具有放射性效果。投影物体的会随视点与远平面之间的距离而变化。
            Orthographic projection(O)：正交投影，平面投影。投影物体的大小不会随视点与远平面之间的距离而变化。
        */
        //创建透视投影，参数("视角-默认60°到90°","指投影窗口的长宽比-客户端浏览器的长宽比 window.innerWidth/window.innerHeight","表示从距离摄像机多远的地方开始渲染-默认0.1","表示从距离摄像机多远的地方截止渲染-默认1000")
        const camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);    
 
    // 2、创建ThreeJs渲染器
        // 1.创建渲染器
        const renderer = new THREE.WebGLRenderer();
        // 2.设置渲染器场景的大小,参数("浏览器的宽","浏览器的高")，此时的渲染器还处于游离状态
        renderer.setSize(window.innerWidth,window.innerHeight)
        // 3.将具备大小的场景添加的页面元素中去,domElement表示渲染器重点内容。加载后，会出现一个黑黑的画布容器。
        document.body.appendChild(renderer.domElement)
 
    // 3、创建基础的几何模型
        // 1.定义几何模型，参数("X轴的长-长","Y轴的长-宽","Z轴的长-高")
        const geometry = new THREE.BoxGeometry(2,2,2);
        // 2.创建几何模型的材质,参数({颜色})
        //const material = new THREE.MeshBasicMaterial({ color: 0x00ff00})
        // 5-1 创建几何模型纹理贴图,load用来加载图片内容
        const texture = new THREE.TextureLoader().load('./texture2.jpg')
        // 5-2.创建几何模型的材质,参数({图片贴图})
        const material = new THREE.MeshBasicMaterial({ map: texture})        
        // 3.将材质和几何体很好的结合起来
        const cube = new THREE.Mesh(geometry,material);
        // 4.把cube几何模型添加到场景中(此时模型已经被创建了，但是还不能显示)
        scene.add(cube);
       // 5.显示创建好的几何模型-定义显示模型的动画函数(帧渲染)
        function animate(){
            // 该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行
            requestAnimationFrame(animate);
            // 控制模型进行网格自动旋转
            cube.rotation.x+=0.01
            cube.rotation.y+=0.01
            //  渲染器渲染场景和摄像机
            renderer.render(scene,camera);
        }
        // 6.显示创建好的几何模型-调用显示模型的动画函数
        animate();
        // 7.摄像机的Z轴位置距离,避免贴合太近，导致看不清。
        camera.position.z = 10;
 
    // 4、容器窗口自适应
        window.addEventListener("resize",()=>{
            // 更新投影宽高比例
            camera.aspect = window.innerWidth/window.innerHeight;
            // 初始化矩阵效果
            camera.updateProjectionMatrix();
            // 重新初始化渲染器场景的大小
            renderer.setSize(window.innerWidth,window.innerHeight)
        })
}();

五、网盘代码下载

链接：https://pan.baidu.com/s/1e1uuJxnpI9yNKyH87f58Ww 
提取码：r8n2