Uncaught : Object #<Object>没有方法“拆分”three.js:10940
Three.WebGLRenderer: Uncaught : Object #没有“拆分”方法
又名TypeError：“未定义”不是一个函数(计算'url.split( '/‘)')
我是Three.JS和WebGL的新手，我无法让我的网页呈现我的3D模型。我对Javascript有基本的了解，但不是一个大师。有人能帮我解决这个错误吗？
我的渲染页面是：http://test.soundfit.me/render3D/View3DModel.html。我在three.js代码中得到了一个。
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狩猎旅行说：
错误TypeError：“未定义”不是一个函数(计算'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( '/' ) + '/';
}THREE.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对象。
我正在使用的呈现器网页如porting-3d-graphics-to-the-web-webgl-intro-part-2文章在opera.com上的说明所描述。
为了与联邦官方网站上的评论保持一致，我修改了渲染器，将动画()调用从最初的位置移到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>回答 1
Stack Overflow用户
发布于 2014-03-20 05:45:36
在它的数据中，zmesh几何需要有旋转。错误说，它无法找到你的网格旋转。
您可以使用How to rotate a 3D object on axis three.js? post添加旋转
https://stackoverflow.com/questions/22489469
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号