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.
Related
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>
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.
I receive an error: Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at file:///C:/Users/.../img.jpg may not be loaded.
var scene, camera, renderer;
var geometry, material, mesh;
init();
animate();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 1000;
geometry = new THREE.CubeGeometry( 300, 300, 300 );
material = new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('img.jpg')
});
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColorHex( 0xFFF8DC, 1 );
document.body.appendChild( renderer.domElement );
}
function animate() {
requestAnimationFrame( animate );
mesh.rotation.x += 0.02;
mesh.rotation.y += 0.01;
renderer.render( scene, camera );
}
I run a simple static content server called mongoose locally on my development machine. Simply point it to the folder that contains your project and you can load the page without worrying about any cross site scripting/origin issues,
You can use a converter to binary code image http://codepen.io/anon/pen/pHKyw physical file to avoid problems.
or you can upload one server, this failure happens because you're not running on a server and the file can not be found.
for example:
original
map: THREE.ImageUtils.loadTexture('img.jpg')
replace
map: THREE.ImageUtils.loadTexture('data:image/png;base64,iVBORw0KGgoAAAANSU ... ')
I have this code below and can´t seem to load the model.
loader = new THREE.JSONLoader(true);
loader.load("modelo.js" , function ( geometry, materials) {
mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );
scene.add( mesh );
} );
The entire code is below. If i take the out the line "loader.load(...)" it works fine and loads a small cube rotating as in the example from the tutorial in threejs.org, but when i try to load my model it doesn´t load anything. I watch a lot of examples and make this in different ways but it just doesn´t load.
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.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;
loader = new THREE.JSONLoader(true);
loader.load("modelo.js" , function ( geometry, materials) {
mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );
scene.add( mesh );
} );
var render = function () {
requestAnimationFrame(render);
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
};
render();
Good day, I've tested your code with r61 of the Three.js library. It works fine, here's my suggestions.
First try adding a light source to your scene. If for example your background is black and you load a model (even with a texture) that is unlit, it will be black on black. So:
var ambientLight = new THREE.AmbientLight(0xBBBBBB);
scene.add(ambientLight);
If that doesn't work have a look at some of the material values in the modelo.js file specifically the colorDiffuse value in the model's json is set to black (or matches your scenes background color). Did you at anytime have this in Maya? No matter, you've said you have tried a few models so that's a long shot anyway, but if it helps check out this post:
Loading Maya model with Three.js
Next, are you running this locally? If so are you running it in Chrome and have you set the chrome.exe --allow-file-access-from-files flag. If not try it in Firefox, it should just work.
Oh also check that (a) your camera isn't too close. Maybe move it back to say:
camera.position.z = 100;
or (b) your mesh is big enough to see:
mesh.scale.set(100, 100, 100);
That should do it, good luck
I'm having a hard time loading JSON models in three.js. I'v made a very simple tube-like model and textured it in blender. The issue is that whenever i try to load the json model in three.js, the vertexes looks weird.
I'v tried exporting model with different settings but got always the same problem, so i think the problem is within my code.
EDIT: Negative. I loaded buffalo model and it looked like it should. Any idea what i'm doing wrong inside blender?
<html>
<head>
<style>
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<script src="threejs/three.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);
var loader = new THREE.JSONLoader();
loader.load( "models/test.js", modelToScene );
var ambientLight = new THREE.AmbientLight(0x111111);
scene.add(ambientLight);
var light = new THREE.PointLight( 0xFFFFDD );
light.position.set( -15, 10, 15 );
scene.add( light );
function modelToScene( geometry, materials ) {
var material = new THREE.MeshFaceMaterial( materials );
obj = new THREE.Mesh( geometry, material );
obj.scale.set(1,1,1);
scene.add( obj );
}
camera.position.z = 5;
camera.position.y = 1;
var render = function () {
requestAnimationFrame(render);
obj.rotation.y += 0.01;
obj.rotation.x += 0.02;
renderer.render(scene, camera);
};
render();
</script>
</body>
any help will be appreciated.
Thanks, Jukka Korhonen
I have made some brutal mistakes exporting JSON models. For all those who'r having issues with exporting from Blender. I suggest you to check out your exporting settings.
for me, it worked with following setup;
geometry:
Vertices: check, Faces: check, normals: check, skinning: check
Materials: check all
Settings: Flip YZ: check
Animation: Morph animation
and all mehses: check