uniapp H5和APP 使用three.js画立方体，然后每个面贴一张图片和导入3D建模

<template>
<!-- #ifdef APP-PLUS || H5 -->
<view id="threeView"></view>
<!-- #endif -->
<!-- #ifndef APP-PLUS || H5 -->
<view>非 APP、H5 环境不支持</view>
<!-- #endif -->

</template>

<!-- 只能在APP和h5端运行 -->
<script module="three" lang="renderjs">
const THREE = require('static/three/build/three.min.js')

// OrbitControls 是对 Threejs 的三维场景进行缩放、平移、旋转操作
import {
OrbitControls
} from 'static/three/examples/jsm/controls/OrbitControls.js'

// 导入 glb 格式模型，若要导入其他格式模型，可尝试在 loaders 目录下加载其他文件
import {
GLTFLoader
} from 'static/three/examples/jsm/loaders/GLTFLoader.js'

var renderer;
var scene;
var camera;
var controls;

export default {

mounted() {
this.initThree();//加载场景
this.leadModel();//导入模型
this.createControls();//控制模型的缩放、平移、旋转操作

},

methods: {

createControls() {
controls = new OrbitControls(camera, renderer.domElement)
},

// 导入模型
leadModel() {
console.log('导入模型')
let loader = new GLTFLoader();
var mesh=null;
// 导入本地或者服务器上的模型都可以
// loader.load('../../../static/images/home/1.png', function(gltf) {
loader.load('https://threejs.org/examples/models/gltf/RobotExpressive/RobotExpressive.glb', function(gltf) {
console.log(gltf,11)
// scene.add(gltf.scene);
mesh=gltf.scene.children[0];
mesh.scale.set(1,1,1)
// var textureLoader = new THREE.TextureLoader();
});

},

initThree() {
// 如果返回的不是未定义，说明threejs成功引入
console.log('打印场景API', THREE.Scene);

/* 创建场景对象Scene */
scene = new THREE.Scene();
console.log(scene,11)
// 环境光
var ambient = new THREE.AmbientLight(0xffffff);
scene.add(ambient);
var textureLoader = new THREE.TextureLoader();
var geometry=new THREE.BoxGeometry(10,10,1);
var a_ =textureLoader.load('https://tundian.oss-cn-hangzhou.aliyuncs.com/backImg/images/home/1.png')
var b_ =textureLoader.load('https://tundian.oss-cn-hangzhou.aliyuncs.com/backImg/images/home/1.png')
var material_1 = new THREE.MeshBasicMaterial( { map: a_ } );
var material_2 = new THREE.MeshBasicMaterial( { map: b_ } );
var material_3 = new THREE.MeshBasicMaterial( { color: 0xFF321A } );
var material_4 = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
var material_5 = new THREE.MeshBasicMaterial( { color: 0x00ffff } );
var material_6 = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var materials = [];

materials.push(material_3);
materials.push(material_4);
materials.push(material_5);
materials.push(material_6);
materials.push(material_1);
materials.push(material_2);
var mesh1 = new THREE.Mesh(geometry, materials); //网格模型对象Mesh
mesh1.position.set(0, 0, 0); //设置mesh3模型对象的xyz坐标为120,0,0

scene.add(mesh1);
// textureLoader.load('https://tundian.oss-cn-hangzhou.aliyuncs.com/backImg/images/home/1.png',function(texture){
// var material1 = new THREE.MeshPhongMaterial({
// // color: 0xffffff,
// // normalMap: texture, //法线贴图
// //设置深浅程度，默认值(1,1)。
// // normalScale: new THREE.Vector2(1.2, 1.2),
// map:texture,
// side:THREE.FrontSide
// }); //材质对象Material
// material1.opacity = 1.0;
// material1.transparent = true;
// var mesh1 = new THREE.Mesh(geometry, material1); //网格模型对象Mesh
// mesh1.position.set(0, 0, 0); //设置mesh3模型对象的xyz坐标为120,0,0

// scene.add(mesh1);
// });
// console.log(texture,123)
// var backColor=new THREE.MeshPhongMaterial({ color: 0xafc0ca }



/*
相机设置
*/
var width = 351; // 窗口宽度
var height = 351; // 高度
// var width = 300; // 窗口宽度
// var height = 300; // 高度
var k = width / height; // 窗口宽高比
var s = 1000; // 三维场景显示范围控制系数，系数越大，显示的范围越大
// 创建相机对象（正射投影）
camera = new THREE.PerspectiveCamera(45, k, 1, 10000);
camera.position.set(0, 0, 20); //设置相机的摆放位置
camera.lookAt(new THREE.Vector3(0, 0, 0)); // 控制相机的焦点(镜头)位置，决定相机的朝向（取值为3维坐标对象-THREE.Vector3(x,y,z)）

/*
创建渲染器对象
*/
renderer = new THREE.WebGLRenderer({
antialias: true,
// alpha: true //设置透明，为true时，背景颜色需要注释掉
});

renderer.setSize(width, height); // 设置渲染区域尺寸
renderer.setClearColor(0XF8F8F8, 1); // 设置背景颜色
const element = document.getElementById('threeView')
element.appendChild(renderer.domElement); // body元素中插入canvas对象
// 执行渲染操作，指定场景，相机作为参数
renderer.render(scene, camera);
// setInterval("render()",20)
this.render();
},

// 动画
render() {
// console.log('动画')
let that = this;
requestAnimationFrame(function() {
that.render();
});
renderer.render(scene, camera); //执行渲染操作
},

}
}

</script>

注意  1.下载three.js源码

　　  2.把three.js源码引入到uniapp 项目文件夹static下面

　　  3.使用本地图片要注意，可能会报错。