专栏首页前端之攻略.glb格式的模型怎么在three.js中展示

.glb格式的模型怎么在three.js中展示

3D软件中导出的格式一般有.obj 和.glb ,下面是blender 2.8.2 生成模型并在three.js中展示的流程

一、先创建一个图形,选择UV Editing 进行uv展开,把UV展开的图形导出UV布局图,然后用ps进行处理,再导入处理好的图进行贴图,uv贴图可以选择上面的shading,再选择下面的添加-纹理-图片纹理,然后连到基础色

UV贴图后导出 .glb 格式

二、由于是在vue中使用把导出的文件放到public/models/cylinder.glb

三、代码实现,首先要引入GLTFLoader

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"
export default {
  name: "ThreeTest",
  data() {
    return {};
  },
  mounted() {
    // this.getData();
    this.timer = null;
    this.myReq = null;
    this.container;
    this.scene;
    this.camera;
    this.renderer;
    this.labelRenderer;
    this.controls;
    this.initScene();
    this.initCamera();
    this.initRender();
    this.initModel();
    this.initControls();
    this.initLight()
    this.animate();
    // this.render()
    window.onresize = this.onWindowResize;
  },


  methods: {
    initScene() {
      this.scene = new THREE.Scene();
    },
    initCamera() {
      this.container = document.getElementById("container");
      this.camera = new THREE.PerspectiveCamera(
        70,
        this.container.clientWidth / this.container.clientHeight,
        1,
        1000
      );
      console.log(this.camera);
      this.camera.position.z = 5; //z设置小写会使图像变形小
    },
    initRender: function () {
      this.renderer = new THREE.WebGLRenderer({ antialias: true });
      this.renderer.setSize(
        this.container.clientWidth,
        this.container.clientHeight
      );
      this.container.appendChild(this.renderer.domElement);
    },

    initLight() {
      this.scene.add(new THREE.AmbientLight(0xffffff));
      this.light = new THREE.DirectionalLight(0xffffff);
      this.light.position.set(0, 0, 50);
      this.scene.add(this.light);
    },
    initModel() {
       let loader = new GLTFLoader()
       let gltScene
       loader.load("models/cylinder.glb",(gltf)=>{
         console.log(gltf)
         gltf.scene.position.set(0,0,0)
         this.scene.add(gltf.scene)
       })
    },
    initControls() {
      //controls = new THREE.OrbitControls( camera, renderer.domElement );
      this.controls = new OrbitControls(
        this.camera,
        this.labelRenderer.domElement
      );

      // 如果使用animate方法时,将此函数删除

      //controls.addEventListener( 'change', render );

      // 使动画循环使用时阻尼或自转 意思是否有惯性

      this.controls.enableDamping = false;

      //动态阻尼系数 就是鼠标拖拽旋转灵敏度

      //controls.dampingFactor = 0.25;

      //是否可以缩放

      this.controls.enableZoom = true;

      //是否自动旋转

      this.controls.autoRotate = false;

      //设置相机距离原点的最远距离

      this.controls.minDistance = 1;

      //设置相机距离原点的最远距离

      this.controls.maxDistance = 10;

      //是否开启右键拖拽

      this.controls.enablePan = false;
    },
    render() {
      this.renderer.render(this.scene, this.camera);
      this.labelRenderer.render(this.scene, this.camera);
    },
    onWindowResize() {
      this.camera.aspect = window.innerWidth / window.innerHeight;

      this.camera.updateProjectionMatrix();

      this.render();

    },
    animate() {
      this.render();
      this.myReq = requestAnimationFrame(this.animate);
    },
  }
};
</script>

注意:要开启灯光,否则会显示不出模型

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Element Tabs 标签页 展示Echart 并随窗口变化自适应

    1、如何在一个div中展示不同的图表  (点击tab时为Chart组件赋值,并传给子组件,子组件监听数据变化并在 $nextTick 中重新绘制表格)

    tianyawhl
  • threejs 场景切换 优化性能

    是实现2个场景的定时切换,由于是用在大屏系统,需要浏览器一直能正常运行,不能运行一段时间卡死

    tianyawhl
  • vue 中使用threejs

    tianyawhl
  • 干货 | 用uni-app制作迷你PS小程序

    ? ? 该文章主要讲解最近基于 uni-app 框架编写的集图文拖拽等多方位编辑、油墨电子签名、开放式海报于一体的小程序的制作思路和实现代码。 1、完整源码链...

    腾讯NEXT学位
  • 寿司开卖:实现寿司制作特效和音响特效

    本节我们将继续上一节完成若干个小功能。首先要完成的是,当客户动画在主页面出现时,它左上角会冒泡,显示它想购买何种寿司,此时玩家可以点击左下角面板中各种元素,组合...

    望月从良
  • Java基础:五、this关键字、static含义(4)

    如果只有一个peel()方法,如何知道是被a还是b所调用的呢?因为编译器会把“所操作对象的引用”作为第一次参数传递给peel()。所以上述两个方法的调用就变成了...

    桑鱼
  • 闪屏还可以这样玩

    对于多数应用来说,在进入APP的时候使用短暂的闪屏广告来吸引用户是很常见的一个场景。但随着这种模式的频繁应用,越来越多的用户会感到审美疲劳,甚至不看就跳过闪屏了...

    林焕彬
  • HTML5 Canvas炫酷的火焰风暴动画

    越陌度阡
  • 云终端系列(一)—— 实时音视频Web端接入体验(Vue基础音视频通话篇)

    这个系列呢,主要给各位观众老爷看看目前有较大趋势的SaaS应用的SDK在各种主流Web终端的使用姿势和异常分析,如果想要纯粹了解开发的或者云原生,云开发的可以去...

    楚歌
  • 确认过眼神,你是喜欢Stream的人

    摘要:在学习Node的过程中,Stream流是常用的东东,在了解怎么使用它的同时,我们应该要深入了解它的具体实现。今天的主要带大家来写一写可读流的具体实现,就过...

    用户2145235

扫码关注云+社区

领取腾讯云代金券