Three.js_模型加载进度条
⾸先引⼊js 因为这个进度条使⽤vue的ui样式库
<!-- 加载进度条-->
<!-- 引⼊前端框架vue.js -->
<script src="cdn.jsdelivr/npm/vue@2.5.16/dist/vue.js"></script>
<!-- vuejs的库element-ui -->
<script src="www.yanhuangxueyuan/js/element-ui/index.js"></script>
<!-- element-ui样式 -->
<link rel="stylesheet" href="www.yanhuangxueyuan/js/element-ui/index.css">
其次在body⾥加⼊html代码
<div id="app">
<!-- -->
javascript进度条<!-- 加载完成后，如果想隐藏进度条可以设置 v-if="loadedData!==100"，也就是loadedData等于100隐藏进度条--> <div v-if="isshow" :>
<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.al*100)+'%');
//把加载进度数据取整然后传递给Vue组件：进度条
vm.$data.loadedData = Math.floor(xhr.al*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>
<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="cdn.jsdelivr/npm/vue@2.5.16/dist/vue.js"></script>
<!-- vuejs的库element-ui -->
<script src="www.yanhuangxueyuan/js/element-ui/index.js"></script>
<!-- element-ui样式 -->
<link rel="stylesheet" href="www.yanhuangxueyuan/js/element-ui/index.css">
</head>
<body>
<div id="app">
<!-- -->
<!-- 加载完成后，如果想隐藏进度条可以设置 v-if="loadedData!==100"，也就是loadedData等于100隐藏进度条-->
<div v-if="isshow" :>
<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 pc" href="../../pc_pano2/main/
others/wwjs/index.php?type=<?php echo $type ?>&page=<?php echo $page ?>"><img text/javascript">
function browserRedirect() {
var sUserAgent = LowerCase();
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) {
//这是移动端
console.log("1111");
} else {
//这是pc端
console.log("2222");
}
}
browserRedirect();
</script>
<script>
/**
* 创建场景对象Scene
* 创建场景对象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.al*100)+'%'); //把加载进度数据取整然后传递给Vue组件：进度条
vm.$data.loadedData = Math.floor(xhr.al*100)
}
/**
* 光源设置
*/
//点光源
var point = new THREE.PointLight(0xffffff);
point.position.set(400, 200, 300); //点光源位置
scene.add(point); //点光源添加到场景中
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() {
// der(scene,camera); //执⾏渲染操作
/
/ ateY(1);//每次绕y轴旋转0.01弧度
// ation.y -= 0.005;
controls.update();
requestAnimationFrame(render);//请求再次执⾏渲染函数render，渲染下⼀帧
}
render();
//创建控件对象相机对象camera作为参数控件可以监听⿏标的变化，改变相机对象的属性 // var controls = new THREE.OrbitControls(camera);
// 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>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论