Firebug is throwing an error saying that "THREE is not defined" on my var camera and I honestly cannot see why. The error doesn't make any sense to me because as I see it; there is a defined THREE right that on the right hand of the equals sign.
init();
animate();
function init()
{
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z = 500;
var controls = new THREE.TrackballControls( camera );
controls.addEventListener('change', render);
var scene = new THREE.Scene();
var geometry = new THREE.BoxGeometry(100, 100, 100);
var material = new THREE.MeshBasicMaterial();
var mesh = new THREE.Mesh( geometry, material );
scene.add(mesh);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild( renderer.domElement );
}
function animate()
{
requestAnimationFrame( animate );
controls.update();
}
function render()
{
renderer.render( scene, camera );
}
Your code is good except you're defining your variable inside the init() function which means those variables are local to the init() function and will not be recognized outside of it.
Declare your variables outside the function and that should help solve the problem. As an example:
var camera, controls, scene, geometry, material, mesh, renderer;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z = 500;
...
Most likely, you are not including three.js script correctly. Check Firebug and watch for THREE variable - it must be defined before you start working with THREE.JS. Check for network errors if it was loaded properly.
Next, ensure to run your code after rest of the page is loaded.
window.addEventListener('load', init);
This will call init function only after page is loaded
Then, define your variables in global scope and not inside init function. And also, don't forget to call render function inside your animate function.
Related
Im having troubles with Orbitcontrols. I have my threee js model and i want it to autorotate when the page is loaded for the first time but for some reason it does not work properly. The 3d model stand still as if the command line was not considered.
Here is the code where i initialize the function:
the init() function where i declare my model and add them to the scene:
controls.autoRotate=true
controls.addEventListener('change', render);
render();
the render function:
function render() {
renderer.render(scene, camera);
}
Please note that i can move my model as i wish in my page but the automatic rotation does not seem to be triggered.
Using OrbitControls.autoRotate only works if you call controls.update() in your animation loop. You can't use automatic rotation in combination with on-demand rendering (meaning by utilizing the change event listener of the controls).
let camera, scene, renderer, controls;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
camera.position.z = 1;
scene = new THREE.Scene();
const geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
const material = new THREE.MeshNormalMaterial();
const mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.autoRotate = true;
}
function animate() {
requestAnimationFrame( animate );
controls.update();
renderer.render( scene, camera );
}
body {
margin: 0;
}
<script src="https://cdn.jsdelivr.net/npm/three#0.124/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three#0.124/examples/js/controls/OrbitControls.js"></script>
I have been trying various options for all day to solve my problem. I was also trying various examples posted here in previous years. Although my problem is still unsolved and my objects are not appearing.
I was trying 3 different formats: .json, .js and now .mtl with.obj. My current code looks like this:
function addModels() {
var mtlLoader = new THREE.MTLLoader();
mtlLoader.load("../models/lampa.mtl", function (materials) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.load("../models/lampa.obj", function (mesh) {
mesh.scale.set(1,1,1);
mesh.position.set(0,0,0);
scene.add(mesh);
})
})
And this is html file with the script running canvas.
var camera;
var scene;
var renderer = new THREE.WebGLRenderer();
var controls;
//Simple functions to initialise scene and render it.
initialise();
render();
//animate();
//add models
addModels();
function initialise() {
// Create a scene
scene = new THREE.Scene();
// Add the camera
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 100, 250);
// Add scene elements
addWalls();
addKerbs();
// Add lights
addLights();
// Create the WebGL Renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
//add Grass
createGrass();
addGrass();
// Append the renderer to the body
document.body.appendChild( renderer.domElement );
// Add a resize event listener
window.addEventListener( 'resize', Resize, false );
// Add the orbit controls
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.target = new THREE.Vector3(0, 100, 0);
}
//rendering function
function render() {
renderer.render( scene, camera );
requestAnimationFrame( render );
controls.update();
}
//Window resize.
function Resize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame(animate);
render();
status.update();
renderer.render(scene,camera);
}
When addModels() is in initialise function, but it throws an error like this:
Every answer is appreciated. Thank you.
I am really sorry for every trouble. It appears that everything is fine here, just three.js was out of date...
I'm new to three js and webgl. I have a complicated solar system I'm building and it all works great until I want to animate anything. Here is a very stripped down version to show the problem (with sun in low res). If I add the line sun.rotate.y += 1; it wont load or run anything at all. I have looked around a lot and can't figure out why. I'm sure it is something stupid I'm missing. Thanks for any help.
<script>
// SETUP SCENE
var camera, controls, scene, renderer;
var container
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 90000 );
camera.position.z = 100;
controls = new THREE.TrackballControls( camera );
controls.rotateSpeed = 1.0;
controls.zoomSpeed = .2;
controls.panSpeed = 0.8;
controls.noZoom = false;
controls.noPan = true;
controls.staticMoving = false;
controls.dynamicDampingFactor = 0.3;
controls.keys = [ 65, 83, 68 ];
controls.addEventListener( 'change', render );
scene = new THREE.Scene();
// ADD THE SUN PHYSICAL LOCATION
var geometry = new THREE.SphereGeometry(5, 3, 3, 0, Math.PI * 2, 0, Math.PI * 2);
var material = new THREE.MeshBasicMaterial({color: "Yellow"});
var sun = new THREE.Mesh(geometry, material);
scene.add(sun);
//RENDER
renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container = document.getElementById( 'container' );
container.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
render();
animate();
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
controls.handleResize();
render();
}
function animate() {
requestAnimationFrame( animate );
controls.update();
render();
}
function render() {
sun.rotate.y +=1; // Problem animating?
renderer.render( scene, camera );
}
</script>
You need to define sun as a global variable because currently it is not visible in the render() scope.
Also, I think to rotate a mesh you call "rotateX(), rotateY() or rotateZ()" so it is sun.rotateY(0.01)
Edit: I realized you can rotate the mesh by modifying its rotation rather than its rotate property.
You have a scope issue ( well it's complicated depending on what you are using es6 or es5), these are the offending bits:
Declare your global(or not Js will add it) to the global space :
var container, sun;
And refer to it inside the init function:
this.sun = new THREE.Mesh(geometry, material);
Working Pen:
Scope Issue in Three.js
Also, TrackballControls is not part of Three.js, you have to import it, check the pen.
Also, Also,for the rotation you might want to use:
sun.rotation.y += 0.003;
My problem is the same as this question: Three.js - Uncaught TypeError: undefined is not a function -- which did not have a solution that works for me.
I am starting on the Getting Started page in three.js (http://threejs.org/docs/index.html#Manual/Introduction/Creating_a_scene) which presents an
application with the three.js library in a folder accompanying the HTML file. The heart of the code is here:
<script src="js/three.js"></script>
<script>
// Javascript will go here
var scene = new THREE.Scene();
var camera = THREE.PerspectiveCamera( 75,
window.innerWidth / window.innerHeight, 1, 10000 );
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 = 1000;
function render() {
requestAnimationFrame( render );
renderer.render( scene, camera );
}
render();
</script>
One may use either the minimized library (three.min.js) in which case I get the error Uncaught TypeError: undefined is not a function and Chrome developer tools cites a line in that file. Likewise, using the unminimized version (three.js) from the mr.doob build folder, the same error occurs but on line 10614. In three.js this is the blank line above this.updateProjectionMatrix() in the following code:
THREE.PerspectiveCamera = function ( fov, aspect, near, far ) {
THREE.Camera.call( this );
this.type = 'PerspectiveCamera';
this.zoom = 1;
this.fov = fov !== undefined ? fov : 50;
this.aspect = aspect !== undefined ? aspect : 1;
this.near = near !== undefined ? near : 0.1;
this.far = far !== undefined ? far : 2000;
this.updateProjectionMatrix();
};
Notice the use of undefined in the four lines above where the error pointed.
I am presenting the code using a MAMP Web server. I have installed it both on my iMac and my Windows 8 PC. The page has failed to appear in both Chrome and Firefox always with the same diagnostic message.
I feel I'm making some very basic error. Help?
You missed the tiny word "new" when creating an instance of THREE.PerspectiveCamera:
<script src="js/three.js"></script>
<script>
// Javascript will go here
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75,
window.innerWidth / window.innerHeight, 1, 10000 );
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 = 1000;
function render() {
requestAnimationFrame( render );
renderer.render( scene, camera );
}
render();
</script>
Also please note, that you won't see much as your camera is too far away from that tiny box :)
Make it
camera.position.z = 50;
to see your box shining in green in front of you..
I'm trying to animate an exported model(from 3dsmax -> dae file -> json) with animations using three.js. I am not getting any console errors but rather just a blank screen. Anyone have any ideas on why this is happening? I'm happy to also include json, png's, max file, dae file or any other resource that may be of help. Any help would be much appreciated. I'm stuck...here is the javascript:
<script>
var camera, scene, renderer, animmesh;
var clock = new THREE.Clock();
function init() {
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z = 5;
scene = new THREE.Scene();
scene.add(camera);
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var loader = new THREE.JSONLoader();
loader.load("../../assets/model-threejs.json", function (model, material) {
createScene(model, material);
});
}
function createScene(model, material) {
material[0].skinning = true;
animmesh = new THREE.SkinnedMesh(model, material[0]);
scene.add(animmesh);
}
function render() {
renderer.render(scene, camera);
}
init();
render();
</script>
You had several problems. 1) Your elephant was so big it was off the screen. 2) You need to tell the camera to look at the origin. 3) When you simplified the code you made it too simple, you still need the animate loop.
This code works (since I didn't have your PNG files, I used a MeshNormalMaterial):
var camera, scene, renderer, animmesh, controls;
var clock = new THREE.Clock();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.x = -900;
scene.add(camera);
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth*.9, window.innerHeight*.9 );
document.body.appendChild( renderer.domElement );
var loader = new THREE.JSONLoader();
loader.load("model-threejs.json", function (model, material) {
animmesh = new THREE.Mesh(model, new THREE.MeshNormalMaterial());
scene.add(animmesh);
animate();
});
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
renderer.render(scene, camera);
camera.lookAt(new THREE.Vector3(0,0,0));
}
init();