Sign in to follow this  
ѕeмa™

How to use use 3D models in browser.

2 posts in this topic

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

 

 

9c1f1542d42cb06638ae75ea7dda6a86.png

 

 

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

 

* Picture of the path and files.

e88e04bd2f739e18e2274aa1062f6e3c.png

** 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>

https://mega.nz/#!MgxV3TaR!K74kDjui1sT04CMJ4zeEaZnVSoG4MfU9ZMjsm_v7zuc

  • Like 2
  • Thanks 1

Share this post


Link to post
Share on other sites

Just a little info...

V4Nmygr.png

It comes disabled by default on Chromium based browsers...

On firefox however, it comes enabled.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.