首先引入js 因为这个进度条使用vue的ui样式库
<!-- 加载进度条-->
<!-- 引入前端框架vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<!-- vuejs的库element-ui -->
<script src="http://www.yanhuangxueyuan.com/js/element-ui/index.js"></script>
<!-- element-ui样式 -->
<link rel="stylesheet" href="http://www.yanhuangxueyuan.com/js/element-ui/index.css">
其次在body里加入html代码
<div id="app">
<!-- -->
<!-- 加载完成后，如果想隐藏进度条可以设置 v-if="loadedData!==100"，也就是loadedData等于100隐藏进度条-->
<div v-if="isshow" style="position: absolute;width:400px;" :style="{left: left+'px',top: top+'px'}">
<el-progress :text-inside="true" :stroke-width="30" :percentage="loadedData"></el-progress>
</div>
</div>引入js代码
//实例化vue
var vm = new Vue({
el: "#app",
data: {
// loadedData关联加载进度条
loadedData: 0,
left: (window.innerWidth - 400) / 2,
top: (window.innerHeight - 30) / 2,
isshow:1
},
})加载进度条
//加载器
var loader = new THREE.OBJLoader();
var model = loader.load('000866.obj',function (obj) {
//模型加载完执行 此函数
//隐藏进度条
if(vm.loadedData >= 100){
vm.isshow = 0;
}
}, onProgress ); //加载过程中执行 onProgress函数
// 在加载过程函数中，更新vue进度条视图绑定的数据
function onProgress(xhr) {
// 后台打印查看模型文件加载进度
console.log('加载完成的百分比'+(xhr.loaded/xhr.total*100)+'%');
//把加载进度数据取整然后传递给Vue组件：进度条
vm.$data.loadedData = Math.floor(xhr.loaded/xhr.total*100)
}完整代码
<?php $type = isset($_GET['type']) ? $_GET['type'] : '生活'; $page = isset($_GET['page']) ? $_GET['page'] : 1; $id = isset($_GET['id']) ? $_GET['id'] : 1; $isshow = isset($_GET['ishow']) ? $_GET['ishow'] : 1; ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="x-ua-compatible" content="IE=edge" /> <title>文物鉴赏</title> <style> *{ touch-action: none; touch-action: pan-y; } body { margin: 0; overflow: hidden; /* 隐藏body窗口区域滚动条 */ /*background: url("000083.jpg") center no-repeat;*/ -webkit-background-size: cover; background-size: cover; } @media (max-width: 767px) { .mobile{ display: block !important; } } .pc{ display: block; !important; } @media (max-width: 767px) { .pc{ display:none; } } </style> <link rel="stylesheet" href="../v2.css" /> <!--引入three.js三维引擎--> <script src="../../three.js-master/build/three.js"></script> <!-- 引入threejs扩展控件OrbitControls.js --> <script src="../../three.js-master/examples/js/controls/OrbitControls.js"></script> <!-- 引入obj模型加载库OBJLoader.js --> <script src="../../three.js-master/examples/js/loaders/OBJLoader.js"></script> <!-- 720旋转--> <script src="../../three.js-master/examples/js/controls/TrackballControls.js"></script> <script src="../../three.js-master/examples/js/renderers/Projector.js"></script> <script src="../../three.js-master/examples/js/renderers/CanvasRenderer.js"></script> <!-- <script src="../../three.js-master/examples/js/libs/stats .min.js"></script>--> <!-- 加载进度条--> <!-- 引入前端框架vue.js --> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <!-- vuejs的库element-ui --> <script src="http://www.yanhuangxueyuan.com/js/element-ui/index.js"></script> <!-- element-ui样式 --> <link rel="stylesheet" href="http://www.yanhuangxueyuan.com/js/element-ui/index.css"> </head> <body> <div id="app"> <!-- --> <!-- 加载完成后，如果想隐藏进度条可以设置 v-if="loadedData!==100"，也就是loadedData等于100隐藏进度条--> <div v-if="isshow" style="position: absolute;width:400px;" :style="{left: left+'px',top: top+'px'}"> <el-progress :text-inside="true" :stroke-width="30" :percentage="loadedData"></el-progress> </div> </div> <a id="mobile" href="../../mobile_pano2/main/others/wwjs/index.php?type=<?php echo $type ?>&page=<?php echo $page ?>"><img style="position: fixed; top: 2%; right: 2%; transform: scale(0.4);" src="../../images/choose/back.png" /></a> <a id="pc" href="../../pc_pano2/main/others/wwjs/index.php?type=<?php echo $type ?>&page=<?php echo $page ?>"><img style="position: fixed; top: 2%; right: 2%; transform: scale(0.4);" src="../../images/choose/back.png" /></a> <script type="text/javascript"> function browserRedirect() { var sUserAgent = navigator.userAgent.toLowerCase(); var bIsIpad = sUserAgent.match(/ipad/i) == "ipad"; var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os"; var bIsMidp = sUserAgent.match(/midp/i) == "midp"; var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4"; var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb"; var bIsAndroid = sUserAgent.match(/android/i) == "android"; var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce"; var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile"; //document.writeln("您的浏览设备为："); if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) { //这是移动端 document.getElementById('mobile').style.display = "none"; document.getElementById('pc').style.display = "none"; console.log("1111"); } else { //这是pc端 document.getElementById('mobile').style.display = "none"; document.getElementById('pc').style.display = "none"; console.log("2222"); } } browserRedirect(); </script> <script> /** * 创建场景对象Scene */ var scene = new THREE.Scene(); //创建一个Group 对象 group = new THREE.Group(); //把group对象添加到场景中 scene.add( group ); //实例化vue var vm = new Vue({ el: "#app", data: { // loadedData关联加载进度条 loadedData: 0, left: (window.innerWidth - 400) / 2, top: (window.innerHeight - 30) / 2, isshow:1 }, }) /** * OBJ文件加载 只加载obj文件中的几何信息，不加载材质文件.mtl */ var loader = new THREE.OBJLoader(); var model = loader.load('000082.obj',function (obj) { // 控制台查看返回结构：包含一个网格模型Mesh的组Group // console.log(obj); //加载纹理贴图 var texture = new THREE.TextureLoader().load('000082.jpg'); // 基础Basic网格材质，不受光照影响 Phong网格材质受光照影响 obj.children[0].material= new THREE.MeshBasicMaterial({ map:texture,//设置颜色纹理贴图 }) scene.add(obj); obj.children[0].scale.set(1,1,1);//网格模型缩放 //添加obj模型 group.add(obj); if(vm.loadedData >= 100){ vm.isshow = 0; } }, onProgress ); // 在加载过程函数中，更新vue进度条视图绑定的数据 function onProgress(xhr) { // 后台打印查看模型文件加载进度 console.log('加载完成的百分比'+(xhr.loaded/xhr.total*100)+'%'); //把加载进度数据取整然后传递给Vue组件：进度条 vm.$data.loadedData = Math.floor(xhr.loaded/xhr.total*100) } /** * 光源设置 */ //点光源 var point = new THREE.PointLight(0xffffff); point.position.set(400, 200, 300); //点光源位置 scene.add(point); //点光源添加到场景中 //环境光 var ambient = new THREE.AmbientLight(0xffffff,0.3); scene.add(ambient); /** * 相机设置 */ var width = window.innerWidth; //窗口宽度 var height = window.innerHeight; //窗口高度 var k = width / height; //窗口宽高比 var s = 150; //三维场景显示范围控制系数，系数越大，显示的范围越大 //创建相机对象 // var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000); // camera.position.set(200, 300, 200); //设置相机位置 // camera.lookAt(scene.position); //设置相机方向(指向的场景对象) /** * 创建渲染器对象 */ var renderer = new THREE.WebGLRenderer({antialias: true, alpha: true}); renderer.setSize(width, height); //设置渲染区域尺寸 renderer.setClearColor(0xC8C9CA, 1); //设置背景颜色 renderer.setClearAlpha(0.8); document.body.appendChild(renderer.domElement); //body元素中插入canvas对象 camera = new THREE.PerspectiveCamera( 70, width / height, 1, 1000 ); camera.position.x = 200; camera.position.y = 150; camera.position.z = 200; controls = new THREE.TrackballControls( camera ); // 渲染函数 function render() { renderer.render(scene,camera); // renderer.render(scene,camera); //执行渲染操作 // mesh.rotateY(1);//每次绕y轴旋转0.01弧度 // group.rotation.y -= 0.005; group.rotation.y -= 0.002; //使模型围绕y轴旋转 controls.update(); requestAnimationFrame(render);//请求再次执行渲染函数render，渲染下一帧 } render(); //创建控件对象 相机对象camera作为参数 控件可以监听鼠标的变化，改变相机对象的属性 // var controls = new THREE.OrbitControls(camera); controls.enablePan = false; // controls.minDistance =180; controls.minDistance =0; controls.maxDistance =500; // controls.minZoom=1.2; // controls.maxZoom=1.6; // controls.panSpeed = 0; // controls.target = new THREE.Vector3(0,0,0); //监听鼠标事件，触发渲染函数，更新canvas画布渲染效果 // controls.addEventListener('change', render); </script> </body> </html>
4065
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
