我是 Three.JS 和 WebGL 的新手，我无法通过我的网页来渲染我的3D模型。我对Javascript有基本的了解，但不是高手。有人可以帮我解决这个错误吗？
我的渲染器页面位于：http://test.soundfit.me/render3D/View3DModel.html。我在 three.js 代码中得到了一个TypeError。
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
[错误] TypeError：'undefined'不是函数（评估'url.split（'/'）'）
我相信这个错误是由我的渲染页面中的这个函数生成的，它会调用three.js中的函数：
loader.load({model:"obj/mesh.js",callback:callbackModel});
如何解决问题？
extractUrlBase: function ( url ) {
var parts = url.split( '/' );
if ( parts.length === 1 ) return './';
parts.pop();
return parts.join( '/' ) + '/';
}
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上的移植-3d-graphics-to-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>
答案 0 :(得分：0)
zmesh几何体需要在其数据中进行旋转。该错误表示无法找到网格的旋转。
添加轮播