Threejs and apache

Questions
1

Hey all,

I’m very new to programming in general, so bare with me.

I’ve just started running the threejs “getting start” documentation, and I’m trying to get the program from that running on my local apache server. I have the apache server running, I even have the local host opening the file it just displays blank. How can I have the cube display on my localhost?

Here’s a a copy of the code from the threejs rotating cube program.

<html>
<head>
	<title>My first three.js app</title>
	<style>
		body { margin: 0; }
		canvas { display: block; }
	</style>
</head>
<body>
	<script src="js/three.js"></script>
	<script>
		var scene = new THREE.Scene();
		var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

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

		var geometry = new THREE.BoxGeometry();
		var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
		var cube = new THREE.Mesh( geometry, material );
		scene.add( cube );

		camera.position.z = 5;

		var animate = function () {
			requestAnimationFrame( animate );

			cube.rotation.x += 0.01;
			cube.rotation.y += 0.01;

			renderer.render( scene, camera );
		};

		animate();
	</script>
</body>
2

It worked fine for me… check the path to your js folder… depending on where your script is you may want to change it to “./js/three.js” to let it know to look for it at the root of the structure.

3

Try setting up the page like this:

<html>
<head>
	<title>My first three.js app</title>
	<style>
		body { margin: 0; }
		canvas { display: block; }
	</style>
</head>
<body>
    <h1>It works!</h1>
</body>
</html>

When you open the page you should see the heading “It works!”. If not, then there’s a problem with you apache config.

If that works, try loading the three.js script from a CDN:

<script src="https://unpkg.com/three@0.116.1/build/three.js"></script>
2 Likes
4

yea so your code actually appeared and said," It works!" on my screen.

I also inserted your extra line of code in place of the file directory and it worked!!! Thanks.

I edited my path to find the actual there.js folder on my computer and now I can also host the JS soure locally!

3 Likes
5

Hello, first of all I want to thank you, this helped me a lot. But i still have a question and I don’t know where to ask it :

Is there any way to import threejs modules like ‘GLTFLoader’ or even ‘OrbitControls’ using this method?

I know this is old but like I said, I don’t know where to ask this other than here.
Sorry for the disturbance.

EDIT: I forgot to mention that if I put something like :

import { GLTFLoader } from "https://unpkg.com/three@0.116.1/examples/jsm/loaders/GLTFLoader.js";

at the beginning of the code, it simply stops executing.