起始项目

把官方提供的3d模型文件拷过来

项目目录

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue-3D-Model</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-3d-model/dist/vue-3d-model.umd.js"></script>
</head>
<body>
    <div id="app">
        <model-obj src="example/models/obj/LeePerrySmith.obj"></model-obj>
    </div>
</body>
</html>

<script>
    new Vue({ el: '#app' });
</script>

请添加图片描述


不同后缀的模型文件用不同的标签渲染

 		<!-- obj -->
        <section v-if="false">
            <template>
                <model-obj src="3d-model/obj/LeePerrySmith.obj"/>
            </template>
        </section>

        <!-- obj + mtl -->
        <section v-if="false">
            <template>
                <model-obj
                    src="3d-model/obj+mtl/male/male.obj"
                    mtl="3d-model/obj+mtl/male/male.mtl"
                />
            </template>
        </section>

        <!-- json -->
        <section v-if="false">
            <template>
                <model-three src="3d-model/json/scene.json"/>
            </template>
        </section>

        <!-- fbx -->
        <section v-if="false">
            <template>
                <model-fbx src="3d-model/fbx/dancing.fbx" />
            </template>
        </section>

        <!-- stl -->
        <section v-if="false">
            <template>
                <model-stl src="3d-model/stl/colored.stl" />
            </template>
        </section>

        <!-- dae -->
        <section v-if="false">
            <template>
                <model-collada src="3d-model/dae/elf/elf.dae" />
            </template>
        </section>

        <!-- dae -->
        <section v-if="false">
            <template>
                <model-ply src="3d-model/ply/海豚.ply" />
            </template>
        </section>

        <!-- gltf -->
        <section>
            <template>
                <model-gltf src="3d-model/gltf/小黄鸭/Duck.gltf" />
            </template>
        </section>

配置参数


width                - 宽度，和高度一起才生效
height               - 高度，和宽度一起才生效
src                  - 3d文件路径，e.g. example/models/obj/LeePerrySmith.obj
background-color     - 背景颜色
background-alpha     - 背景颜色透明度
controls-options     - 是否可 旋转、放大、移动
rotation             - 控制模型角度，旋转中心

on-click             - 鼠标点击事件
on-mousemove         - 鼠标悬浮事件
on-load              - 模型加载完毕事件


 <template>
    <model-obj
 		src="3d-model/obj/tree.obj"
      	:controls-options="{
	         enableRotate: false,  // 是否可旋转
	         enableZoom: false,    // 是否可缩放
	         enablePan: false      // 是否可移动（鼠标右键可以移动模型）
	     }"
	     @on-mousemove="onMouseMove"
	     @on-load="onLoad"
    />
</template>

模型参数

模型颜色

new Vue({
    el: '#app',
    data() {
        return {
            modelRef: null
        }
    },
    methods: {
        // 鼠标在容器上移动，event为null
        // 鼠标在模型上移动，event为模型对象
        onMouseMove(event) {
            if (event) {
                if (!this.modelRef) {
                    this.modelRef = event.object;
                }

                this.modelRef.material.color.setStyle('#13ce66');
                return;
            }

            this.modelRef?.material.color.setStyle( 'yellow' );
        }
    }
});

自动旋转展示

 <template>
 	<model-obj 
 		src="3d-model/obj/LeePerrySmith.obj"
     	@on-load="onLoad"
     	:rotation="rotation"
    />
</template>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                rotation: {
                    x: 0,
                    y: 0,
                    z: 0
                }
            }
        },
        methods: {
            onLoad() {
                this.rotate();
            },

            rotate () {
                this.rotation.y -= 0.01;
                requestAnimationFrame( this.rotate );
            }
        }
    });
</script>

模型快照（截图）

<button type="button" class="create" @click="snapshot">snapshot</button>
<img class="snapshot" v-if="base64" :src="base64" />

 <template>
    <model-obj 
    	src="3d-model/obj/LeePerrySmith.obj"
      	:gl-options="{ preserveDrawingBuffer: true }"
     	ref="model"
    />
</template>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                base64: null
            }
        },
        methods: {
            snapshot() {
                this.base64 = this.$refs.model.renderer.domElement.toDataURL('image/png', 1);
            }
        }
    });
</script>

遇到的问题

  • 多个模型，只展示了第一个
	// 一个模型要包一个容器标签
	<template>
	   <model-stl src="3d-model/stl/colored.stl" />
	 </template>
	
	 <template>
	   <model-stl src="3d-model/stl/gear.stl" />
	 </template>

在线制作3D模型

# vue.js # 3d
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

认识一下JavaScrip中的元编程

avatar 华为云开发者联盟
cover

世界读书日 | 开发者必读书单重磅来袭，华为云DTSE专家天团力荐

avatar 华为云开发者联盟
cover

重磅新品发布！云耀数据库HRDS，享受轻量级的极致体验

avatar 华为云开发者联盟