I Cannot Load the Three.js Library In Cloud 9 - javascript

I am trying to make a three-d js game in c9. This is my html:
<html>
<head><title>Tower Defender</title></head>
<body>
<script src="/three.js"></script>
<script src="/main.js"></script>
</body>
</html>
And this is the main.js file:
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( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
function render() {
requestAnimationFrame( render );
renderer.render( scene, camera );
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
}
render();
Both of these files are in the main dir of the project. I have the three.js file also in the main dir. The three.js file is the file that is in the src dir in the three.js download folder. (The dowload file is called Three.js, and I renamed it with all lowercase in c9). When I run main.html and open the webpage, nothing is there. I check the js console, and i see this:
Uncaught TypeError: THREE.Scene is not a constructor main.js:5
I also see little warning signs on the left side of the code window, where ever the code uses THREE. To me, it looks like everything should be working fine.
EDIT:
I have changed the html to this:
<html>
<head><title>Tower Defender</title></head>
<body>
<script type="text/javascript" src="three.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>

Related

I don't know why this three.js example doesn't work

I installed three.js through npm with the command: npm install --save three
I'm currently using VS-Code & have two files : index.html and index.js
By copying a simple example from threejs.org I can't seem to get three.js to work,because i only get a blank screen after running a live server,instead of a rotating cube.
Here's the code to both files:
import * as THREE from 'three';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight,
0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material);
scene.add(cube);
camera.position.z = 5;
function animate() {
requestAnimationFrame(animate)
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera )
}
animate();
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "index.css">
<script src = "index.js"></script>
<title >Title</title>
</head>
<body style = "margin: 0px;">
</body>
</html>
If you open the page in a browser and take a look at the dev tools menu, you'll find the following error:.
If you modify the script tag with type="module" to resolve this error, you get a new error: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".
Basically, the browser isn't able to find the three.js JavaScript library.
One easy fix is to just tell the browser to load the library from a web url when the page loads instead of installing it through npm and then loading those installed npm files into the web page:
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "index.css">
<!-- This script tag loads the three.js library via url -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<title >Title</title>
</head>
<body style = "margin: 0px;">
<script src = "index.js"></script>
</body>
</html>
// import is no longer needed since the added script tag loads the library and adds the global THREE variable into the page
// import * as THREE from 'three';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight,
0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material);
scene.add(cube);
camera.position.z = 5;
function animate() {
requestAnimationFrame(animate)
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera )
}
animate();
Also note that document.body.appendChild will only work once the document has loaded (which doesn't necessarily happen before your script is executed). This issue was fixed by adding your <script> tag below the <body> tag in the html.

TypeError: THREE.GLTFLoader is not a constructor

I'm trying to import a 3d model on my javascript file, this is the 'test.html' code:
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
</head>
<body>
<script type="module" src="./three.js-master/examples/jsm/loaders/GLTFLoader.js"></script>
<script src="./three.js-master/build/three.js"></script>
<script src="./test.js"></script>
</body>
</html>
And this is the 'test.js' code:
var camera, scene, renderer;
window.onload = function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 45, 1.8, 0.1, 20.0 ); // fovy, aspect, near, far
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xffffff);
renderer.setSize(1280, 720); //Size of the camera
document.body.appendChild(renderer.domElement);
var loader = new THREE.GLTFLoader();
loader.load( 'duck/source/mindbreaker.glb', function ( gltf ) {
scene.add( gltf.scene );
}, undefined, function ( error ) {
console.error( error );
} );
camera.position.x = 0.0;
camera.position.y = 0.0;
camera.position.z = 10.0;
render();
}
function render(){
requestAnimationFrame(render);
renderer.render(scene, camera);
}
I run it on FIREFOX and I tried to change every possible path.
I also created a localhost to read the files, but the same error appears.
It is because you are loading in the ES6 version of GLTFLoader, but using the pre built (ES5) three.js.
Load in the ES5 version of the GLTFLoader from the examples/js/loaders folder (and load it after three.js).
eg.
<script src="./three.js-master/build/three.js"></script>
<script src="./three.js-master/examples/js/loaders/GLTFLoader.js"></script>
<script src="./test.js"></script>

Three.js - Imported obj material not showing

I suppose my first question is - because most of the threads here I've found on the subject are 3-5 years old now - what is the best way to import 3dsmax models or scenes to use in three.js?
Currently I've made a quick coke can with a simple texture applied, however when I use the obj loader found under examples/js/loaders the texture does not load.
I've tried using the python script to convert obj files to js however given that there is an obj loader this seemed like an unnecessary additional step (I was not able to get the textures to work that way either). Am I correct in assuming the obj loader has made the python conversion script obsolete?
When I try to load the scene I get the following error in my console:
Not allowed to load local resource: file:///C:/wamp/www/gordon/skins/coke_uv_map.jpg
See the following code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
</body>
<script src="three.min.js"></script>
<script src="controls/OrbitControls.js"></script>
<script src="DDSLoader.js"></script>
<script src="MTLLoader.js"></script>
<script src="OBJMTLLoader.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 controls;
controls = new THREE.OrbitControls( camera );
controls.addEventListener( 'mousedown', render );
var hemiLight = new THREE.HemisphereLight( 0xa4cecb, 0xdae0e6, 1 );
scene.add(hemiLight);
var dirLight = new THREE.DirectionalLight( 0xFFA200, 1);
scene.add(dirLight);
THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );
var loader = new THREE.OBJMTLLoader();
loader.load( 'cokecan.obj', 'cokecan.mtl', function ( object ) {
object.position.y = 0;
object.position.x = 0;
object.position.z = 0;
scene.add( object );
});
camera.position.z = 50;
camera.position.y = 25;
camera.position.x = 0;
function render() {
requestAnimationFrame( render );
renderer.render( scene, camera );
}
render();
</script>
</html>
Here's a comparison of what I want versus what I'm getting (ignore the lighting):
For anybody getting the same error - I resolved this by opening the .mtl file that came with the .obj in a text editor and changing the path to my image.

How to use a variable from one js file in another file?

I have a basic cube scene with Three.js
Now I want the camera to move with perlin noise. So I downloaded this Perlin noise library and pasted it next to the other libraries:
https://github.com/josephg/noisejs
I also linked added the script in the html :
<script src="three.min.js"></script>
<script src="my-three.js"></script>
<script src="perlin.js"></script>
Then i want to use the noise, so i created a variable at the end of the perlin.js file, like this :
var ruido = noise.simplex3(10, 10, 1);
Last step would be to use this variable in the camera, so in my "my-three.js" file i added this line:
camera.position.z = ruido;
But i get a :
Uncaught ReferenceError: ruido is not defined
Somehow the variable is not being received in the "my-three.js" file.
The full "my-three.js" file is:
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( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = ruido;
var render = function () {
requestAnimationFrame( render );
cube.rotation.x += 0.001;
cube.rotation.y += 0.001;
renderer.render(scene, camera);
};
render();
Thanks in advance.
You should include the perlin.js file before the my-three.js file, since the my-three.js is depended on the perlin.js file.
<script src="perlin.js"></script>
<script src="my-three.js"></script>
You can use AMD (Asynchronous Module Definition) approach and libraries that implements it.
https://github.com/amdjs/amdjs-api/blob/master/AMD.md
It solves this and many similar problems with variables, modules, its dependencies and so on.

Loading DAE in Three.js

I have a problem, I can't load DAE file in Three.js. Can anybody help please.
I have model.dae in the same directory as index.html and when I load page it shows only black screen.
I had a file FBX and I exported it with Maya to FBX_DAE
<html>
<head>
<title>My first Three.js app</title>
<style>canvas { width: 100%; height: 100% }</style>
</head>
<body>
<style type="text/css">
html, body {
margin:0;
padding: 0;
}
</style>
<script src="js/three.min.js"></script>
<script src="js/ColladaLoader.min.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 );
loader = new THREE.ColladaLoader();
loader.load('model.DAE',function colladaReady( collada ){
player = collada.scene;
skin = collada.skins [ 0 ];
scene.add( player );
});
/*
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
*/
camera.position.z = 5;
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
//cube.rotation.x += 0.1;
//cube.rotation.y += 0.1;
}
render();
</script>
</body>
</html>
This is just a guess, but I suspect you're not loading the ColladaLoader properly.
Should be this:
<script src="js/ColladaLoader.js"></script>
Instead of this:
<script src="js/ColladaLoader.min.js"></script>
If this is the case you should be seeing a error in the console.
You might have to run your sample on a web server to be able to load the .dae files, since JavaScript does not allow file access on a client for security reasons.
I´ve had the same issue with DAE-Files i had created in Cinema4D. I had to export a FBX from C4D, import it to Blender and export the DAE with Blender.
C4D´s DAE-Exporter seems broken

Categories

Resources