three.js所我使用下面的代码来渲染搅拌机模式(默认立方体一个刚开始出来),并没有什么出了不渲染
问题描述:
:three.js所我使用下面的代码来渲染搅拌机模式(默认立方体一个刚开始出来),并没有什么出了不渲染
<html>
<head>
<title>Test page for the </title>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<div id="container"></div>
<script src="src/three.min.js"></script>
<script src="src/Stats.js"></script>
<script>
var camera, scene, renderer, loader;
init();
render();
function init(){
var container = document.getElementById('container');
camera = new THREE.PerspectiveCamera(10, window.innerWidth/window.innerHeight, 1, 500);
camera.position.y = 100;
camera.position.z = 100;
controls = new THREE.TrackballControls(camera);
scene = new THREE.Scene();
loader = new THREE.JSONLoader();
loader.load('obj/one.js', function (geometry){
mesh = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial({overdraw: true}));
scene.add(mesh);
});
renderer = new THREE.CanvasRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild(stats.domElement);
window.addEventListener('resize', onWindowResize, false);
}
function render(){
renderer.render(scene, camera);
controls.update();
stats.update();
}
function onWindowResize() {
camera.aspect = window.innerWidth/window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
</script>
</body>
</html>
一切都被放置在其路径正确,我得到的只是一个空白的屏幕。建议吗?
答
因为你不是动画。 collada加载器是一个回调函数,因此在初始页面渲染完成后加载完毕,然后将该对象添加到场景中。由于没有动画循环,一旦模型完成加载,页面就不会重绘。