Blender导出three.js模型，three.js引入其模型

2021-01-18

Blender导出three.js模型.GLB或.GLTF数据，three.js引入其模型.GLB或.GLTF数据。
建议使用glTF（GL传输格式）

Blender安装

安装包下载地址：https://www.blender.org/download/

建模并导出.gltf数据

文件 > 导出 > glTF > 位置+命名+格式 > 导出

查看模型

Blender软件等，
网站glTF Viewer：https://gltf-viewer.donmccurdy.com/

three.js导入模型

注意：根据模型的材质判断是否需要灯光，有些模型需要反射才可见。

引入GLTFLoader

GLTFLoader模块用于导入外部GLTF模型

下载安装imports-loader and exports-loader
用于向一个模块的作用域内注入变量，以及从模块中导出变量。

1	npm install imports-loader exports-loader --save-dev

配置webpack.base.conf.js文件
在其module中的rules[]中添加：

{
    test: require.resolve('three/examples/jsm/loaders/GLTFLoader'),
    use: 'imports-loader?THREE=three'
},
{
	test: require.resolve('three/examples/jsm/loaders/GLTFLoader'),
	use: 'exports-loader?THREE.GLTFLoader'
}

引入GLTFLoader

import { GLTFLoader } from ‘three/examples/jsm/loaders/GLTFLoader’

同理引入OrbitControls

OrbitControls模块用于场景控制

配置webpack.base.conf.js文件

{
    test: require.resolve('three/examples/jsm/controls/OrbitControls'),
    use: 'imports-loader?THREE=three'
},
{
	test: require.resolve('three/examples/jsm/controls/OrbitControls'),
	use: 'exports-loader?THREE.OrbitControls'
}

引入OrbitControls

import { OrbitControls } from ‘three/examples/jsm/controls/OrbitControls’

若程序找不到GLTFLoader、OrbitControls，则删除webpack.base.conf.js的相应配置，只要实现文件的直接引入即可
若没有three/examples，则下载安装

1	cnpm i import-three-examples --save-dev

导入外部模型

引入OrbitControls使用，直接new

this.controls = new OrbitControls(this.camera, this.renderer.domElement)

GLTFLoader使用，直接new

let loader = new GLTFLoader()

导入外部模型
一定定义let self = this，直接使用this.scene不行。
若使用webpack打包，glb模型一定放static文件夹或者public文件夹下。

let self = this
loader.load('../../static/glTF/test.gltf', function (gltf) {
    self.scene.add(gltf.scene)
}, function (xhr) {
    console.log((xhr.loaded / xhr.total * 100) + '% loaded')
}, function (error) {
    console.error(error, 'load error!')
});

Vue引入外部模型code

<template>
<body></body>
</template>

<script>
import * as Three from 'three'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

export default {
  name: 'Test',
  data () {
    return {
      scene: null,      // 场景
      camera: null,     // 相机
      renderer: null,   // 渲染器
      controls: null    // 控制器
    }
  },
  methods: {
    init: function () {
      // 新建空白场景
      this.scene = new Three.Scene()

      // 新建透视相机
      this.camera = new Three.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000)
      //设置相机位置
      this.camera.position.set(5, 0, 10)
      // 相机指向原点
      this.camera.lookAt(new Three.Vector3(0, 0, 0))

      // 设置灯光，环境光
      let light = new Three.AmbientLight(0xffffff)
      this.scene.add(light)

      // 初始化渲染器
      this.renderer = new Three.WebGLRenderer({ antialias: true })
      this.renderer.setSize(window.innerWidth, window.innerHeight)
      document.body.appendChild(this.renderer.domElement);

      // 初始化控制器
      this.controls = new OrbitControls(this.camera, this.renderer.domElement)

      // 加载外部模型
      // 模型文件放在静态路径文件夹
      let loader = new GLTFLoader()
      let self = this
      loader.load('../../static/glTF/test.gltf', function (gltf) {
        // 添加场景
        self.scene.add(gltf.scene)
      }, function (xhr) {
        console.log((xhr.loaded / xhr.total * 100) + '% loaded')
      }, function (error) {
        console.error(error, 'load error!')
      });
    },
    animate: function () {
      // 动画系统
      requestAnimationFrame(this.animate)
      this.renderer.render(this.scene, this.camera)
    }
  },
  mounted () {
    this.init()
    this.animate()
  }
}
</script>
<style scoped>
body {
  overflow: hidden;
}
</style>

jsonContent: meta: false pages: false posts: title: true date: true path: true text: false raw: false content: false slug: false updated: false comments: false link: false permalink: false excerpt: false categories: false tags: true