hujiulong/vue-3d-model

📷 vue.js 3D model viewer component

Vue 3D Model

3D Model Viewer with Vue 3

For Vue 2.x, please check the v1 branch.

Document

LICENSE

MIT

vue-3d-model's Issues

zoom

It is possible to zoom in and out into the object?

Load file from input type file?

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!

改变模型贴图透明度

你好请问，在导入了mtl文件的情况下，如何使用on-mousemove方法改变obj模型的亮度或者透明度？使得模型在鼠标过时产生一种高亮的状态。谢谢~

3D Model not Displaying until Window is resized

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.

如何让两个model同步旋转？

PointLight not imported

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

.dae文件读取不了

obj和obj+mtl都能正常读取和显示，但dae不行，换了例子里几个dae都不行

关于拖拽旋转的问题

你好，关于光源的设置问题解决了，非常谢谢！

另外我发现模型渲染完毕后，鼠标拖拽模型水平旋转（绕着y轴）是没有任何问题，但是拖拽模型垂直旋转（绕着x轴），最多只能朝上旋转90度，朝下旋转90度，请问怎样才能像水平旋转那样无限制旋转呢？

[Nuxt error] Window is not defined

Hello!
Could you tell me how to use this with Nuxt JS? Can not understand.
I get the error: error screen
I tried:

1. if (process.BROWSER_BUILD) {
   require('vue-3d-model')
   }

2. { src: '~plugins/vue-3d-model', ssr: false }

Thank you! Sorry for my English =)

照着你的例子使用，但是报错了

报错如下
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)

src文件可以用http链接吗，试了好像不行

你好，请问如果我想在一个场景里添加两个模型，该模块可以实现吗？

具体情况是，我想在一个场景里添加两个模型，一个3D模型是底图，另一个3D模型会利用position属性在底图上移动，类似于3D底图，请问该模块可以实现吗？谢谢！

Get dimensions of STL object?

Hi, is there any way to get the dimensions (x,y,z) of an STL object through the component?

get error with CDN

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]

textures are not rendered on dae models

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.

How do I set the source in Javascript?

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 ); } } })

中心点问题

你好，请问我想改变旋转的中心点如何改变?
使其自转

ply格式不能显示

大哥，你好，我在测试ply文件的时候，使用的html方法，但是在显示中，不能形成cavas标签，还是model-lply，如果我使用一个web服务器打开，提示我model-ply标签没有rotation这个属性；就是不能显示？请问我该如何解决这个问题呢？

如何使导入的obj模型在屏幕中显示固定的比例

现在有个需求，就是导入的obj模型大小是不固定，如何去实现动态的计算来实现模型在屏幕中显示合适的比例，比如模型占屏幕中的60%，大神求解答，谢谢

光源设置问题

请问lights 怎么设置，看到参数里有个lights，估计是光源吧，但是没说明怎么设置呢？

On error event

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

json格式的数据是怎么获得的呢

大神您好，我最近在研究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输出的话，是用什么数据导入的呢？问题比较长，能看到这里十分感谢~

Uncaught Error

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 ?

Fallback?

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!

谢谢，正需要，但lights怎么用啊 3d小白跪谢！

8）

报错THREE.WebGLRenderer 88

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

实时rotation

我绑定了了mouseup事件，想在每次拖动结束后获取当前的rotation，这个怎么去获取

Lighting Question

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.

Set camera position

When can support Solidworks and UG?

You are doing the great job!

Error running vue-3d-model

When I try to run the code:
<div id="app"> <model-collada src="source of .dae model"></model-collada> </div> <script src="https://unpkg.com/vue"></script> <script> new Vue({ el: '#app' }) </script>

I get the following error:

小白 提问 如何使用下载后的文件

请问大神， 我下载了大神上传的文件， 打开了example文件夹， 然后把demo里面HTML和js复制进去。还加载了Vue的cdn。想看见example做出来的事例，然后再upload自己的文件。可是我反复修改和尝试都无法在browser里显示出模型。Inspect 里面显示无法加载模型的文件。作为小白，还望大神讲解再详细一点。

这些model(json,obj)怎么生成啊？

不要意思，我不太了解这个。
请教一下，如果我想对一个展品四周多拍几张照片怎么合成这个包可以读取的数据格式？

Uncaught TypeError: Cannot read property 'getAttribute' of undefined

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>

project run without any error, but there is nothing in explorer

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 line element (l)

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!

请问怎么监听事件呢？

请问怎么监听这些事件呢？

on-mousedown

on-mousemove
on-mouseup
on-click
on-load
on-progress
on-error

数据格式

请问现在支持的数据格式包括stl了吗

obj + mtl 材质不能正常显示

这一部分应该是需要设置，会有很多提示，比如“THREE.MeshPhongMaterial: .shading has been removed. Use the boolean .flatShading instead.”。

如何在代码里对模型进行一些实时操作

如何在代码里对模型实时进行一些简单操作呢，如旋转平移缩放等，或者能否我预设定几个状态信息，然后提供一个方法，能够让我在合适的时候去切换

是否支持切换相机位置以及模型旋转到某一位置然后固定

请问是否支持

Combine two renders.

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.

CORS Problem

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?

使用vue组件时，报错

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)

请问该如何解决

Animation

支持模型动画吗？什么时候可以支持呢？

cannot load file.obj

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 mtl的问题

目前我有一份obj的三维模型，内容有 .obj .mtl以及两张相应的jpg纹理照片，请问这种情况应该怎么加载啊

用鼠标转动的时候，背面没有光照

加载的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>