devbox
羊村懒王
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

使用threejs简单Web3D效果_three.js效果

作者：羊村懒王 | 2024-05-02 00:53:11

赞

踩

three.js效果

目录

1. threejs介绍

2. thresjs的使用

3. 组件介绍

4. threejs的动画

5. 参考资料

前几天在网上看到一个threejs的实现的web 3d的动画，很炫酷，所以特地去了解了一下threejs。我们首先看下官方使用threejs实现的效果：

 

1. threejs介绍

threejs是基于原生WebGL API和着色器封装得到的3D引擎，也就是一个.js库。直接通过原生WebGL直接编写程序，会比较麻烦，所以threejs就对WebGL做了一层封装，这样方便web开端的去开发web 3d的应用。

所以WebGL是threejs的基础，简单的项目一般也用不到底层WebGL知识，不过学习WebGl有助于深入理解threejs，如果使用Three.js开发项目需要自定义着色器的时候，肯定也是要学习底层WebGL和着色器GLSL知识。

2. thresjs的使用

首先我们看下我们实现的示例效果，实现一个可以鼠标操作的圆柱体：

代码实现：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>My first three.js app</title>
  6.     <style>
  7.         body { margin: 0; }
  8.     </style>
  9. </head>
  10. <body>
  11. <script src="js/three.js"></script>
  12. <script src="js/OrbitControls.js"></script>
  13. <script>
  14.  
  15.     /**
  16.      * 场景对象创建
  17.      */
  18.     const scene = new THREE.Scene();
  19.     
  20.     /**
  21.      * 立方体几何对象Geometry
  22.      */
  23.     const geometry = new THREE.BufferGeometry(); //创建一个Buffer类型几何体对象
  24.     //类型数组创建顶点数据
  25.     const vertices = new Float32Array([
  26.         0, 0, 0,        //顶点1坐标
  27.         50, 0, 0,       //顶点2坐标
  28.         0, 100, 0,      //顶点3坐标
  29.         0, 0, 10,       //顶点4坐标
  30.         0, 0, 100,      //顶点5坐标
  31.         50, 0, 10,      //顶点6坐标
  32.     ]);
  33.     // 创建属性缓冲区对象
  34.     const attribue = new THREE.BufferAttribute(vertices, 3); //3个为一组，表示一个顶点的xyz坐标
  35.     // 设置几何体attributes属性的位置属性
  36.     geometry.attributes.position = attribue;
  37.  
  38.     /**
  39.      * 材质对象
  40.      */
  41.     const material = new THREE.MeshBasicMaterial({
  42.         color: 0x0000ff,            //三角面颜色
  43.         side: THREE.DoubleSide      //两面可见
  44.     });
  45.  
  46.     /**
  47.      * 网格模型对象Mesh，通过几何对象和几何对象的材质构造
  48.      */
  49.     const cube = new THREE.Mesh(geometry, material);
  50.     scene.add( cube );
  51.     
  52.     /**
  53.      * 辅助坐标系  参数250表示坐标系大小，可以根据场景大小去设置
  54.      */
  55.     var axisHelper = new THREE.AxesHelper(250);
  56.     scene.add(axisHelper);
  57.  
  58.     /**
  59.      * 光源设置
  60.      */
  61.     //点光源1
  62.     var point = new THREE.PointLight(0xffffff);
  63.     point.position.set(400, 200, 300); //点光源位置
  64.     scene.add(point); //点光源添加到场景中
  65.     // 点光源2  位置和point关于原点对称
  66.     var point2 = new THREE.PointLight(0xffffff);
  67.     point2.position.set(-400, -200, -300); //点光源位置
  68.     scene.add(point2); //点光源添加到场景中
  69.     //环境光
  70.     var ambient = new THREE.AmbientLight(0x444444);
  71.     scene.add(ambient);
  72.  
  73.     /**
  74.      * 相机设置
  75.      * @type {PerspectiveCamera}
  76.      */
  77.     var width = window.innerWidth;              //窗口宽度
  78.     var height = window.innerHeight;            //窗口高度
  79.     var k = width / height;                     //窗口宽高比
  80.     var s = 500;                                //三维场景显示范围控制系数，系数越大，显示的范围越大
  81.     //创建相机对象
  82.     const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
  83.     // const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
  84.     camera.position.set(200, 300, 200);             //设置相机位置
  85.     camera.lookAt(scene.position);                  //设置相机方向(指向的场景对象)
  86.     // camera.position.z = 5;
  87.  
  88.     /**
  89.      * 渲染器
  90.      */
  91.     /* WebGLRender */
  92.     const renderer = new THREE.WebGLRenderer();
  93.     renderer.setSize( window.innerWidth, window.innerHeight );
  94.     renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
  95.     document.body.appendChild( renderer.domElement );
  96.  
  97.     /**
  98.      * 手动操作
  99.      * */
  100.     function render(){
  101.         renderer.render(scene,camera);
  102.     }
  103.  
  104.     render()
  105.  
  106.     var controls = new THREE.OrbitControls(camera, renderer.domElement);
  107.     controls.addEventListener('change', render);//监听鼠标、键盘事件
  108. </script>
  109. </body>
  110. </html>

代码中已经添加了很详细的注释，我们主要说一下主要的构成：

  • 1. 场景(Scene)构成： 场景主要分网格模型(Mesh)和光源(Light)。网格模型主要是用来构造场景中几何体结构的，我们可是用各种几何题搭建一个整个的框架结构， 而材料则是更像web中的样式，给几何去构建颜色，透明度等。 另外一个是光源， 光源就相当于我们给上述网格模型来增加明暗程度, 当我们给他增加更强的光源时，它应该就变的更亮了。在3D结构中，不同的光照有不同的明暗阴影效果，才能显示空间立体感。 代码中我们通过创建了相应的网格模型Mesh和光源(Light),添加到Scene的对象来构建
  •  相机(Camera)：相机主要为场景中的机构提供一种视角。场景已经构建为3D的模型，而3D结构是三位的立体场景，人眼直线也看不到每个面的情况，所以这里提供的Camera是提供了一个观看的视角，通过不同的相机的视角，我们可以从不同的位置，不同的视线方向去看到三维立体结构的不同方位，不同距离做产生的效果。这个就像我们实际使用相机差不多，我们要拍一个图片，就需要选择不同的位置和角度。
  • 渲染器(Render):  通过上面的场景和相机我们已经构建出了虚拟的三位立体场景，相机的位置和角度也设置好了，那么剩下就是拍照了。拍照就相当于是在二维的web平面上去展示3D的立体效果在某个视角的一个图片效果。当我们换一个视角，渲染器也不会有不同的投影效果。

参考一下文末资料的渲染过程图：

3. 组件介绍

   我们已经大概知道threejs的一个构建过程和渲染流程。通过上面的示例，整个程序的构成如下图(参考资料图片)：

 在上面的示例中，我们通过上述的这些组件构建了一个threejs的3d应用， 而后续学习也主要是围绕该组件中的各个结构去展开。

4. threejs的动画

threejs中动画分为两种： 1. api提供的周期性动画，2. 基于手动操作的动画

api提供的周期动画主要是按周期，定时的去刷新或者变换某些属性，例如旋转角之类。我们可以自己使用js的定时器实现，也可借助requestAnimationFrame的实现。

基于手动操作的动画，主要是在响应用户操作的使用，根据用户操作结果，来某些属性的变换和刷新。例如上面的示例中，我们使用了一种根据实际用户操作来响应的动作，物体会根据实际拖动去旋转。上面我们使用官方示例提供的一个操作库：

https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js

5. 参考资料

官方文档： https://threejs.org

threejs中文网： Three.js教程

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/521374
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号