If I want to upload my model, what do i do?

Questions
1

howdy.

So I have become familiar with running models locally through downloading like packages from github and making them to my own like this is what i do:

so on the thing, theres a file called index.html

    <html>
	<head>
		<title>Three.js Boilerplate</title>
		<style>
			body { margin: 0; }
			canvas { width: 100%; height: 100% }
		</style>
	</head>
	<body>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>
		<script src="/assets/OrbitControls.js"></script>
		<script src="/examples/3d-obj-loader/assets/OBJLoader.js"></script>
		<script src="/examples/3d-obj-loader/assets/MTLLoader.js"></script>
		<script src="/examples/3d-obj-loader/scripts.js"></script>
	</body>
</html>

and theres a js file

    var scene = new THREE.Scene();

    var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
    camera.position.z = 200;

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

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

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

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

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

    scene.add(keyLight);
    scene.add(fillLight);
    scene.add(backLight);

    var mtlLoader = new THREE.MTLLoader();
    mtlLoader.setTexturePath('/examples/3d-obj-loader/assets/');
    mtlLoader.setPath('/examples/3d-obj-loader/assets/');
    mtlLoader.load('r2-d2.mtl', function (materials) {

    materials.preload();

    var objLoader = new THREE.OBJLoader();
    objLoader.setMaterials(materials);
    objLoader.setPath('/examples/3d-obj-loader/assets/');
    objLoader.load('r2-d2.obj', function (object) {

        scene.add(object);
        object.position.y -= 60;

    });

});

    var animate = function () {
	requestAnimationFrame( animate );
	controls.update();
	renderer.render(scene, camera);
    };

    animate();

so to my understanding, it seems that I need to run both of these things at the same time through running it on the local server with:

shift-left click
open powershell
npm install
npm run start

go to chrome and type in localhost: 8080 and the picture should pop up…

now, i was able to do that BECAUSE i had downloaded EXACTLY what was on the git repository: btw here’s the link : https://github.com/learnthreejs/three-js-boilerplate

now lets say, i want to upload my OWN model onto the platform but it comes from a website like sketchfab and i download all of the content: gltf, textures, etc. what do i need to do to showcase that file on the localhost than what I had before ? in essence, do i only have to just swap out a particular section of the code and run it or what ? because im trying to display my files via the localhost 8080 through threejs.

2

Have you seen the section of three.js docs, How to run things locally? I think that should describe pretty much what you need, but let us know if anything isn’t clear.

1 Like
3

So I am having a little trouble in trying to trouble shoot my mistake… im not really sure why it is not running…

So this is EXACTLY what im doing.

  1. I go to sketchfab.com to get a model (its a castle)
  2. i download that (gltf file (the autoconverted one))
  3. i then extract the files within the SAME folder that i made for the files that i downloaded from sketchfab.com
  4. i shift-left click
  5. click on “open powershell window here”
  6. a black screen pops up
  7. i type in “npm install” (it does its thing)
  8. npm run start (’ it does its thing again)
  9. i then go to chrome and type in
    localhost:8080/threejs/three.js-master/castle
  10. but then nothing shows up…

in my LAST question, i was able to succesfully upload the r2d2 model because it was straight from a youtube video. but during that case, there were files called:
index.html
node.js
texture file

and thats where I ran all of it.

Should i open the sketchfab file WITHIN the threejs boiler plate folder that I opened ? and if so, how will the program know if im trying to open the castle model or the r2d2 model ?

These are some pictures attached that might be more helpful for some of you guys… i srlsy dont understand where im goin wrong.

castle%20folder

cmd%20prompt

chrome