1、解决问题
uniapp 导入3d模型,在微信小程序端运行。只支持在微信小程序端使用,若要支持 h5 和 APP端,可以查看这篇,点击这里
只导入了3d模型,未设置让模型动。
2、导入模型格式
glb 格式
3、实现效果图
4、步骤
(1)首先文件
下载适配微信小程序的 three.js 地址:https://github.com/wechat-miniprogram/threejs-miniprogram
(2)导入文件
需要导入 three.js 和 gltf-loader.js 文件
从下载好的压缩包里复制目录 threejs-miniprogram-master\example\miniprogram_npm\threejs-miniprogram 的 [index.js] 文件
以及 threejs-miniprogram-master\example\loaders 里的 [gltf-loader.js] 文件
(3)代码
① 设置画布
② 引入 threejs-miniprogram 和 gltf-loader 文件
③ onReady 里获取webgl
④ 3d 初始化(设置相机、设置光照、导入3d模型 、render 渲染)
⑤ 设置动画
index.vue
<template>
<!-- 设置画布 -->
<canvas type="webgl" id="webgl" style='width:100%;height:250px;background-color:rgb(255, 255, 255,1); margin: aotu 0;'>
</canvas>
</template>
<!-- 只能在微信小程序端运行 -->
<script>
// 引入文件夹
import {
createScopedThreejs
} from '../../wxcomponents/miniprogram_npm/threejs-miniprogram'
// 引入文件
import {
registerGLTFLoader
} from '../../wxcomponents/loaders/gltf-loader'
let app = getApp();
let canvaWidth = 0; //画布宽
let canvaHeight = 0; //画布高
let canvas, THREE; //3d相关
let camera, scene, renderer, model; //定义变量: 摄像机(camera) 场景(scene) 渲染器(renderer) 模型(model)
let pagestatus = 0; //函数返回
export default {
data() {
return {
}
},
onLoad() {
},
onReady() {
//在小程序使用
// #ifndef APP||H5
//获取webgl
uni.createSelectorQuery().select('#webgl').node().exec((res) => {
canvas = res[0].node;
THREE = createScopedThreejs(canvas);
canvaWidth = 600;
canvaHeight = 400;
this.initCanva(canvas);
})
// #endif
},
methods: {
/**
* 3d 初始化
* @param {*} canvas
*/
initCanva: function(canvas) {
let that = this;
registerGLTFLoader(THREE);
//scene
scene = new THREE.Scene();
//设置相机
camera = new THREE.PerspectiveCamera(45, canvas.width / canvas.height, 0.25, 100);
camera.position.set(- 5, 3, 10);
camera.lookAt(new THREE.Vector3(0, 2, 0));
scene = new THREE.Scene();
// 设置光照
var light = new THREE.HemisphereLight(0xffffff, 0x444444);
light.position.set(0, 20, 0);
scene.add(light);
light = new THREE.DirectionalLight(0xffffff);
light.position.set(0, 20, 10);
scene.add(light);
// 导入3d模型
let loader = new THREE.GLTFLoader(); //badminton.zip
loader.load('https://threejs.org/examples/models/gltf/RobotExpressive/RobotExpressive.glb', function(gltf) {
model = gltf.scene;
scene.add(model);
},
function() {
return pagestatus;
},
undefined,
function(e) {
console.error("加载模型出错:", e);
});
//render 渲染
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setPixelRatio(2);
renderer.setSize(canvas.width, canvas.height);
that.animate();//画布渲染
},
// 画布渲染
animate: function() {
let that = this;
if (renderer !== null && scene !== null && camera !== null) {
canvas.requestAnimationFrame(that.animate);
renderer.render(scene, camera);
}
},
}
}
</script>
5、总结文章来源:https://www.toymoban.com/news/detail-404030.html
源码下载
csdn无积分下载:点击查看文章来源地址https://www.toymoban.com/news/detail-404030.html
到了这里,关于【uni-app】只支持在微信小程序运行的 导入外部3d模型的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!