Three.js file error: camera is not an instance of THREE.Camera
I am using three.js and the scene is not rendering. I am getting the following errors in the console:
THREE.WebGLRenderer.render: camera is not an instance of THREE.Camera.
Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at file:///F:/Study/3rd%20Sem/ES%20XXX%20-20Intro%20to%20Computer%20Graphics/Stick%20Baddy/images/crate.jpg may not be loaded.
Here are some of my code snippets:
Camera:
var scene = new THREE.Scene(); // Create a Three.js scene object
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
Shine:
var light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 1, 1 ).normalize();
scene.add(light);
Adding a cube:
var geometry = new THREE.CubeGeometry(stickLenX, 20, 20);
var material = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture('images/crate.jpg', {}, function() { renderer.render(scene); }) } );
var myStick = new THREE.Mesh(geometry, material); // Create a mesh based on the specified geometry (myStick) and material (normal).
scene.add(myStick); // at (0,0,0)
Rendering:
var render = function () {
document.addEventListener('mousemove', onDocumentMouseMove, false);
move();
renderer.render(scene, camera); // Each time we change the position of the cube object, we must re-render it.
requestAnimationFrame(render);
};
render();
It works fine with THREE.MeshNormalMaterial()
How
var material = new THREE.MeshNormalMaterial();
There are other cubes and spheres in my code as well. Could any of them be causing the problem? Please can anyone point out what the problem might be?
-------- UPDATE: ----------
The file works with Wampserver. What is the reason for this and how do I make it work without a server?
+3
source to share