Error in three.js : camera is not an instance of THREE.Camera

Question

I am using three.js and the scene is not rendering. I am getting following errors in 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);

Light:

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() Like

var material = new THREE.MeshNormalMaterial();

In my code, there are other cubes and spheres, too. Could any of them be causing the problem? Please can anybody mention what could be the problem?

--------UPDATE:----------

Running the file with Wampserver worked. What is the reason for that and how to make it work without server?

could you put the code live, jsfiddle or just otherwise? i could give a shot at debugging but would prefer to see it with the debugger and not just read copy-pasted code. (no guarantees that would find the prob but would certainly help others too :) — antont
– antont, Commented Nov 15, 2014 at 22:59
@antont I opened the file in Wampserver in chrome and it is working. I guess it was a problem of browser. In my computer, it is not without server in any browser (firefox, chrome and IE). But in another computer, it is working in firefox. Any idea what browser issue could be in my firefox? — dc95
– dc95, Commented Nov 17, 2014 at 10:46

juana pu · Accepted Answer · 2018-06-12 03:49:57Z

1

I solved it by using ImageUtils.loadTexture and PlaneGeometry.

            var geometry = new THREE.PlaneGeometry( 500, 300, 1, 1 );
            geometry.vertices[0].uv  =  new THREE.Vector2( 0 , 0 );
            geometry.vertices[1].uv  =  new THREE.Vector2( 2, 0 );
            geometry.vertices[2].uv  =  new  THREE.Vector2( 2, 2 );
            geometry.vertices[3].uv  =  new  THREE.Vector2( 0, 2 );

            texture     =  THREE.ImageUtils.loadTexture("text.png",null,function(t){

            });
            var material = new THREE.MeshBasicMaterial ( {map: texture} );
            var mesh     = new THREE.Mesh ( geometry, material );
            scene.add( mesh );

answered Jun 12, 2018 at 3:49

juana pu

1611 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

zhoujy · Accepted Answer · 2014-11-15 14:39:42Z

0

Maybe you can replace the material.map with： map: THREE.ImageUtils.loadTexture('images/crate.jpg')

answered Nov 15, 2014 at 14:39

zhoujy

2993 silver badges5 bronze badges

Collectives™ on Stack Overflow

Error in three.js : camera is not an instance of THREE.Camera

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related