Because of the use of WEBGL technology in the project. So do some research. The three.js library seems to be very powerful, here is the obj file loaded with the material
1. Download the relevant js https://threejs.org/ thee.js and go to the official website to download the latest version
2. Build a basic wenGL scene
<!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>
<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(){
//edit code
var scene = new THREE.Scene();//Scene construction
var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);//Camera construction
var renderer = new THREE.WebGLRenderer();//Renderer construction
renderer.setClearColor(0xEEEEEE);
renderer.setSize(window.innerWidth,window.innerHeight);
renderer.shadowMapEnabled = true;//Activate shadow
//build an axis
var axes = new THREE.AxisHelper(20);
scene.add(axes);
var planeGeometry = new THREE.PlaneGeometry(40,20);
//var planeMaterial = new THREE.MeshBasicMaterial({color:0xcccccc});
var planeMaterial = new THREE.MeshLambertMaterial({color:0xffffff});//Convert the material that renders the light source
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;
// add lights
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-10,20,10);
spotLight.castShadow = true;
scene.add(spotLight);
// render view perspective
camera.position.x = -30;
camera.position.y = 20;
camera.position.z = 30;
camera.lookAt(scene.position)
$("#WebGL-output").append(renderer.domElement)
renderScene ();
function renderScene(){
requestAnimationFrame(renderScene);
renderer.render(scene,camera);
}
})
</script>
</body>
</html>
3. Use the controls of the three library to perform 3-dimensional rotation of the page, three provides a variety of controls, here we use the trackball control trackballControls.js
First download trackballControls.js and then add the following code to the interface
//Create a control and bind it to the camera 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;
Then add code in the renderScene method
At this point, the function we have completed is
4. Loading external models requires the introduction of relevant js
1.DDSLoader.js 2.OBJLoader.js 3.OBJMTLLoader.js
Of course, the most important protagonist is the obj file, mtl material file and related textures. Modeling software such as 3dmax can be exported, but modeling is not our task. We only need to import the relevant materials given by the modeling masters into the page. code show as below
// 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) + '% loaded';
}
};
var onError = function(xhr) {};
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath('power receiving cabinet/');
mtlLoader.load('Power receiving cabinet.mtl', function(materials) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.setPath('power receiving cabinet/');
objLoader.load('受电柜.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);
});
At this point, our task is completed, and the final effect is
Done, the relevant code needs to be downloaded to upload to git, the address is: https://github.com/zhaoershuang/loadObj.git