当前位置：网站首页>Threejs rendering obj+mtl model source code, 3D factory model

Threejs rendering obj+mtl model source code, 3D factory model

2022-07-05 04:01:00 【Zuo Ben】

1, Introduce

Threejs Implement the introduction of the factory model , load obj+mtl Model source code download , It can be used for learning and research , Secondary development

2, Part of the code

//  Create a scene , It will contain all our elements , Like an object , Cameras and lights .
var scene = new THREE.Scene();

var cubeLoader = new THREE.CubeTextureLoader();

//  Create a camera , It defines where we are looking 
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
//  Aim the camera at the center of the scene 
camera.position.x = 10;
camera.position.y = 50;
camera.position.z = 90;
camera.lookAt(scene.position);
var orbit = new THREE.OrbitControls(camera);

//  Create a renderer and set the size ,WebGLRenderer The computer graphics card will be used to render the scene 
renderer = new THREE.WebGLRenderer({
	antialias: true,
	logarithmicDepthBuffer: true,
});
renderer.setClearColor(new THREE.Color("#0e0934"));
renderer.setSize(window.innerWidth, window.innerHeight);
//  Basic light source , And apply to the scene 
scene.add(new THREE.AmbientLight("#ffffff", 1.5));

initModel();

//  Add the output of the renderer to HTML Elements 
document.getElementById("dom").appendChild(renderer.domElement);

//  Start animation 
renderScene();

//  Add model 
function initModel() {
	var mtlLoader = new THREE.MTLLoader();
	mtlLoader.setPath("assets/models/factory_new/")
	mtlLoader.load('factory.mtl', function(materials) {
		materials.preload();

		var objLoader = new THREE.OBJLoader();
		objLoader.setMaterials(materials);
		objLoader.load('assets/models/factory_new/factory.obj', function(object) {
			mesh = object;
			mesh.scale.set(0.0003, 0.0003, 0.0003);
			mesh.position.set(-200, 0.5, -200);
			scene.add(mesh);
		}, function(xhr) {
			let num = Math.floor(xhr.loaded / xhr.total * 100) / 100;
			NProgress.set(num)
			console.log(' Percentage of load complete '+(xhr.loaded/xhr.total*100)+'%');
		});
	});
}