按照书上的例子，把内容封装到函数中，看不到效果，麻烦大神看看那有问题。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>the first webgl</title>
<script src="js/three.js"></script>
<script src="js/RequestAnimationFrame.js"></script>
<style>
#container{
width: 95%;
height: 80%;
position: absolute;
}
body{
background-color: lightblue;
}
</style>
<script>
var container = document.getElementById('container');
var renderer;
function initThree(){
width = container.clientWidth;
height = container.clinetHeight;
renderer = new THREE.WebGLRenderer( {antialias: true} );
renderer.setSize(width, height);
container.appendChild(renderer.domElement);
}
var camera;
function initCamera(){
camera = new THREE.PerspectiveCamera(45, width / height, 1, 4000);
camera.position.x = 600;
camera.position.y = 0;
camera.position.z = 600;
camera.up.x = 0;
camera.up.y = 1;
camera.up.z = 0;
camera.lookAt({
x : 0,
y : 0,
z : 0
});
}
var scene;
function initScene(){
scene = new THREE.Scene();
}
var light;
function initLight(){
light = new THREE.DirectionalLight(0xffffff, 1.5);
light.position.set(0, 0, 1);
scene.add(light);
}
var cube;
function initObject(){
var geometry = new THREE.CubeGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
}
function threeStart(){
initThree();
initCamera();
initScene();
initLight();
initObject();
run();
}
function run(){
requestAnimationFrame(run);
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
}
</script>
</head>
<body onload="threeStart();">
<div id="container"></div>
</body>
</html> 把container的高宽设成绝对像素试试，感觉你这样写高度是0