How To Use 3D Models in Browser

ѕeмa™ · November 3, 2019

M2 Download Center

This is the hidden content, please

Sign In

or

Sign Up

( Internal )

I will explain you how can you watch 3D models in a browser, for example, metin2 models.

Moderators please fix the fucking problem with the spoilers. Thanks

You need the tool grnreader.exe (Dont know who made it, but the src is in the attachment)
Drag the granny model to the grnreader.exe and new file will be created.
Open that object with 3DMax and export it to (.obj and .mtl)
Now you just need to copy the texture dds and transfor to .png.
Open .mtl file and replace the texture path (example above) *
Use in the browser the next js files:
1. webgl extension.
*Picture of the texture path and files
** Example code

* Picture of the path and files.

** Code


   <script src="vendors/js/webgl/three.js"></script>
    <script src="vendors/js/webgl/Detector.js"></script>
    <script src="vendors/js/webgl/OrbitControls.js"></script>
    <script src="vendors/js/webgl/OBJLoader.js"></script>
    <script src="vendors/js/webgl/MTLLoader.js"></script>
	<script>
		if (!Detector.webgl) {
			Detector.addGetWebGLMessage();
		}

		var container;
		var camera, controls, scene, renderer;
		var lighting, ambient, keyLight, fillLight, backLight;

		var windowHalfX = document.getElementById("content").offsetWidth-100; // carefull here, use your OWN getElementById.
		var windowHalfY = document.getElementById("content").offsetHeight; // carefull here, use your OWN getElementById.

		init();
		animate();

		function init() {

			container = document.createElement('div');
			document.getElementById("3dmodel").appendChild(container); // carefull here, use your OWN getElementById.

			camera = new THREE.PerspectiveCamera(3000, window.innerWidth / window.innerHeight, 1, 1000);
			camera.position.z = 200; // can be 150

			/* Scene */

			scene = new THREE.Scene();
			lighting = false;

			ambient = new THREE.AmbientLight(0xffffff, 1.0);
			scene.add(ambient);

			keyLight = new THREE.DirectionalLight(new THREE.Color('hsl(30, 100%, 75%)'), 1.0);
			keyLight.position.set(100, 0, 100);

			fillLight = new THREE.DirectionalLight(new THREE.Color('hsl(240, 100%, 75%)'), 0.75);
			fillLight.position.set(100, 0, 100);

			backLight = new THREE.DirectionalLight(0xffffff, 1.0);
			backLight.position.set(100, 0, -100).normalize();

			/* Model */

			var mtlLoader = new THREE.MTLLoader();
			mtlLoader.setBaseUrl('vendors/mobs/stray_dog/');
			mtlLoader.setPath('vendors/mobs/stray_dog/');
			mtlLoader.load('stray_dog.mtl', function (materials) {

				materials.preload();

				// materials.materials.default.map.magFilter = THREE.NearestFilter;
				// materials.materials.default.map.minFilter = THREE.LinearFilter;

				var objLoader = new THREE.OBJLoader();
				objLoader.setMaterials(materials);
				objLoader.setPath('vendors/mobs/stray_dog/');
				objLoader.load('stray_dog.obj', function (object) {
					scene.add(object);
				});
			});

			/* Renderer */

			renderer = new THREE.WebGLRenderer({ alpha: true });
			renderer.setPixelRatio(window.devicePixelRatio);
			renderer.setSize(windowHalfX, window.innerHeight);
			//renderer.setClearColor(new THREE.Color("hsl(0, 0%, 0%)")); // 100% = background blanco, 10% = gris, 0% = negro
            //renderer.setClearColorHex( 0xffffff, 0 );
			container.appendChild(renderer.domElement);

			/* Controls */

			controls = new THREE.OrbitControls(camera, renderer.domElement);
			controls.enableDamping = true;
			controls.dampingFactor = 0.25;
			controls.enableZoom = true;

			/* Events */

			window.addEventListener('resize', onWindowResize, false);
			window.addEventListener('keydown', onKeyboardEvent, false);
		}

		function onWindowResize() {
			var windowHalfX = document.getElementById("content").offsetWidth-35; // carefull here, use your OWN getElementById.
			windowHalfY = window.innerHeight / 2;
			camera.aspect = window.innerWidth / window.innerHeight;
			camera.updateProjectionMatrix();
			renderer.setSize(windowHalfX, window.innerHeight);
		}

		function onKeyboardEvent(e) {
			if (e.code === 'KeyL') {
				lighting = !lighting;
				if (lighting) {
					ambient.intensity = 0.25;
					scene.add(keyLight);
					scene.add(fillLight);
					scene.add(backLight);
				} else {
					ambient.intensity = 1.0;
					scene.remove(keyLight);
					scene.remove(fillLight);
					scene.remove(backLight);
				}
			}
		}

		function animate() {
			requestAnimationFrame(animate);
			controls.update();
			render();
		}

		function render() {
			renderer.render(scene, camera);
		}
	</script>