vue-3d-model
vue.js 3D model viewer component, based on threejs, inspired by model-tag
一个展示三维模型的Vue组件，支持模型操作和模型点击事件，能自动缩放模型到合适大小并校正偏移，支持多种格式的模型。
Example
Install
using npm
-
vue-3d-model：一个展示三维模型的 Vue 组件
2020-05-22 10:55:25vue-3d-model vue.js 3D model viewer component, based on threejs, inspired by model-tag 一个展示三维模型的Vue组件，支持模型操作和模型点击事件，能自动缩放模型到合适大小并校正偏移，支持多种格式的模型。 ...展开全文npm install vue-3d-model --saveOr using script tag for global use
<script src="https://unpkg.com/vue-3d-model/dist/vue-3d-model.min.js"></script>Or Download vue-3d-model.min.js and include it in your html
Usage
<template> <model-obj src="example/models/obj/LeePerrySmith.obj"></model-obj> </template> <script> import { ModelObj } from 'vue-3d-model' export default { components: { ModelObj } } </script>Or
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <div id="app"> <model-obj src="example/models/obj/LeePerrySmith.obj"></model-obj> </div> <script src="vue.js"></script> <script src="vue-3d-model.min.js"></script> <script> new Vue({ el: '#app' }) </script> </body>Documents
props
prop type default example src string - './exapmle.obj' width number - 300 height number - 300 position object { x: 0, y: 0, z: 0 } { x: 100, y: 20, z: -10 } rotation object { x: 0, y: 0, z: 0 } { x: Math.PI / 2, y: 0, z: - Math.PI / 4 } scale object { x: 1, y: 1, z: 1 } { x: 2, y: 2, z: 3 } lights array - backgroundColor number/string 0xffffff 0xffffff/'#f00'/'rgb(255,255,255)' backgroundAlpha number 1 0.5 controllable boolean true true/false events
event on-mousedown on-mousemove on-mouseup on-click on-load on-progress on-error Model Format Support
model format component tag obj <model-obj> json <model-three> stl <model-stl> dae <model-collada> ply <model-ply> gltf(2.0) <model-gltf> Browser Support
Modern browsers and IE 11.
You can click on this for more information
TODO List
- Support for more model formats
- Animation
- Post-processing
LICENSE
MIT
-
vue3自定义组件v-model和vue2的用法比较
2020-12-07 17:13:09文章目录vue3自定义组件v-model实例vue3自定义v-model的优点（较vue2） vue3自定义组件v-model实例 注意：我这里是typescript的语法，只是有个别地方和js相比要确定一下类型，比如函数传参时，和使用input元素的...展开全文vue3自定义组件v-model实例
注意：我这里是typescript的语法，只是有个别地方和js相比要确定一下类型，比如函数传参时，和使用input元素的value时
父组件App.vue
<template> <div> <InputModel v-model="inputVal"/> <span>{{inputVal}}</span> </div> </template> <script lang="ts"> import { defineComponent,ref } from 'vue'; import InputModel from './components/InputModel.vue' export default defineComponent({ name: 'App', components: { InputModel, }, setup(){ const inputVal = ref('hello') return{ inputVal } } }); </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>子组件 InputModel.vue
<template> <div> <input type="text" @input="updateVal" :value="changeVal" /> </div> </template> <script lang="ts"> import { defineComponent , ref} from 'vue'; export default defineComponent({ props:{ modelValue:String, }, setup(props,context){ // console.log(props.modelValue); const changeVal = ref(props.modelValue) const updateVal = (e: KeyboardEvent)=>{ // console.log((e.target as HTMLInputElement).value); //获取到input元素里面的值， const targetVal = (e.target as HTMLInputElement).value // console.log(changeVal.value); // 令两个值相等(传过来的值和输入的值) changeVal.value = targetVal // 发送事件和值 context.emit('update:modelValue',targetVal) } return{ updateVal, changeVal } } }); </script>vue3自定义v-model的优点（较vue2）
不知道vue2的自定义v-model的可以点击：
vue一些高级特性
的第一栏目观看vue2的缺点：
- 比较繁琐，子组件还要增加一个model属性
- 智能由于双向绑定多个值，不能够多个
vue3的提升：
- 完全摒弃了model属性
- 可以绑定多个值，因为直接传入的是函数
-
vue的model选项
2019-05-15 15:01:08今天在看vue-property-decorator时，遇到了@Model选项，也就是vue2.2中新增的实例model选项。原来只知道v-model属性实现双向绑定，对这个model选项突然不是很理解。所以这里重新对v-model和自定义组件的v-model做一...展开全文今天在看vue-property-decorator时，遇到了@Model选项，也就是vue2.2中新增的实例model选项。原来只知道v-model属性实现双向绑定，对这个model选项突然不是很理解。所以这里重新对v-model和自定义组件的v-model做一个回顾，加深印象后，再去理解model选项到底是做什么的，有什么作用。
vue中的v-model指令实现了表单的双向绑定，这是官网的一个栗子：
<input type="text" v-model="message"> <p>{{message}}</p>v-model只是语法糖，真正的实现形式：
<input type="text" :value="message" @input="message = $event.target.value">1.将输入框的值绑定到message变量上，这只是单向的，改变message的值可以改变input的value，但是改变input的输入不会改变message。
2.监听input事件，当输入类内容时改变message变量，从而实现了双向绑定。
从官网上看到，v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件：
text和textarea元素使用value属性和input事件
checkbox和radio使用checked属性和change事件
select使用value和change事件
那么我们知道原理后，可以试着实现自定义输入框组件的v-model，即双向绑定
// js部分 Vue.component('custom-input',{ // 1.监听input,输入时触发自定义组件内部的updateVal事件 template: `<input :value='value' @input='updateVal($event.target.value)' type='text'></input>`, // 5.通过props传递，实现父组件值绑定到输入框的value props: ['value'], methods: { // 2.触发父组件上的input事件 updateVal(val){ this.$emit('input', val); } } }); var app = new Vue({ el: '#app', data(){ price: '' }, methods: { // 3.传递过来的值赋给父组件的price变量，实现了输入框到父元素的单向绑定 onInput(val){ this.price = val; } } })// HTML部分 <div id="app"> // 4.父组件的value值绑定到price <price-input :value="price" @input="onInput"></price-input> </div>通过上面的分析，默认情况下，一个组件上的
v-model会把value用作 prop 且把input用作 event。所以当我们在一个自定义组件上使用v-model并不能实现双向绑定，因为自定的组件并没有默认的value和input事件，在使用时，我们需要按照上面那样显式的去声明定义这些东西。这时，model选项就派上用场了，在定义组件的时候，指定prop的值和监听的事件。Vue.component('my-input',{ model: { prop: 'uname', // 随便命名事件，对应下面$emit即可 event: 'changeXXX' }, props: { uname: { type: String, default: 'tom' } }, methods: { updateVal(val){ this.$emit('changeXXX',val) } } })<template> <input type="text" :value="uname" @input="updateVal($event.target.value)"> </template>父组件内使用时，使用v-model就可以啦
// name是父组件中的属性 <my-input v-model="name" value="some value"></my-input> <p>{{name}}</p>等价于
<my-input :uname='name' @changeXXX='val => {foo = val}' value='some value'></my-input>
-
vue插件推荐vue-class-model
2020-07-08 14:48:27vue-class-model 在vue中使用面向对象class开发，使class的公有数据双向绑定； 如果不需要使用双向绑定可以将属性通过Symbol私有化 安装 npm install vue-class-model or yarn add vue-class-model 配置 // model/...展开全文遇到个比较好用的新插件推荐
将class类的public的数据在vue中实现双向绑定，使用起来比较方便
class中处理类型数据，和dom操作分开
方便开发使用vue-class-model
在vue中使用面向对象class开发，使class的公有数据双向绑定；
如果不需要使用双向绑定可以将属性通过Symbol私有化
安装
npm install vue-class-model or yarn add vue-class-model配置
// model/hello.js class Hello{ // constructor如果有参数传入需要配置默认值 // 目前需要自己创建init方法初始化数据 constructor(){ // msg双向绑定，数据修改后组件会更新 // 目前对对象，数组可能存在bug，正在后续开发 this.msg = 'Hello' } // 初始化方法名不一定是init，你可以自己命名 init(m){ this.msg = m } setMsg(v){ this.msg = v } }// main.js import Vue from 'vue' import Models from 'vue-class-model' import Hello from './model/hello.js' Vue.use(Models) const model = new Models({ hello: Hello }) // 配置好后可以在所有组件中使用， // 使用class变量this.$model.hello.msg // 使用class方法this.$model.hello.setMsg('Bye') new Vue({ el:'#app', model })
-
-
Vue 自定义组件的 v-model 和 .sync 修饰符
2020-08-21 14:13:14Vue 自定义组件的 v-model Vue 组件的提供 model 选项自定义组件的 v-model 属性。 model 选项的值是一个对象，包含两个参数： prop - [String] 一个属性名 这个属性需要在 props 中声明 v-model 会传入这个属性 ... -
html接收model值_Vue3中v-model的使用
2021-01-18 21:45:17使用Vue的开发人员肯定对Vue2中的v-model非常熟悉，大家平常写起来也非常顺手，但是v-model在vue3中发生了较大的变化。这里简单阐述一下Vue3中v-model新语法的使用以及为什么有新的语法。Vue2.x中v-model的使用以及... -
vue集成vue-3d-model预览3D模型
2020-06-30 16:57:161、新增vue-3d-model依赖 npm installvue-3d-model 或者 yarn addvue-3d-model 2、使用 若模型路径为项目内路径，则需要将模型放在vue项目根目录下 项目中如下使用 否则会报如下错误： 若路径为服务器... -
vue 3d模型 vue-3d-model
2021-02-05 16:03:04npm install vue-3d-model --save 或使用脚本标签供全球使用 在vue的HTML中引入script 不用全局引入vue-3d-model在哪里用在哪里引入 下面有链接自行查看 用法 <template> <div class="demo-block-preview... -
SystemVue model buiilder
2015-07-29 02:05:32为什么用systemVue2013.08sp1 Create Model Builder Project时老是显示Failed to create project since CMake exited abnormally. -
Ant design vue formModel
2021-02-06 18:40:49Ant design vue formModel 在使用 ant-design-vue 的formModel 组件时，遇到了一些问题，简单记录一下 为什么要使用 formModel组件， 而不是form组件？ 因为要动态处理一个表单，表单可以进行临时的增加和删除一些... -
vue组件model应用
2019-04-03 11:06:13Vue.component('weiji-input', { model: { prop: 'wjlx', event:'selectweiji' }, props:['wjlx'], data: function () { return { }; }, computed:{ ... -
vue的model属性
2020-12-28 14:58:21默认情况下，一个组件上的 v-model 会把 value 用作prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。 &... -
vue选项之model
2019-10-18 10:55:45今天看vue api官方文档，看见选项/其他下的model有点看不懂，后面自己查资料实现了一下才明白用法。 实现全部代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&... -
Vue - v-model
2020-11-06 11:45:51Vue学习（四）- v-model v-model可以在表单控件或者组件上创建双向绑定。 双向绑定 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>v-model</title> &... -
vue3与vue2 的v-model差别
2020-09-22 13:47:21v-model 指令在 vue 2.x 和 vue 3.0 存在一些差别： 2.x 中 v-model 语法糖底层使用的是 :value 和 emit(‘input’)， 绑定属性值是 value 3.0 中可以绑定一个自定义值，支持统一组件绑定多个 v-model，v-model:... -
Vue Typescript @Model
2020-12-04 17:52:32默认情况下, 一个组件上的v-model会: 将 value用作 prop 将 input用作 event 语法： model: {prop?: string, event?: string} <!-- * @Author: your name * @Date: 2020-12-02 17:02:24 * @... -
Vue 进阶教程之v-model详解
2020-12-11 17:38:18Vue 官网教程上关于 v-model 的讲解不是十分的详细，写这篇文章的目的就是详细的剖析一下， 并介绍 Vue 2.2 v-model改进的地方，然后穿插的再说点 Vue 的小知识。 在 Vue 中，有许多方法和 Angular 相似，这主要是... -
vue的model选项和自定义组件的v-model
2020-03-09 11:59:47vue-property-decorator,@Model选项，也就是vue2.2中新增的实例model选项。原来只知道v-model属性实现双向绑定，对这个model选项突然不是很理解。所以这里 重新对v-model和自定义组件的v-model做一个回顾，加深印象... -
vue v-model
2017-07-31 19:57:41对于v-model指令，一开始并没有引起我的注意，看到这个命令我仅仅只是在vue官网上查了一下,简单的就几个字。在表单控件或者组件上创建双向绑定。于是我找到菜鸟教程中的一个实例，如是照着它的样子粗劣的写了一下... -
vue中v-model指令的使用之Vue知识点归纳(九)
2019-12-01 23:05:38vue 中 v-model 指令的基本使用 1 简述 vue 中 v-model 用来获取和设置 表单中的值 2 案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport... -
vue显示3d模型|vue-3d-model不显示问题
2021-03-12 15:45:17vue显示3d模型使用vue-3d-model 1. 下载 npm install vue-3d-model --save 引入组件，可支持7种模型文件类型 类型 对应组件 obj <model-obj> json <model-three> stl <model-st> ... -
[Vue] Vue 进阶教程之v-model详解
2018-07-23 16:28:26Vue 官网教程上关于 v-model 的讲解不是十分的详细，写这篇文章的目的就是详细的剖析一下， 并介绍 Vue 2.2 v-model改进的地方，然后穿插的再说点 Vue 的小知识。 在 Vue 中，有许多方法和 Angular 相似，这主要是... -
父子组件通过V-model传值 Vue
2020-06-04 11:24:05这里写自定义目录标题 父子组件通信，都是...3、父组件使用： v-model 第一种曾经被废除过，由于维护成本的原因被删掉，但经过证实，确实有存在的意义，又被加上。 第一种： 父组件： 子组件： {{'里面 -
vue-3d-model：:camera:vue.js 3D模型查看器组件-源码
2021-02-06 06:53:03npm install vue-3d-model --save 或使用脚本标签供全球使用 < script src =" https://unpkg.com/vue-3d-model/dist/vue-3d-model.umd.js " > </ script > 或下载并将其包含在您的html中 用法 < ... -
vue中关于checkbox数据绑定v-model指令的个人理解
2018-06-07 15:16:45vue.js未开发者提供了很多便利的指令，其中v-model用于表单的数据绑定很常见，下面是最常见的例子：<div id='myApp'><input type="text" v-model="msg"><br... -
vue v-model动态生成详解
2020-08-27 06:51:56本篇文章给大家分享了vue v-model动态生成的相关知识点以及实例代码，有兴趣的朋友参考学习下。 -
[Vue源码] Vue中v-model的实现原理及如何自定义v-model
2020-10-29 11:42:591、Vue中v-model的实现原理 组件 v-model 可以看成是 value+input 方法 的语法糖 <el-checkbox :value="" @input=""></el-checkbox> <el-checkbox v-model="check"></el-checkbox> 原理： ... -
Vue之v-model解析
2018-11-26 21:00:25今天介绍Vue.js中一种常用的指令：v-model，以及v-model指令特性带来的一些使用。 具体分析 依旧是以简单实例为引去分析Vue.js中针对v-model的处理，具体实例： <input v-model="text" /> &...
收藏数
20,678
精华内容
8,271
vue
订阅