我在Blender中创建了一个3D模型。 我用导出器和convert_obj_three.py导出它(两者都输出正常,但没有在浏览器中显示,代码如下)。
我在这里使用了html / js下面的代码:
http://dev.opera.com/articles/view/porting-3d-graphics-to-the-web-webgl-intro-part-2/
该网站的原始演示/任何其他three.js示例在Firefox(Mac OS X 10.6.8,AMD Radeon HD 6490M)中运行良好。
所有其他浏览器似乎都有问题。
有趣的是,如果我运行一个简单的:
python -m SimpleHTTPServer 8888
从任何示例目录并希望通过Firefox查看它,它也不起作用/渲染。
我总是得到背景颜色和文字,但没有渲染。
所有必需的三个.js都在同一目录中。
我错过了什么或者这只是随机的吗?
如何显示可由用户旋转的简单3D模型? 这段代码是否正确?
THX。
<!doctype html>
<html lang="en">
<head>
<title>WebGL made easy</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<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>
</head>
<body>
<script src="Three.js"></script>
<script src="Detector.js"></script>
<script src="RequestAnimationFrame.js"></script>
<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();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
// camera
camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
camera.position.z = 75;
//scene
scene = new THREE.Scene();
// lights
var ambient = new THREE.AmbientLight( 0xffffff );
scene.add( ambient );
// more lights
var directionalLight = new THREE.DirectionalLight( 0xffeedd );
directionalLight.position.set( 0, -70, 100 ).normalize();
scene.add( directionalLight );
// renderer
webglRenderer = new THREE.WebGLRenderer();
webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
webglRenderer.domElement.style.position = "relative";
container.appendChild( webglRenderer.domElement );
// loader
var loader = new THREE.JSONLoader(),
callbackModel = function( geometry ) { createScene( geometry, 90, FLOOR, -50, 105 ) };
loader.load( { model: "mymodel.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 );
}
function onDocumentMouseMove(event) {
mouseX = ( event.clientX - windowHalfX );
mouseY = ( event.clientY - windowHalfY );
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
zmesh.rotation.set(-mouseY/500 + 1, -mouseX/200, 0);
webglRenderer.render( scene, camera );
}
</script>
</body>
</html>
答案 0 :(得分:0)
我已经测试了你的代码,问题在于你的加载器回调功能。试试这个:
var loader = new THREE.JSONLoader(),
callbackModel = function(geometry, materials) { createScene( geometry, materials, 90, FLOOR, -50, 105 ) };
loader.load( "cubeHelper.js", callbackModel );
注意添加了materials
参数,当然还要将materials
添加到createScene的函数参数中,如下所示:
function createScene( geometry, materials, x, y, z, b ) {
zmesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( {color: 0xff0000 } ) );
zmesh.position.set( 0, 16, 0 );
zmesh.scale.set( 1, 1, 1 );
scene.add( zmesh );
}
请注意,我将MeshFaceMaterial
更改为MeshBasicMaterial
这是因为MeshFaceMaterial需要和进入createScene的材料数组一样,所以当您准备就绪时,您可以从传入的{{1}创建材料并在那时申请。但那会让你前进。