vue中使用threejs仿iView官网大波浪特效

Posted 2023-05-10

参考技术A Threejs可以理解为是一个web端三维引擎（渲染模型，数据可视化），如果有接触过UnralEngine 4(虚幻四)等游戏引擎的，应该很容易理解在一个三维场景必备的每一个部件（场景，渲染器，网格模型，材质，光源，色相机）。

ThreeJs/仿vue框架

Threejs可以理解为是一个web端三维引擎（渲染模型，数据可视化），如果有接触过UnralEngine 4(虚幻四)等游戏引擎的，应该很容易理解在一个三维场景必备的每一个部件（场景，渲染器，网格模型，材质，光源，色相机）。

      基础的知识目前先跳过，请自行到官网、论坛或者查阅相关资料。

因为插件的原因，threejs引入目前不推荐模块化，如果是在vue-cli等框架开发，直接在index.html全局引入。

先看架子：

  初始模板整合比较多的模块。

【

    物理场景/普通场景；

    检查浏览器兼容性；

    环境光源；

    平行光源；

    阴影控制；

    轨道摄像机；

    gui组件控制;

    xyz坐标轴;

    扩展插件;

    循环渲染函数动态插入;

】

下面是demo;

 new ThreeJs({ el: this.$refs["ThreeJs"], options: { // width:500, // height:300, cameraLookAt:{x:0, y:0, z:0}, cameraPosition:{x:-25,y:30,z:25}, browserCheck: true, backgroundColor: "#EEEEEE", alpha: true, antialias: true, shadowMapEnabled: false, physics: true }, data() { return {}; }, methods: { // 物理场景测试 physicsTest:function () { // 物理场景 let ground = new Physijs.BoxMesh( new THREE.CubeGeometry(100, 2, 100), new THREE.MeshPhongMaterial({ restitution: 0.5, friction: 0.5 }), 0 // 固定不动 ); this.scene.add(ground);
 let ground2 = new Physijs.BoxMesh( new THREE.CubeGeometry(10, 10, 10), new THREE.MeshPhongMaterial({ restitution: 0.5, friction: 0.5 }), 1 // 重力控制 ); ground2.position.set(0, 100, 0); this.scene.add(ground2); }, // 正常场景测试 normalTest:function () { let planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1); let planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff}); let plane = new THREE.Mesh(planeGeometry, planeMaterial); plane.receiveShadow = true; plane.rotation.x = -0.5 * Math.PI; plane.position.x = 15; plane.position.y = 0; plane.position.z = 0; this.scene.add(plane);
 let cubeGeometry = new THREE.BoxGeometry(4, 4, 4); let cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000}); let cube = new THREE.Mesh(cubeGeometry, cubeMaterial); cube.castShadow = true; cube.position.x = -4; cube.position.y = 3; cube.position.z = 0; this.scene.add(cube);
 let sphereGeometry = new THREE.SphereGeometry(4, 20, 20); let sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff}); let sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); sphere.position.x = 20; sphere.position.y = 0; sphere.position.z = 2; sphere.castShadow = true; this.scene.add(sphere); let step = 0; this.setRenderFun('transform',()=>{ cube.rotation.x += 0.02; cube.rotation.y += 0.02; cube.rotation.z += 0.02; step += 0.03; sphere.position.x = 20 + ( 10 * (Math.cos(step))); sphere.position.y = 2 + ( 10 * Math.abs(Math.sin(step))); }) } }, async mounted() { // this.physicsTest() this.normalTest(); } }) .initStats(this.$refs["Stats"]) .setOrbitControlsCamera() .GuiControl() .ambient({ gui: true, color: "#0c0c0c", name: "ambient" }) .directional({ gui: true, helper: false, color: "#ffffff", Shadow: false, position: { x: -40, y: 60, z: -10 } }) .expandPlugin({ // mmd: MMD }) .script();

  

  1：el ：挂载的元素 

  2：options: 

            width/height : 固定canvas宽高，如果不填默认全屏，且随屏幕拉伸改变。

            cameraLookAt : 摄像机朝向

            cameraPosition: 摄像机位置

            browserCheck:  是否检查浏览器兼容

            backgroundColor: 背景颜色

            alpha: 是否透明

            antialias: 是否开启抗锯齿

            shadowMapEnabled: 是否开始全局阴影

            physics: 是否使用全局物理场景

  3：data（）{}     类似vue里面的data，存储变量。在methods/mounted可通过this获取

                         scene,camera,render, sceneManage

  4：methods: {}   类似vue里面的methods

  5：mounted(){}  类型vue里面mounted 脚本的入口  ！！！必须调用this.script();

  内置方法

  【所有方法都会返回this（可以链式调用）】

  this.script();        :  执行脚本必须放在最后 触发mounted()函数

  this.initStats(el)  ：显示fps插件 el：挂载元素

  this.setOrbitControlsCamera()  设置成轨道摄像机

  this.GuiControl()  ：加载Gui插件

  this.ambient({gui,color,name})  : 加载环境光

                          gui: 是否把控制项显示在gui插件，必须要先执行 this.GuiControl()函数

                          color:环境光颜色

                          name: 这个环境光对象的名称在this.sceneManage 对象写入场景管理器内

 this.directional({gui,color,name,Shadow,position,helper,intensity}) : 加载平行光

                          gui:同上

                          color：同上

                          name:同上

                          Shadow：是否显示阴影

                          position：可以理解为太阳的位置

                          helper ：是否启用光源辅助，光源可视化  

                          intensity：光源强度（0-1）

this.expandPlugin({ mmd: class }) 插件拓展，在class类注入camera,scene,render对象

this.setAxes(10) 显示xyz轴辅助

this.setRenderFun(key,fun)  往循环渲染函数动态插入

有不懂或有新的提议可以留言！

下期更新【mmd插件】    下下期更新 gpu粒子转移系统