Jump to content

How To Use 3D Models in Browser


Recommended Posts

  • Bronze

M2 Download Center

This is the hidden content, please
( 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

 

182226e88e04bd2f739e18e2274aa1062f6e3c.p1822269c1f1542d42cb06638ae75ea7dda6a86.p

 

 

  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>

This is the hidden content, please

Edited by Metin2 Dev
Core X - External 2 Internal
  • Metin2 Dev 3
  • Think 1
  • Good 7
  • muscle 1
  • Love 9
Link to comment
Share on other sites

  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Announcements



×
×
  • Create New...

Important Information

Terms of Use / Privacy Policy / Guidelines / We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.