注意： 需要引入three.js,只支持Gbl文件的模型
<!-- #ifdef APP-PLUS || H5 -->
<view class="threeViewBox">
<view id="threeView" :prop="isGlbUrl" :change:prop="three.updateIsGlbUrl"></view>
</view>
<!-- #endif -->
使用到renderjs，因为app不支持docment的操作
<script module="three" lang="renderjs">
import * as THREE from "three";// OrbitControls 是对 Threejs 的三维场景进行缩放、平移、旋转操作
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls.js";// 导入 glb 格式模型，若要导入其他格式模型，可尝试在 loaders 目录下加载其他文件
import {GLTFLoader} from "three/examples/jsm/loaders/GLTFLoader.js";
var renderer;
var scene;
var camera;
var controls;
var mixer = null;
var clock = null;
export default {
name: "ThreeContainer",
data() {
return {
glbUrl: '',
schedule: false,}
},
mounted() {
setTimeout(() => {
this.updateIsGlbUrl()
}, 0);
this.initThree(); //加载场景this.leadModel(); //导入模型
this.createControls(); //控制模型的缩放、平移、旋转操作
},
methods: {
updateIsGlbUrl(newValue, oldValue) {
if (newValue) {
this.glbUrl = newValue
}
},
createControls() {
controls = new OrbitControls(camera, renderer.domElement)
},
// 导入模型
leadModel() {
let self = this // let {original} = JSON.parse(localStorage.getItem('collectionDetailData'))
// 导入本地或者服务器上的模型都可以
loader.load(this.glbUrl, function(gltf) {
if (gltf.animations.length > 0) {
mixer = new THREE.AnimationMixer(gltf.scene);
let AnimationAction = mixer.clipAction(gltf.animations[0]);
scene.add(gltf.scene);
AnimationAction.play();
}
gltf.scene.traverse(function(child) {
if (child.isMesh) {
child.material.emissive = child.material.color; child.material.emissiveMap = child.material.map;
}
});
scene.add(gltf.scene);
},
function(params) {
this.schedule = Math.floor(params.loaded / params.total * 100);
});
},
initThree() {
const element = document.getElementById('threeView') /* 创建场景对象Scene */
scene = new THREE.Scene(); // 环境光0x404040
var ambient = new THREE.AmbientLight(0xffffff, -0.4);
scene.add(ambient); // // 平行光# 35434d
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.1);
scene.add(directionalLight); //点光
const light = new THREE.PointLight(0xffffff, 0.1);
light.position.set(50, 100, 0);
scene.add(light); //相机设置
// var width = element.clientWidth; // 窗口宽度
// var height = element.clientHeight;
// 高度 var width = 414; // 窗口宽度
var height = 370; // 高度
var k = width / height; // 窗口宽高比
var s = 1000; // 三维场景显示范围控制系数，系数越大，显示的范围越大 // 创建相机对象（正射投影）
camera = new THREE.PerspectiveCamera(45, k, 1, 1000);
camera.position.set(0, 0, 40); //设置相机的摆放位置
camera.lookAt(new THREE.Vector3(0, 0, 0)); // 控制相机的焦点(镜头)位置，决定相机的朝向（取值为3维坐标对象- THREE.Vector3(x,y,z)）
/* 创建渲染器对象 */
renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true, //设置透明，为true时，背景颜色需要注释掉 precision: "highp",
});
renderer.outputEncoding = THREE.sRGBEncoding; renderer.setSize(width, height); // 设置渲染区域尺
// renderer.setClearColor("#F2F2F4", 1); // 设置背景颜色
element.appendChild(renderer.domElement); // body元素中插入canvas对象 // 执行渲染操作，指定场景，相机作为参数
renderer.render(scene, camera);
clock = new THREE.Clock(); this.render(); },
// 动画
render() {
let that = this;
if (mixer !== null) {
mixer.update(clock.getDelta());
}
requestAnimationFrame(function() {
that.render();
});
renderer.render(scene, camera); //执行渲染操作 }, } }
</script>
