threejs引入glb模型展示3d效果

已于 2022-10-25 13:40:36 修改
阅读量1.1k 收藏 1
点赞数
分类专栏： threejs 文章标签： 3d javascript 开发语言
于 2022-10-25 13:37:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28378665/article/details/127068791
版权

threejs引入glb模型展示3d效果

<template>
   <!-- 三维画布 -->
 <div class="textbox">
    <div class="draw" ref="draw" id="three_div"/>
    <div v-if="loadSuccess" class="progress">
      <div class="progress-bar progress-bar-danger progress-bar-striped active" :style="{width:progress}">
        <div class="progress-value">60%</div>
      </div>
    </div>

  </div>
</template>

<script>
import * as THREE from "three"; //三维
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"; //控制器
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js"; //控制器
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js"; //控制器

import { OBJLoader } from "@/utils/OBJLoader";
import { MTLLoader } from "@/utils/MTLLoader";

export default {
 name: 'drawCanvas',
  data () {
    return {
        // 声明渲染器
        renderer:"",
        // 声明相机
        camera:"",
        // 声明场景
        scene:"",
        // 声明几何体
        geometry:"",
        // 声明材质
        material: "",
        // 声明网格
        mesh: "",
        // 声明相机控制器
       controls:"",
       clientWidth:'',
       clientHeight:'',
       //模型组
       group:[],
       progress:0,
       loadSuccess:false
    }
  },
  mounted(){
   this.init()
  },
  methods:{
   //初始化函数
    init() {
     // 初始化渲染器
     this.initRenderer();
     // 初始化场景
     this.initScene();
     // 初始化相机
     this.initCamera();
     //引入模型
     this.initgltfLoader();
    //  this.initOBJLoader()
     //地面
    //  this.addGround()
     // 初始化光源
      this.initLight();
     // 初始化动画
      this.animate();
      // 添加事件
     this.addmeth();
    },
    //初始化渲染器
    initRenderer(){ 
     //实例化渲染器
     this.renderer = new THREE.WebGLRenderer({
        antialias: true,
        alpha: true
      });
     // 设置渲染区域尺寸
     this.renderer.setSize(
        this.$refs.draw.offsetWidth,
        this.$refs.draw.offsetHeight
     );
     // 告诉渲染器需要阴影效果
     this.renderer.shadowMap.enabled = true
     this.renderer.shadowMap.type = THREE.PCFSoftShadowMap
     // 设置背景色
    this.renderer.setClearColor(0x000000, 0) // 设置背景颜色
     this.$refs.draw.appendChild(this.renderer.domElement);
    },
     //初始化场景
    initScene(){
     //实例化场景
      this.scene = new THREE.Scene();
      // this.scene.background = new THREE.Color( 0xe0e0e0 );
      // this.scene.fog = new THREE.Fog( 0xe0e0e0, 20, 100 );
      // 红线是X轴，绿线是Y轴，蓝线是Z轴
      var axesHelper = new THREE.AxesHelper(100);
      // axesHelper.position.set(100,100,100);
      this.scene.add(axesHelper);
    },
    //初始化相机
    initCamera(){
      this.clientWidth = this.$refs.draw.clientWidth
      this.clientHeight = this.$refs.draw.clientHeight
      const k = this.clientWidth / this.clientHeight; //窗口宽高比
      this.camera = new THREE.PerspectiveCamera(45, k, 0.1, 1000);
      // this.camera.lookAt(new THREE.Vector3())
      this.camera.position.set(0, 40, 100);
      // 创建相机控制器
      this.controls = new OrbitControls(this.camera, this.renderer.domElement);
    },
    //添加坐标
    randAxis(axis){
        return axis + 1;    
    },
    //引入外部模型obj
    initOBJLoader(){
        let _this = this
        // var objLoader = new OBJLoader();
        // objLoader.setPath('/static/obj/');//模型路径
        // objLoader.load('afs_15.obj', function(object) {      
        //     _this.scene.add(object);//加入场景
        //     _this.renderer.render( _this.scene, _this.camera );
        // });
            var onProgress = function(xhr) {
                if (xhr.lengthComputable) {
                    var percentComplete = xhr.loaded / xhr.total * 100;
                    // console.log(percentComplete)
                }
            };
            var onError = function(xhr) {
                console.log(xhr)
            };

            var mtlLoader = new MTLLoader();					// 模型1
            mtlLoader.setPath('/static/obj/');							// obj mtl文件的目录
            mtlLoader.load('96.mtl', function(materials) {
                materials.preload();
                var objLoader = new OBJLoader();
                objLoader.setMaterials(materials);
                objLoader.setPath('/static/obj/');
                objLoader.load('96.obj', function(object) {
                    object.position.x = -10;
                    object.position.y = 0;
                    object.position.z = 0;
                    object.scale.set(0.1, 0.05, 0.1);		// 长 高 宽 比例
                    _this.scene.add(object);
                }, onProgress, onError);
            });
    },
     //引入外部模型 gltf
     initgltfLoader(){
       const gltfLoader = new GLTFLoader();
       const dracoLoader = new DRACOLoader();
       dracoLoader.setDecoderPath('/static/draco/gltf/');// 这个是加载draco算法，这样才能解析压缩后的gltf模型格式.
       gltfLoader.setDRACOLoader( dracoLoader );
       const connture = new THREE.TextureLoader().load("/static/glb/white.jpg");
       const blue2 = new THREE.TextureLoader().load("/static/glb/blue48.png");
       const num = '192'
       gltfLoader.load("/static/glb/AFS"+num+".glb", (gltf) => {//SimpleSkinning  afs_mini
        let model = gltf.scene;
        console.log(model)
        model.scale.set(1,1, 1); //缩放
        model.position.set(0, -30, 0)
        // model.position.copy(new THREE.Vector3(100, -50, -40)); //基于原点的位置，没有需求改为0即可
         const portGroup = model.children && model.children[0].children.find(item => item.name === 'PORT_GROUP')

        
        if(num == '24'){
          portGroup.children.forEach(item => {
            item.children.forEach(i => {
              i.material = new THREE.MeshPhongMaterial({color: 0xFFFFFF});
              i.material.map = blue2
            })
          })
        } else {
          portGroup.children.forEach(item => {
            item.children.forEach(i => {
              i.material = new THREE.MeshPhongMaterial({color: 0xFFFFFF});
              i.material.map = connture
            })
          })
        }
        console.log(portGroup)
        this.scene.add(model);
       }, (xhr) => {
          const percentage = Math.floor(xhr.loaded / xhr.total * 100)
          this.progress = percentage + '%'
        });
     },
    //添加光源
    initLight() {
      // 平行光源
      // const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.7 );//模拟远处类似太阳的光源
      // directionalLight.color.setHSL( 0.1, 1, 0.95 );
      // directionalLight.position.set(50, 100, 100); 
      // this.scene.add(directionalLight)
      

      //全局环境光 
      const ambientLight = new THREE.AmbientLight( '#ffffff', 0.1 );
      this.scene.add( ambientLight );
      // 点光源
      const pointLight = new THREE.PointLight( '#ffffff', 1 );
      pointLight.position.set(100, 300, 300); 
      this.camera.add( pointLight );

      this.scene.add( this.camera );
    },
    //地面
    addGround(){
      const mesh = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
      mesh.rotation.x = - Math.PI / 2;
      this.scene.add( mesh );

      const grid = new THREE.GridHelper( 200, 40, 0x000000, 0x000000 );
      grid.material.opacity = 0.2;
      grid.material.transparent = true;
      this.scene.add( grid );

    },
    //运行动画
    animate(){
     requestAnimationFrame(this.animate); //循环调用函数
     // 刷新相机控制器
     this.controls.update();
     this.renderer.render(this.scene, this.camera);
    },
    // 添加全局方法
    addmeth() {
      // 监听窗口尺寸变化
      window.addEventListener("resize", this.changeSize, false);
      window.addEventListener("click", this.portClick, false);
    },
    // 监听尺寸变化
    changeSize() {
      // 重置渲染器输出画布canvas尺寸
      this.renderer.setSize(
        this.$refs.draw.offsetWidth,
        this.$refs.draw.offsetHeight
      );
      var k = this.$refs.draw.offsetWidth / this.$refs.draw.offsetHeight; //窗口宽高比
      //重置相机投影的相关参数
      this.camera.aspect = k;
      // 如果相机的一些属性发生了变化，
      // 需要执行updateProjectionMatrix ()方法更新相机的投影矩阵
      this.camera.updateProjectionMatrix();
    },
    //点击端口
    portClick(event){
      //保持原事件
      event.preventDefault();
      this.getIntersects(event.layerX, event.layerY)
    },
    getIntersects(layerX, layerY) {
      // 建立射线
      const raycaster = new THREE.Raycaster()
      // 建立一个空物体
      const mouseVector = new THREE.Vector3()
      const x = (layerX / this.clientWidth) * 2 - 1
      const y = -(layerY / this.clientHeight) * 2 + 1
      mouseVector.set(x, y, 1)
      raycaster.setFromCamera(mouseVector, this.camera)
      raycaster.params.Line.threshold = 0.01
      let intersections = []
      intersections = raycaster.intersectObjects(this.scene.children,true);
      let selectedObject = null, // 被选中的模型
      origin = null  // 被选中的模型与射线的交点，用于确定挂牌位置
      console.log(intersections)

      if(intersections.length>0){
        for ( var i = 0; i < intersections.length; i++ ) {
          // 遍历线相交模型
          if(intersections[i].object instanceof THREE.Mesh){
            // 取第一个（距离最近）的相交Mesh类型模型
            // 如果要排除地面等参照模型，也可在此处添加判断条件
            selectedObject = intersections[i].object
            origin = intersections[i].point
            break
          }
        }
      }
      // console.log(selectedObject, origin)
      // 存在与射线相交模型
      if(selectedObject){
          this.outlineObj(selectedObject)
      }
    },

    outlineObj (selectedObjects) {
      console.log(selectedObjects)
      const occupy = new THREE.TextureLoader().load("/static/glb/occupy.jpg");
      if(selectedObjects.parent.name.includes('Port_')){
        selectedObjects.parent.children.forEach(item => {
          item.material.map = occupy
        })
      }
    },
  }

}

</script>

<style lang='less' scoped>
.textbox{
  width:1000px;
  height:1000px;
  position: relative;
}
.draw {
  width: 100%;
  height: 100%;
}
//进度条
.progress {
    height: 17px;
    background: #262626;
    padding: 3px;
    overflow: visible;
    border-radius: 20px;
    border-top: 1px solid #000;
    border-bottom: 1px solid #7992a8;
    margin-top: 50px;
    position: absolute;
    top:45%;
    left:40%;
    width: 300px;

    .progress-bar {
        border-radius: 20px;
        position: relative;
        animation: animate-positive 2s;
        float: left;
        width: 0;
        height: 100%;
        font-size: 12px;
        line-height: 20px;
        color: #fff;
        text-align: center;
        background-color: #2962f9;
        -webkit-transition: width .6s ease;
        -o-transition: width .6s ease;
        transition: width .6s ease;

    }

    .active {
        animation: reverse stripes 0.40s linear infinite, animate-positive 2s;
    }

    .progress-value {
        display: none;
        padding: 3px 7px;
        font-size: 13px;
        color: #fff;
        border-radius: 4px;
        background: #191919;
        border: 1px solid #000;
        position: absolute;
        top: -40px;
        right: -10px;
    }

    .progress-value:after {
        content: "";
        border-top: 10px solid #191919;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        position: absolute;
        bottom: -6px;
        left: 26%;
    }
}

.progress-bar-striped {
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    -webkit-background-size: 40px 40px;
    background-size: 40px 40px;
}

@-webkit-keyframes stripes {
    from {
        background-position: 40px 0
    }

    to {
        background-position: 0 0
    }
}

@-o-keyframes stripes {
    from {
        background-position: 40px 0
    }

    to {
        background-position: 0 0
    }
}

@keyframes stripes {
    from {
        background-position: 40px 0
    }

    to {
        background-position: 0 0
    }
}

@-webkit-keyframes animate-positive {
    0% {
        width: 0;
    }
}

@keyframes animate-positive {
    0% {
        width: 0;
    }
}

</style>
古月水告
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于Threejs实现glb三维模型的预览
web13595805947的博客
02-23 1478
本文重点介绍如何基于Threejs对glb三维模型进行预览，关于threejs和三维建模等不在本文讨论之内，想详细了解threejs和glb三维模型的，请自行百度学习。 言归正传，使用threejs进行三维模型展示，通常需要依赖以下组件： Threejs+OrbitControls+GLTFLoader+WebGL 以上组件可以从threejs的官网获取，下载后的目录如下所示： 第一步、创建html，引入相关的js资源，代码如下： <html lang="en"> <head>
ThreeJS加载glb模型实用案例
01-26
ThreeJS加载glb模型实用案例，抽取官网的例子。
Three.js加载glb模型（持续更新）
qq_45020145的博客
06-18 761
使用three.js加载glb模型
three.js 加载glb格式、gltf格式模型
热门推荐
dmyc1027的博客
05-21 1万+
本文提供了在three.js中实现：将glb或gltf格式的模型加载并显示在页面中 的方法 以下将提供两种情况下的加载步骤： 一、原生JS中，加载模型： 注意，欲通过import导入文件，需设置<script type="module"> import {} from "./three/build/three.js"; import { GLTFLoader } from "./three/examples/jsm/loaders/GLTFLoader.js";
Threejs加载外部glb文件
qq_37772059的博客
04-19 4042
1.页面html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>pb展示</title> <!--引入three.js三维引擎--> <scrip
Threejs显示glb模型线框效果
05-17
本例子加载glb文件，显示一个房子的模型的线框。 用traverse遍历模型里的所有子对象，如果是网格对象用child.material.wireframe = true;使其显示线框。 相关技术英文网站搜索关键字：three.js model wireframe
threejs操作glb，gltf格式3D模型案例，包含点击部位高亮操作
08-24
threejs操作glb，gltf格式3D模型案例，包含点击部位高亮操作，控件提示等，也可直接引入到vue项目中使用
three官网glb模型.rar
06-11
【标题】"three官网glb模型.rar" 是一个包含3D模型资源的压缩包，源自three.js官方网站。Three.js是一个非常流行的JavaScript库，用于在Web浏览器中创建和展示3D图形。GLB是3D模型的一种高效、统一的文件格式，它...
vue2+three.js+blender（实现3d 模型引入并可点击效果）
09-13
3d模型
vue使用three.js引入外部obj，mtl模型.zip
05-31
在Vue.js应用中集成Three.js库来加载外部的3D模型，如.obj和.mtl文件，是一种常见的增强网页3D视觉效果的方法。Three.js是一个强大的JavaScript库，它为WebGL提供了一个简单易用的接口，使得在浏览器中创建复杂的3D...
three.js加载glb模型
宏斌的博客
01-20 3961
纹理 需要 const texture = textureLoader.load(url); texture.flipY = false; texture.encoding = THREE.sRGBEncoding; 加载 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js' import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'
【threejs教程6】threejs加载glb模型文件（小米su7）
c_wengy的博客
04-22 2538
在threejs中我们经常需要引入外部模型文件，本文将演示如何加载外部glb模型文件，以小米su7模型为例，本文只做简单加载和车轮动画。更多功能将在后面文章中讲解。如需要模型文件资源可站内私信。
threejs引入glb格式模型展示
古月水告的博客
09-28 3249
本文介绍threejs引入glb格式模型展示 1.鼠标事件交互 2.局部放大效果 3.端口状态渲染 4.点击鼠标改变端口状态
three.js加载3D模型(glb/gltf/fbx)
DP323的博客
05-14 1万+
three.js加载3D模型(glb/gltf/fbx) 一、理解three: 1.一个可以在某个3D建模软件打开的东西，通过某种方案在浏览器中打开； 2.不要试图手动去创建3D图形，当然比较闲的话可以这样操作， 3.把three当作一个3D模型播放器，在播放器里可以对模型做一些操作：调色调光，调整坐标，切换视角，播放模型中的动画…； 4.某个建模软件(3dMax…)把已经做好的模型导出了模型文件(ojb,glb,gltf,fbx等格式),通过某个可支持此格式的Loader，最终渲染到场景里 ,就像web
ThreeJS - 封装一个GLB模型展示组件（TypeScript）
m0_64130892的博客
10-02 2466
最近基于Three.JS，使用class封装了一个GLB模型展示，支持TypeScript、支持不同框架使用，具有多种功能。最主要的操作，其实就是下面这两步，做完就显示模型出来了，其它就是可视化的配置了。const modelShow = new GLBModel(node) //创建实例//加载模型。
three.js基础案例day05——加载gltf(glb)模型
qq_46056472的博客
12-08 2951
今天主要学习如何加载glb模型，这个案例主要用到的相关知识点：加载glb模型，动画的使用、阴影和gui控制面板。
threejs封装加载 .glb 格式模型，修改贴图
前端
11-11 3541
threejs封装加载 .glb 格式模型，修改贴图
Three.js 加载glb模型
最新发布
this__valve的博客
07-16 403
引入资源使用。
threejs加载glb模型
06-06
Threejs是一款基于WebGL渲染引擎的JavaScript库，它可以在web端展示3D模型，其中加载glb模型是其中一种常见方式。 首先，需要在html文件中引入threejs的js文件和相关加载器 。然后，创建一个场景、相机和渲染器。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值