Shigetorum635/Client.html

## Client.html


<!DOCTYPE html>
<html>
<head>
  <style>
  html, body { width: 100%; height: 100%; background: #000; color: #fff; }
  body { margin: 0; overflow: hidden; }
  canvas { width: 100%; height: 100%; }
  </style>
</head>
<body>
  <script src='https://threejs.org/build/three.js?r=40008b9a5380fcacce3976bf7c08af5b'></script>
  <script src='https://threejs.org/examples/js/controls/TrackballControls.js?r=735b90b4568125ed6c3f678819b6e058'></script>
  <script src='https://mamboleoo.be/learnThree/demos/OBJLoader.js?r=53c3bce66e43be4f209556518c2fcb54'></script>
  <script src='https://threejs.org/examples/js/controls/OrbitControls.js?r=b337e84de8752b27eda3a12363109e80'></script>
  <script src="Renderer.js"></script>
</body>
</html>


## Renderer.js
function getScene() {
    var scene = new THREE.Scene();
    scene.background = new THREE.Color(0xADD8E6);
    return scene;
  }

  function getCamera() {
    camera = new THREE.PerspectiveCamera(100, 300 / 300, 0.1, 1000);
    camera.position.set(1.85, 3, 3.5);
    camera.position.y = 1.25;
    camera.zoom = 2;
    return camera;
  }

  function getLight(scene) {
    hemiLight = new THREE.HemisphereLight(0xffeeb1, 0x080820, 0.75);
    scene.add(hemiLight);
    light = new THREE.SpotLight(0xffa95c, 0.75);
    light.position.set(-50,50,50);
    light.castShadow = true;
    scene.add( light );

  }

  function getRenderer() {
    var renderer = new THREE.WebGLRenderer({
    antialias: true,
    alpha: true,
    preserveDrawingBuffer: true
    });
    renderer.setClearColor(0x000000, 0); //transparent unless alpha is changed
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(300, 300);
    document.body.appendChild(renderer.domElement);
    return renderer;
  }


  function getControls(camera, renderer) {
    const controls1 = new THREE.OrbitControls( camera, renderer.domElement );
    const controls2 = new THREE.TrackballControls(camera, renderer.domElement);
    controls1.update();
    controls2.update();
    let controls = {controls1:controls1,controls2:controls2}
    return controls;
  }

  function loadOBJ(path, pos1, pos2, pos3) {
    var loader = new THREE.OBJLoader();
    loader.load( path, function ( object ) {
      object.position.set(pos1, pos2, pos3);
      return object;
    });
  }

  function cube(sizex, sizey, sizex, pos1, pos2, pos3, col) {
    const geometry = new THREE.BoxGeometry(sizex, sizey, sizex);
    const material = new THREE.MeshBasicMaterial( {color: col} );
    const cube = new THREE.Mesh( geometry, material );
    cube.position.set(pos1, pos2, pos3);
    scene.add( cube );
  }

  function loadItemWithTex(path, imgpath, x, y, z) {
    var loader = new THREE.OBJLoader();
    var imageLoader = new THREE.ImageLoader();
    var text = new THREE.Texture();
    imageLoader.load(imgpath , function (tex) {
      text.image = tex;
      text.needsUpdate = true;
    });
    loader.load( path, function ( obj ) {
        obj.traverse( function ( child ) {
          if ( child instanceof THREE.Mesh ) {
            child.position.set(x, y, z);
            child.material.map = text;
            child.material.transparent = true;
          }
        });
        scene.add(obj);
    });
  }

    async function loadItem(img, obj) {
        var textureLoader = new THREE.TextureLoader();
        var hatLoader = new THREE.OBJLoader();
        var hatTexture = textureLoader.load(img);
        var hatMaterial = new THREE.MeshPhongMaterial({map: hatTexture});
      await  hatLoader.load(obj, function (object) {
            object.position.y = -3;
            object.traverse(function (node) {
                if (node.isMesh) node.material = hatMaterial;
            });
            scene.add( object );
        });
    }

 async function loadModel() {
    var loader = new THREE.OBJLoader();

        await loader.load( '/storage/head.obj', function ( object ) {
      scene.add(object);
    });
  await   loader.load( '/storage/torso.obj', function ( object ) {
      scene.add(object);
    });
   await loader.load( '/storage/right_arm.obj', function ( object ) {
      scene.add(object);
    });
    await loader.load( '/storage/gear_arm.obj', function ( object ) {
      scene.add(object);
    });
  await  loader.load( '/storage/right_leg.obj', function ( object ) {
      scene.add(object);
    });
  await  loader.load( '/storage/left_leg.obj', function ( object ) {
      scene.add(object);
    });
  }


  function render() {
    requestAnimationFrame(render);
    renderer.render(scene, camera);
    controls.controls1.update();
    controls.controls2.update();
  };

  var scene = getScene();
  var camera = getCamera();
  var light = getLight(scene);
  var renderer = getRenderer();
  var controls = getControls(camera, renderer);

  loadModel();
  render()




	<!DOCTYPE html>
	<html>
	<head>
	<style>
	html, body { width: 100%; height: 100%; background: #000; color: #fff; }
	body { margin: 0; overflow: hidden; }
	canvas { width: 100%; height: 100%; }
	</style>
	</head>
	<body>
	<script src='https://threejs.org/build/three.js?r=40008b9a5380fcacce3976bf7c08af5b'></script>
	<script src='https://threejs.org/examples/js/controls/TrackballControls.js?r=735b90b4568125ed6c3f678819b6e058'></script>
	<script src='https://mamboleoo.be/learnThree/demos/OBJLoader.js?r=53c3bce66e43be4f209556518c2fcb54'></script>
	<script src='https://threejs.org/examples/js/controls/OrbitControls.js?r=b337e84de8752b27eda3a12363109e80'></script>
	<script src="Renderer.js"></script>
	</body>
	</html>
	function getScene() {
	var scene = new THREE.Scene();
	scene.background = new THREE.Color(0xADD8E6);
	return scene;
	}

	function getCamera() {
	camera = new THREE.PerspectiveCamera(100, 300 / 300, 0.1, 1000);
	camera.position.set(1.85, 3, 3.5);
	camera.position.y = 1.25;
	camera.zoom = 2;
	return camera;
	}

	function getLight(scene) {
	hemiLight = new THREE.HemisphereLight(0xffeeb1, 0x080820, 0.75);
	scene.add(hemiLight);
	light = new THREE.SpotLight(0xffa95c, 0.75);
	light.position.set(-50,50,50);
	light.castShadow = true;
	scene.add( light );

	}

	function getRenderer() {
	var renderer = new THREE.WebGLRenderer({
	antialias: true,
	alpha: true,
	preserveDrawingBuffer: true
	});
	renderer.setClearColor(0x000000, 0); //transparent unless alpha is changed
	renderer.setPixelRatio(window.devicePixelRatio);
	renderer.setSize(300, 300);
	document.body.appendChild(renderer.domElement);
	return renderer;
	}


	function getControls(camera, renderer) {
	const controls1 = new THREE.OrbitControls( camera, renderer.domElement );
	const controls2 = new THREE.TrackballControls(camera, renderer.domElement);
	controls1.update();
	controls2.update();
	let controls = {controls1:controls1,controls2:controls2}
	return controls;
	}

	function loadOBJ(path, pos1, pos2, pos3) {
	var loader = new THREE.OBJLoader();
	loader.load( path, function ( object ) {
	object.position.set(pos1, pos2, pos3);
	return object;
	});
	}

	function cube(sizex, sizey, sizex, pos1, pos2, pos3, col) {
	const geometry = new THREE.BoxGeometry(sizex, sizey, sizex);
	const material = new THREE.MeshBasicMaterial( {color: col} );
	const cube = new THREE.Mesh( geometry, material );
	cube.position.set(pos1, pos2, pos3);
	scene.add( cube );
	}

	function loadItemWithTex(path, imgpath, x, y, z) {
	var loader = new THREE.OBJLoader();
	var imageLoader = new THREE.ImageLoader();
	var text = new THREE.Texture();
	imageLoader.load(imgpath , function (tex) {
	text.image = tex;
	text.needsUpdate = true;
	});
	loader.load( path, function ( obj ) {
	obj.traverse( function ( child ) {
	if ( child instanceof THREE.Mesh ) {
	child.position.set(x, y, z);
	child.material.map = text;
	child.material.transparent = true;
	}
	});
	scene.add(obj);
	});
	}

	async function loadItem(img, obj) {
	var textureLoader = new THREE.TextureLoader();
	var hatLoader = new THREE.OBJLoader();
	var hatTexture = textureLoader.load(img);
	var hatMaterial = new THREE.MeshPhongMaterial({map: hatTexture});
	await hatLoader.load(obj, function (object) {
	object.position.y = -3;
	object.traverse(function (node) {
	if (node.isMesh) node.material = hatMaterial;
	});
	scene.add( object );
	});
	}

	async function loadModel() {
	var loader = new THREE.OBJLoader();

	await loader.load( '/storage/head.obj', function ( object ) {
	scene.add(object);
	});
	await loader.load( '/storage/torso.obj', function ( object ) {
	scene.add(object);
	});
	await loader.load( '/storage/right_arm.obj', function ( object ) {
	scene.add(object);
	});
	await loader.load( '/storage/gear_arm.obj', function ( object ) {
	scene.add(object);
	});
	await loader.load( '/storage/right_leg.obj', function ( object ) {
	scene.add(object);
	});
	await loader.load( '/storage/left_leg.obj', function ( object ) {
	scene.add(object);
	});
	}


	function render() {
	requestAnimationFrame(render);
	renderer.render(scene, camera);
	controls.controls1.update();
	controls.controls2.update();
	};

	var scene = getScene();
	var camera = getCamera();
	var light = getLight(scene);
	var renderer = getRenderer();
	var controls = getControls(camera, renderer);

	loadModel();
	render()