【3D】VUE中使用新版本three.js

·  阅读 138

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第12天,点击查看活动详情

前言

上一篇笔记《VUE中使用three.js>通过OrbitControls控制模型>通过GLTFLoader导入外部模型》(juejin.cn/post/711223…)

引入three.js相关包那是相当的麻烦,各种引入方式和配置,还有各种报错和提示。

新版本的three.js对其变量的引入和暴露进行了优化,可以很方便的从jsm文件夹下引入相关包了。无需进行一些七七八八的配置,详见本文。

需要注意的是,从npm上下载安装的three包,不是three-js,毕竟这玩意4年没更新了,是如下包:

www.npmjs.com/package/thr…

一、新老版本引入使用对比

1、原版本例子

引入three.js、导入OrbitControls的使用:

import * as THREE from 'three'
import OrbitControls from 'three/examples/js/controls/OrbitControls'
controls = new OrbitControls(camera, renderer.domElement)
复制代码

配置webpack.base.conf.js文件

{
  test: require.resolve("three/examples/js/controls/OrbitControls"),
  use: "imports-loader?THREE=three"
},
{
  test: require.resolve("three/examples/js/controls/OrbitControls"),
  use: "exports-loader?THREE.OrbitControls"
},
复制代码

2、新版本例子

当前使用新three.js版本号:

"three": {
      "version": "0.112.1",
      "resolved": "https://registry.npmjs.org/three/-/three-0.112.1.tgz",
      "integrity": "sha512-8I0O74hiYtKl3LgDNcPJbBGOlpekbcJ6fJnImmW3mFdeUFJ2H9Y3/UuUSW2sBdjrIlCM0gvOkaTEFlofO900TQ=="
    },
复制代码

引入three.js、导入OrbitControls的使用:

import * as THREE from 'three'
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
controls = new OrbitControls(camera, renderer.domElement)
复制代码

再也不用担心七七八八的配置了,真棒!!

二、简单使用步骤

通过OrbitControls控制模型>通过GLTFLoader导入外部模型

1、安装three包

npm install three --save // 安装最新版本

2、导入THREE对象

import * as THREE from 'three' // 必须用 * as 否则找不到对象

3、引用OrbitControls.js进行旋转缩放拖动控制

从jsm中引入包

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

创建OrbitControls对象予以控制

controls = new OrbitControls(camera, renderer.domElement)

4、通过GLTFLoader导入外部模型

从jsm中引入包

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'

使用GLTFLoader加载新模型

let loader = new GLTFLoader()
loader.load('/static/3d/' + name + '.glb', function (obj) {
  obj.scene.name = name
  if (scene !== null) {
    scene.add(obj.scene)
  }
}, function (xhr) {
  // console.log(xhr.loaded, 'loading')
  console.log((xhr.loaded / xhr.total * 100) + '% loaded')
}, function (error) {
  console.error(error, 'load error!')
})
复制代码
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改