html vue 中展示 obj 文件

Gavin M

于 2023-07-20 18:50:48 发布

阅读量504

点赞数 2

文章标签： vue.js html javascript

Grvin M

本文链接：https://blog.csdn.net/weixin_45522160/article/details/131837414

版权

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app{
           height: 60%;
           width: 60%;
           margin-right: 20%;
        }
    </style>
</head>
<body>
    <div id="app">
        <model-obj src="P44.obj" mtl="P44.mtl"  :lights="lights" ></model-obj>
    </div>
    <script src="./js/vue.min.js"></script>
    <script src="./js/vue-3d-model.umd.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    lights: [//3d模型灯光
                        {
                            type: 'HemisphereLight',
                            position: { x: 0, y: 1, z: 0 },
                            skyColor: 0xffffff,
                            //groundColor: 0xFF0000, //此代码为灯光后颜色
                            intensity: 0.85,
                            visible:true
                        },
                        {
                            type: 'DirectionalLight',
                            position: { x: 0, y: 0, z: 0 },
                            color: 0xffffff,
                            intensity: 0.85,
                            visible:false
                        },
                       
                    ]
                }
            },		
        })
    </script>
</body>
</html>