【发布时间】：2014-04-24 17:31:40
【问题描述】：
Three.WebGLRenderer: Uncaught TypeError: Object # has no method 'split'
aka TypeError: 'undefined' is not a function (evalating 'url.split('/' )')
我是 Three.JS 和 WebGL 的新手，我无法让我的网页渲染我的 3D 模型。我对 Javascript 有基本的了解，但不是大师。有人可以帮我解决这个错误吗？
我的渲染器页面位于：http://test.soundfit.me/render3D/View3DModel.html。我在 three.js 代码中遇到 TypeError。
Chrome 的 JavaScript 控制台报告：
THREE.WebGLRenderer 66 three.js:20270
Uncaught TypeError: Object #<Object> has no method 'split' three.js:10940
THREE.Loader.extractUrlBase three.js:10940
THREE.JSONLoader.load three.js:11480
(anonymous function) View3DModel.html:18
Safari 说：
[Error] TypeError: 'undefined' is not a function (evalating 'url.split('/')')
我的调用代码：
我相信这个错误是由我的渲染页面中的这个函数产生的，它调用了three.js中的函数：
loader.load({model:"obj/mesh.js",callback:callbackModel});
我该如何解决这个问题？
支持背景：
THREE.Loader.extractUrlBase:##
extractUrlBase: function ( url ) {
var parts = url.split( '/' );
if ( parts.length === 1 ) return './';
parts.pop();
return parts.join( '/' ) + '/';
}
三个.JSONLoader
THREE.JSONLoader = function ( showStatus ) {
THREE.Loader.call( this, showStatus );
this.withCredentials = false;
};
THREE.JSONLoader.prototype = Object.create( THREE.Loader.prototype );
THREE.JSONLoader.prototype.load = function ( url, callback, texturePath ) {
var scope = this;
// todo: unify load API to for easier SceneLoader use
texturePath = texturePath && ( typeof texturePath === "string" ) ? texturePath : this.extractUrlBase( url );
this.onLoadStart();
this.loadAjaxJSON( this, url, callback, texturePath );
};
我做了什么：
我的 OBJ 文件、纹理文件和 JS 对象在这里：http://test.soundfit.me/render3D/obj/
我使用 convert_obj_three.py 创建了 obj/mesh.js javascript 对象。
我使用的渲染器网页如 opera.com 上 porting-3d-graphics-to-the-web-webgl-intro-part-2 文章的说明中所述。
根据该网站上 federicostrazzullo 的评论，我修改了渲染器，将 animate() 调用从其初始位置移至 createScene 之后(…) 函数，避免以下其他未捕获的 TypeError：
Uncaught TypeError: Cannot read property 'rotation' of undefined View3DModel.html:21
render View3DModel.html:21
animate View3DModel.html:20
(anonymous function)
调试器列表
调试器中显示的渲染器代码如下：
1. <html lang="en">
2. <head>
3. <title>SoundFit SugarCube 3D Model Viewer</title>
4. <meta charset="utf-8">
5. <meta name="viewport" content="width=device-width, user-scalable=no,
minimum-scale=1.0, maximum-scale=1.0">
6. <style>
body{
background:#fff;
padding:0;
margin:0;
overflow:hidden;
font-family:'trebuchet ms','lucida grande','lucida sans unicode',arial,
helvetica,sans-serif;
text-align:center
}
canvas{
pointer-events:none;
z-index:10
}
p{
font-size:small
}
</style>
7. </head>
8. <body>
9. <div>
10. <h2>SoundFit 3D Model Viewer</h2>
11. <p>by Scott L. McGregor, SoundFit</p>
12. <p>adapted from the <a href="https://github.com/mrdoob/three.js">Three.js</a>
example webgl_objconvert_test.html</p>
13. </div>
14. <script src="three.js-master/build/three.js"></script>
15. <script src="three.js-master/examples/js/Detector.js"></script>
16. <script src="js/RequestAnimationFrame.js"></script>
17. <script>if(!Detector.webgl)Detector.addGetWebGLMessage();
var SCREEN_WIDTH=window.innerWidth;
var SCREEN_HEIGHT=window.innerHeight;
var FLOOR=0;
var container;
var camera,scene;
var webglRenderer;
var zmesh,geometry;
var mouseX=0,mouseY=0;
var windowHalfX=window.innerWidth/2;
var windowHalfY=window.innerHeight/2;
document.addEventListener('mousemove',onDocumentMouseMove,false);
init();
function init() {
container=document.createElement('div');
document.body.appendChild(container);
camera=new THREE.PerspectiveCamera(75,SCREEN_WIDTH/SCREEN_HEIGHT,1,100000);
camera.position.z=75;
scene=new THREE.Scene();
var ambient=new THREE.AmbientLight(0xffffff);
scene.add(ambient);
var directionalLight=new THREE.DirectionalLight(0xffeedd);
directionalLight.position.set(0,-70,100).normalize();
scene.add(directionalLight);
}
18. webglRenderer=new THREE.WebGLRenderer();
webglRenderer.setSize(SCREEN_WIDTH,SCREEN_HEIGHT);
webglRenderer.domElement.style.position="relative";
container.appendChild(webglRenderer.domElement);
var loader=new THREE.JSONLoader(),
callbackModel=function(geometry){
createScene(geometry,90,FLOOR,-50,105)
};
loader.load({model:"obj/mesh.js",callback:callbackModel});
function createScene(geometry,x,y,z,b){
zmesh=new THREE.Mesh(geometry,new THREE.MeshFaceMaterial());
zmesh.position.set(0,16,0);
zmesh.scale.set(1,1,1);
scene.add(zmesh);
}
19. animate();
function onDocumentMouseMove(event){
mouseX=(event.clientX-windowHalfX);
mouseY=(event.clientY-windowHalfY);
}
20. function animate(){requestAnimationFrame(animate);
render();}
21. function render(){
zmesh.rotation.set(-mouseY/500+1,-mouseX/200,0);
webglRenderer.render(scene,camera);
}
</script>
22. </body>
23. </html>
【问题讨论】：
-
试试
loader.load( "obj/mesh.js", callbackModel ); -
我现在得到一个不同的错误：
THREE.WebGLRenderer 66 three.js.pagespeed.jm.IbfJvZyj1b.js:487 Uncaught TypeError: Cannot read property 'rotation' of undefined View3DModel.html:30 9 Uncaught TypeError: Cannot read property 'rotation' of undefined View3DModel.html:30 Uncaught TypeError: Cannot read property 'map' of undefined three.js.pagespeed.jm.IbfJvZyj1b.js:515 1345 Uncaught TypeError: Cannot read property 'attributes' of undefined -
@WestLangley：我现在得到一个不同的错误：未捕获的类型错误：无法读取未定义的属性“旋转”。
THREE.WebGLRenderer 66 three.js.pagespeed.jm.IbfJvZyj1b.js:487Uncaught TypeError: Cannot read property 'rotation' of undefined View3DModel.html:30Uncaught TypeError: Cannot read property 'rotation' of undefined View3DModel.html:30Uncaught TypeError: Cannot read property 'map' of undefined three.js.pagespeed.jm.IbfJvZyj1b.js:515Uncaught TypeError: Cannot read property 'attributes' of undefined -
您需要练习使用调试器。加载尚未完成，因此未定义
zmesh。加载是异步的。 -
@WestLangley：如果错误是因为模型尚未完成加载，那么问题是它永远不会完成加载。它每秒都会从 animate() 函数内部抛出一个错误，并且会一直这样下去。你能告诉我为什么它还在加载，而它已经在 animate() 中了吗？