1.在【three.js第一课】的基础上加入以下代码，改变窗口大小时，页面内容会自适应
//加入事件监听器,窗口自适应 window.addEventListener('resize', function(){ var width = window.innerWidth; var height = window.innerHeight; renderer.setSize(width,height); camera.aspect = width/height; camera.updateProjectionMatrix(); })
2.整体代码：
<!DOCTYPE html>
<html>
<head>
<title>demo1</title>
</head>
<style type="text/css">
body{
margin:0;
}
canvas{
100%;
height:100%;
}
</style>
<body>
<script src="jquery.min.js"></script>
<script src="../build/three.js"></script>
<script type="text/javascript">
var scene = new THREE.Scene();//创建场景
//创建一个摄像机对象
var camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight, 0.1, 1000);
//创建渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);//渲染到浏览器
//加入事件监听器,窗口自适应
window.addEventListener('resize', function(){
var width = window.innerWidth;
var height = window.innerHeight;
renderer.setSize(width,height);
camera.aspect = width/height;
camera.updateProjectionMatrix();
})
//创建形状 BoxGeometry
var geometry = new THREE.BoxGeometry(1,1,1);
//创建材料 wireframe是否使用线条
var material = new THREE.MeshBasicMaterial({color:0xFFFFFF,wireframe:true});
//将材料和形状结合
var cube = new THREE.Mesh(geometry,material);
//加入场景中
scene.add(cube);
camera.position.z=3;//设置相机的位置
//逻辑
var update=function(){
//物体随着XY轴旋转
cube.rotation.x +=0.01;
cube.rotation.y += 0.005;
}
//绘画渲染
var render=function() {
renderer.render(scene,camera);
}
//循环运行update，render
var loop=function() {
requestAnimationFrame(loop);
update();
render();
}
loop();//循环开始
</script>
</body>
</html>