起始项目

把官方提供的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

解析openGauss账本数据库

avatar 华为开发者空间
cover

GaussDB高校行走进哈尔滨，与两校学子共话数据库人才发展

avatar 华为开发者空间
cover

GaussDB数据库高可用部署方案

avatar 华为开发者空间