前言:
本篇文章主要介紹兩方面的內容:加載三維模型和layer.open彈窗
一、 加載obj格式的三維模型
1、 樣例
前端顯示出來三維的obj模型
2、 代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-2.0.3.min.js" ></script>
<script type="text/javascript" src="js/three.js" ></script>
<script type="text/javascript" src="js/TrackballControls.js" ></script>
<script type="text/javascript" src="js/DDSLoader.js" ></script>
<script type="text/javascript" src="js/OBJLoader.js" ></script>
<script type="text/javascript" src="js/OBJMTLLoader.js" ></script>
<title></title>
</head>
<style>
body{
margin: 0;
overflow: hidden;
}
#percent {
position: absolute;
width: 200px;
height: 20px;
color: red;
text-align: center;
border: 1p;
}
</style>
<body>
<div id="percent"></div>
<div id="WebGL-output">
</div>
<script>
$(function(){
//直接開啓幀數檢測
//編輯代碼處
var scene = new THREE.Scene();//場景構建
var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);//相機構建
var renderer = new THREE.WebGLRenderer();//渲染器構建
renderer.setClearColor(0xEEEEEE);
renderer.setSize(window.innerWidth,window.innerHeight);
renderer.shadowMapEnabled = true;//激活陰影
//構建一個座標軸
var axes = new THREE.AxisHelper(20);
scene.add(axes);
//創建控件並綁定在相機上
trackballControls = new THREE.TrackballControls(camera);
trackballControls.rotateSpeed = 1.0;
trackballControls.zoomSpeed = 1.0;
trackballControls.panSpeed = 1.0;
trackballControls.noZoom=false;
trackballControls.noPan=false;
trackballControls.staticMoving = true;
trackballControls.dynamicDampingFactor = 0.3;
var planeGeometry = new THREE.PlaneGeometry(40,20);
//var planeMaterial = new THREE.MeshBasicMaterial({color:0xcccccc});
var planeMaterial = new THREE.MeshLambertMaterial({color:0xffffff});//轉換對光源有渲染的材質
var plane = new THREE.Mesh(planeGeometry,planeMaterial);
plane.rotation.x = -0.5*Math.PI;
plane.position.x = 15;
plane.position.y = 0;
plane.position.x = 0;
scene.add(plane);
plane.receiveShadow = true;
//添加材質燈光陰影
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-10,20,10);
spotLight.castShadow = true;
scene.add(spotLight);
// model
var onProgress = function(xhr) {
if (xhr.lengthComputable) {
var percentComplete = xhr.loaded / xhr.total * 100;
var percent = document.getElementById("percent");
percent.innerText = Math.round(percentComplete, 2) + '% 已經加載';
}
};
var onError = function(xhr) {};
var mtlLoader = new THREE.MTLLoader();
// mtl文件路徑
mtlLoader.load('map.mtl', function(materials) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
// obj文件路徑;
objLoader.load('map.obj', function(object) {
object.position.y = 0;
object.rotation.y = 0.5;
object.scale.set(0.05, 0.05, 0.05);
scene.add(object);
}, onProgress, onError);
});
//渲染視圖視角
camera.position.x = -30;
camera.position.y = 20;
camera.position.z = 30;
camera.lookAt(scene.position)
$("#WebGL-output").append(renderer.domElement)
renderScene();
function renderScene(){
var clock = new THREE.Clock();
var delta = clock.getDelta();
trackballControls.update(delta);
requestAnimationFrame(renderScene);
renderer.render(scene,camera);
}
})
</script>
</body>
</html>
3、該js控件重要是使用three.js
詳情參考 three.js
二、 layer.open彈窗
前言:
如何實現在前端頁面彈出其他頁面的內容,iframe標籤可以在本頁面內部嵌入另一個頁面的內容, js 的layer.open也能勝任該功能,並且可以以彈窗的方式彈出來,而不是嵌入。
1、 樣例
2、代碼實現及分析(更多屬性可以查看)
function defect_image(defect_type, image_type) {
// 缺陷圖片
layer.open({
// layer.open 根據type不同，類型也就不一樣,有五種類型：0（信息框，默認）1（頁面層）2（iframe層）3（加載層）4（tips層）
type: 2,
// 皮膚
skin: 'demo-class',
// 標題
title: '樣例圖片',
// 鼠標滾動時，層是否固定在可視區域
fix: true,
// 不同風格的關閉按鈕
closeBtn: 2,
// 如果你的shade是存在的，那麼你可以設定shadeClose來控制點擊彈層外區域關閉
// shadeClose: true,
// 罩透明度
//shade: 0.4, //遮罩透明度
// 寬高(彈出層)
area: ['825px', '470px'],
// 可傳入的值是靈活多變的，不僅可以傳入普通的html內容，還可以指定DOM，更可以隨着type的不同而不同
content: '/PV/projects/DefectImage/1',
{#content: 'tail_sm.html',#}
});
}