vue中使用threejs的一些问题，THREE上没有OrbitControls

记录一下在vue中使用threejs遇到的一些问题

1、three对象身上没有OrbitControls

最简单的方法

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

其他方案

使用 @three-ts/orbit-controls， ts项目也能正常使用
安装

npm install --save @three-ts/orbit-controls

使用

import * as THREE from 'three';
import { OrbitControls } from '@three-ts/orbit-controls';const camera = new THREE.SomeCamera(...);
const controls = new OrbitControls(camera, renderer.domElement);
// 照常使用即可

也可以直接看npm原文

在此之前也试过其他包， three-orbit-controls， three-orbitcontrols-ts
但是时间都比较久了，我没成功。

还有其他方法https://github.com/mrdoob/three.js/blob/master/examples/js/controls/OrbitControls.js 下载OrbitControls源码然后自己改改，并不复杂(亲测有效)

下载后可以看见，大致内容就是一个立即执行函数，并向THREE添加了2个对象，该文件没有引入其他文件

文件用到了THREE, 所以先在文件头引入 THREE

import * as THREE from 'three'

删除外包立即执行函数（首行，尾行）
删除（使用ts时不删除会有警告）

1107行  THREE.MapControls = MapControls
1108行 THREE.OrbitControls = OrbitControls

末尾导出文件中定义的对象，MapControls， OrbitControls

export { MapControls, OrbitControls }

使用：import { OrbitControls } from './OrbitControls.js'

vue中使用threejs的一些问题，THREE上没有OrbitControls相关推荐

vue中slot（插槽）详解，slot、slot-scope和v-slot
slot是什么 slot,也称插槽,可以类比为插卡式的FC游戏机,游戏机(子组件)暴露卡槽(插槽)让用户插入不同的游戏磁条(自定义内容),游戏机会读取并加载磁条里的游戏 Vue的slot,是组件的一块 ...
vue中{active: isActive} 是什么意思？
vue中{active: isActive} 是什么意思? 上面的语法表示 active 存在与否将取决于 : 后面的isActive的真值.
threejs在vue中帧数低的问题
vue会对threeJs的变量进行双向绑定导致渲染效率极大幅度降低,解决方案是是写在外部js文件中,渲染效率大幅度提高. 更好的做法是那threejs写在js文件里导入,vue页面只提供一个canva ...
在vue中使用three.js
vue中使用three.js vue 安装: npm install --save three 在要使用的页面中引入three.js import * as Three from 'three' 参考 ...
高德地图中加载three.js（vue中）（封装
这几天公司有一个要结合高德地图的智慧园区的项目(大致就是在3d地图中加载自己的three.js模型) 1.首先要引入高德地图官方文档给出来的引用方法 <template><div ...
canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...
怎么将vue模板转换为html,vue中自定义html文件的模板
如果默认生成的 HTML 文件不适合需求,可以创建/使用自定义模板. 一是通过 inject 选项,然后传递给定制的 HTML 文件.html-webpack-plugin 将会自动注入所有需要的 C ...
props写法_简单理解vue中Props属性
本文实例为大家解析了vue中Props的属性,供大家参考,具体内容如下使用 Props 传递数据组件实例的作用域是孤立的.这意味着不能并且不应该在子组件的模板内直接引用父组件的数据.可以使用 pr ...
vue ts 设置tslint提示_Typescript 在 Vue 中的实践(包含2.x、3.x)
1 使用 typescript 的优势聊到 ts 时有一个不能规避的问题:为什么要使用 ts ,相比 js 有什么优势吗?下面我从两个方面试着回答一下这个问题: 1.1 项目开发时的便利避免低级 ...

vue中使用threejs的一些问题，THREE上没有OrbitControls

记录一下在vue中使用threejs遇到的一些问题

1、three对象身上没有OrbitControls

最简单的方法

其他方案

还有其他方法https://github.com/mrdoob/three.js/blob/master/examples/js/controls/OrbitControls.js 下载OrbitControls源码然后自己改改，并不复杂(亲测有效)

vue中使用threejs的一些问题，THREE上没有OrbitControls相关推荐

最新文章

热门文章