For Vue 2.x, please check the v1 branch.
MIT
📷 vue.js 3D model viewer component
Home Page: https://vue-3d-model.netlify.app
License: MIT License
大哥,你好,我在测试ply文件的时候,使用的html方法,但是在显示中,不能形成cavas标签,还是model-lply,如果我使用一个web服务器打开,提示我model-ply标签没有rotation这个属性;就是不能显示?请问我该如何解决这个问题呢?
你好请问,在导入了mtl文件的情况下,如何使用on-mousemove方法改变obj模型的亮度或者透明度?使得模型在鼠标过时产生一种高亮的状态。谢谢~
Is there a way to render two components into same canvas?
Right now I can change the color by using $refs:
var object = this.$refs.model.object;
object.children[0].material.color.setStyle('#000')
But i wish to add for example a skateboard:
Deck
Wheels
And change the colors with something like this:
var object = this.$refs.model.object;
object.children[0].material.color.setStyle('#000')
object.children[1].material.color.setStyle('#ff0000')
Is there any way to include this to the canvas?
Thanks in advance.
Hello!
Could you tell me how to use this with Nuxt JS? Can not understand.
I get the error: error screen
I tried:
if (process.BROWSER_BUILD) {
require('vue-3d-model')
}
{ src: '~plugins/vue-3d-model', ssr: false }
Thank you! Sorry for my English =)
I am downloading the data after the user uploaded the files on the website.
How do I set the source of the 3D model object and set the right model container?
var model = document.getElementById("app").src "source" new Vue({ el: '#app', data: { rotation: { x: -Math.PI / 2, y: 0, z: 0 } }, methods: { onLoad () { this.rotate(); }, rotate () { this.rotation.z += 0.01; requestAnimationFrame( this.rotate ); } } })
请问大神, 我下载了大神上传的文件, 打开了example文件夹, 然后把demo里面HTML和js复制进去。还加载了Vue的cdn。想看见example做出来的事例,然后再upload自己的文件。可是我反复修改和尝试都无法在browser里显示出模型。Inspect 里面显示无法加载模型的文件。作为小白,还望大神讲解再详细一点。
请问怎么监听这些事件呢?
on-mousemove
on-mouseup
on-click
on-load
on-progress
on-error
Hi,
I realized that the OBJ loader does not implement the l
(line) element, which only connects two vertices instead of several like face does.
It would be really nice, if somebody could add this feature. For me the code is a bit overwhelming and I would need some time to dig in that deep that I could implement it myself, but I think it actually can't be too complicated.
Thanks for the great work!
报错如下
vue-3d-model.min.js?05bd:5 Uncaught Error: OBJLoader: Unexpected line: "�������|"
at r.parse (vue-3d-model.min.js?05bd:5)
at Object.eval [as onLoad] (vue-3d-model.min.js?05bd:5)
at XMLHttpRequest.eval (vue-3d-model.min.js?05bd:1)
如题 求大佬解答
如何在代码里对模型实时进行一些简单操作呢,如旋转平移缩放等,或者能否我预设定几个状态信息,然后提供一个方法,能够让我在合适的时候去切换
You are doing the great job!
I have git clone and installed the project. However, when I start by "npm run dev" and access "http://localhost:8080/", the page in chrome is blank.
I have also tried firefox, the result is the same.
不要意思,我不太了解这个。
请教一下,如果我想对一个展品四周多拍几张照片怎么合成这个包可以读取的数据格式?
加载的obj模型,主要有两个问题,一个是背面没有光照,另外一个是皮肤不光滑。我看vue-3d-model里默认是用的是this.shading = SmoothShading; // THREE.FlatShading, THREE.SmoothShading
???
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
<model-obj src="girl_base.obj"></model-obj>
</div>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script src="vue-3d-model.js"></script>
<script>
new Vue({
el: '#app'
})
</script>
</body>
</html>
Hi, is there any way to get the dimensions (x,y,z) of an STL object through the component?
大神您好,我最近在研究3ds Max导出数据并且在浏览器上展示的问题,看了您的文章深受启发。vue目前支持obj、json、dae、stl四种格式的展示,在们的实验中发现obj与stl展示的时候是不带贴图的(obj有输出mtl文件不过似乎vue并没有去试图读取它)。而dae文件输出与其他几种格式相比非常大,同一份数据输出其他的只有几M,而dae文件达到了几百M,这使得浏览器读取十分缓慢。最后我们选择json格式。我们下载three.js的插件安装到blender中,导入dae数据并导出json格式,但是放到浏览器上后,浏览器提示我们的数据缺少了一些信息。与您的json数据比较后,发现较您的数据确实少了很多信息。我想请教大神,您的json数据是怎么获得的呢?如果也是使用blender输出的话,是用什么数据导入的呢?问题比较长,能看到这里十分感谢~
It is possible to zoom in and out into the object?
Hey,
i need do add a fallback image if the cliebt browser does not support any of the threejs renderes.
How wuold you to this?
thx for your help!
Hi, i just found your plugin and it's great! I am trying to use input file type for selecting STL file from my computer, but no success - because I cannot get file path. Can you help me with this one?
Error is [Vue warn]: Invalid prop: type check failed for prop "src". Expected String, got File.
Here is my code:
HTML:
<input type="file" ref="stlFile" @change="changeStl">
<model-stl :src="srcStl">
JS:
new Vue({
el: '#app',
data: {
srcStl : ""
},
methods: {
changeStl() {
const files = this.$refs.stlFile.files;
console.log(files[0]);
this.srcStl = files[0];
}
}
})
Thansk!
Hi,
I'm tryingt o use your component in my project but when i start my project i have a : "Uncaught Error: Unexpected line: '{'" in "vue-3d-model.js.min.
Do you know why i have this err ?
你好,关于光源的设置问题解决了,非常谢谢!
另外我发现模型渲染完毕后,鼠标拖拽模型水平旋转(绕着y轴)是没有任何问题,但是拖拽模型垂直旋转(绕着x轴),最多只能朝上旋转90度,朝下旋转90度,请问怎样才能像水平旋转那样无限制旋转呢?
Hi,
I found a problem in your code.
The "on-error" event actually gives a progress event.
That is because at line 446 of the file "model-mixin.vue" you are passing the error handler as the 3rd
parameter of the load method when in fact the error handler should be the 4th parameter.
Also it would be nice if you could add an "on-progress" event as well.
Thank you for looking into this
Hi, i have error, can you help me ,
Uncaught Error: OBJLoader: Unexpected line: ""
at r.parse (vue-3d-model.min.js?c924:5)
at Object.eval [as onLoad] (vue-3d-model.min.js?c924:5)
at XMLHttpRequest.eval (vue-3d-model.min.js?c924:1)
parse @ vue-3d-model.min.js?c924:5
(anonymous) @ vue-3d-model.min.js?c924:5
(anonymous) @ vue-3d-model.min.js?c924:1
load (async)
load @ vue-3d-model.min.js?c924:1
load @ vue-3d-model.min.js?c924:5
load @ vue-3d-model.min.js?c924:5
mounted @ vue-3d-model.min.js?c924:5
callHook @ vue.runtime.esm.js?2b0e:2917
insert @ vue.runtime.esm.js?2b0e:4154
invokeInsertHook @ vue.runtime.esm.js?2b0e:5956
patch @ vue.runtime.esm.js?2b0e:6175
Vue._update @ vue.runtime.esm.js?2b0e:2656
updateComponent @ vue.runtime.esm.js?2b0e:2784
get @ vue.runtime.esm.js?2b0e:3138
Watcher @ vue.runtime.esm.js?2b0e:3127
mountComponent @ vue.runtime.esm.js?2b0e:2791
Vue.$mount @ vue.runtime.esm.js?2b0e:7995
(anonymous) @ main.js?2ee2:6
./src/main.js @ app.js:1783
webpack_require @ app.js:722
fn @ app.js:99
0 @ app.js:1796
webpack_require @ app.js:722
(anonymous) @ app.js:789
(anonymous) @ app.js:792
现在有个需求,就是导入的obj模型大小是不固定,如何去实现动态的计算来实现模型在屏幕中显示合适的比例,比如模型占屏幕中的60%,大神求解答,谢谢
obj和obj+mtl都能正常读取和显示,但dae不行,换了例子里几个dae都不行
Hi,
When I try to pass an array of PointLights to your component I get the following error:
"PointLight is not defined".
The problem is that "PointLight" is not imported in the file model-mixin.vue.
Thanks
textures are not rendered on dae models.
they are all rendered black with no textures on them.
models without a texture-map are rendered properly.
具体情况是,我想在一个场景里添加两个模型,一个3D模型是底图,另一个3D模型会利用position属性在底图上移动,类似于3D底图,请问该模块可以实现吗?谢谢!
支持模型动画吗?什么时候可以支持呢?
请问现在支持的数据格式包括stl了吗
这一部分应该是需要设置,会有很多提示,比如“THREE.MeshPhongMaterial: .shading has been removed. Use the boolean .flatShading instead.”。
如果可以的话,能提供一个例子么
Hi, the 3d object loads successfully but it does not display. I don't know what is happening but I am sure the 3d object loads because when I resize the window such as opening the console or resize it manually, the 3d model will then appear. By the way, I am rendering the 3d model on a Modal.
Hi, Thank you for this nice components.
I am using model-three
to render a 3D Model in a cordova application. It worked perfectly when I had the scene in my local assets. But when I try to load the scene from the server I get this error
THREE.WebGLState: DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The image element contains cross-origin data, and may not be loaded.
My server has the response header Access-Control-Allow-Origin "*"
. After some search I found, according to this answer, that setting the crossOrigin might help.
Is there any way to do this through options? Do you have any other suggestion?
Hi
When following this url https://unpkg.com/[email protected]/dist/vue-3d-model.min.js can see this error Cannot find "/dist/vue-3d-model.min.js" in [email protected]
请问lights 怎么设置,看到参数里有个lights,估计是光源吧,但是没说明怎么设置呢?
目前我有一份obj的三维模型,内容有 .obj .mtl以及两张相应的jpg纹理照片,请问这种情况应该怎么加载啊
我绑定了了mouseup事件,想在每次拖动结束后获取当前的rotation,这个怎么去获取
8)
请问是否支持
Uncaught TypeError: Cannot read property 'getAttribute' of undefined
In my component
<template>
<div>
<p>afaf</p>
<model-collada :height="300" :width="600" src="public/avatar.dae"></model-collada>
</div>
</template>
<script>
import { ModelCollada } from "vue-3d-model";
export default {
components: {
ModelCollada
}
};
</script>
THREE.WebGLRenderer 88
vue-3d-model.min.js?05bd:5 Uncaught Error: OBJLoader: Unexpected line: ""
at r.parse (vue-3d-model.min.js?05bd:5)
at Object.eval [as onLoad] (vue-3d-model.min.js?05bd:5)
at XMLHttpRequest.eval (vue-3d-model.min.js?05bd:1)
parse @ vue-3d-model.min.js?05bd:5
(anonymous) @ vue-3d-model.min.js?05bd:5
(anonymous) @ vue-3d-model.min.js?05bd:1
XMLHttpRequest.send (async)
load @ vue-3d-model.min.js?05bd:1
load @ vue-3d-model.min.js?05bd:5
load @ vue-3d-model.min.js?05bd:5
mounted @ vue-3d-model.min.js?05bd:5
callHook @ vue.esm.js?efeb:2921
insert @ vue.esm.js?efeb:4158
invokeInsertHook @ vue.esm.js?efeb:5960
patch @ vue.esm.js?efeb:6179
Vue._update @ vue.esm.js?efeb:2660
updateComponent @ vue.esm.js?efeb:2788
get @ vue.esm.js?efeb:3142
Watcher @ vue.esm.js?efeb:3131
mountComponent @ vue.esm.js?efeb:2795
Vue.$mount @ vue.esm.js?efeb:8540
Vue.$mount @ vue.esm.js?efeb:10939
Vue._init @ vue.esm.js?efeb:4640
Vue @ vue.esm.js?efeb:4729
(anonymous) @ main.js?1c90:12
./src/main.js @ app.js:1085
webpack_require @ app.js:679
fn @ app.js:89
0 @ app.js:1102
webpack_require @ app.js:679
(anonymous) @ app.js:725
(anonymous) @ app.js:728
vue-3d-model.min.js?05bd:5
Uncaught Error: OBJLoader: Unexpected line: ""
at r.parse (vue-3d-model.min.js?05bd:5)
at Object.eval [as onLoad] (vue-3d-model.min.js?05bd:5)
at XMLHttpRequest.eval (vue-3d-model.min.js?05bd:1)
请问该如何解决
你好,请问我想改变旋转的中心点如何改变?
使其自转
I'm trying to light the entire model equally(obj + mtl), so that there aren't any shadows when the model is rendered. Is this something I can do as a property? I noticed you have a "lights" prop in the readme but I'm not sure how to use it.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.