three.js中的错误:camera不是THREE.Camera的实例

时间:2014-11-15 10:26:40

标签: javascript camera three.js

我正在使用three.js而且场景没有渲染。我在控制台中遇到以下错误:

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. 

以下是我的一些代码段:

照相机:

var scene = new THREE.Scene(); // Create a Three.js scene object
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);

灯:

var light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 1, 1 ).normalize();
scene.add(light);

添加多维数据集:

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)

渲染:

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

THREE.MeshNormalMaterial()可以正常使用 像

var material = new THREE.MeshNormalMaterial();

在我的代码中,还有其他立方体和球体。他们中的任何一个都可能导致问题吗?任何人都可以提一下可能出现的问题吗?

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

使用Wampserver运行该文件。这是什么原因以及如何在没有服务器的情况下使其工作?

2 个答案:

答案 0 :(得分:0)

也许你可以用以下材料替换material.map: map:THREE.ImageUtils.loadTexture('images / crate.jpg')

答案 1 :(得分:0)

我使用ImageUtils.loadTexture和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 );