<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>333</title>
<style>
html, body {
margin: 0;
padding: 0;
}
#three_canvas {
position: absolute;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="three_canvas"></canvas>
<script src="js/three.js"></script>
<script>
//定义一些需要的变量
var renderer, camera, scene, light, object;
var width, height;
//初始化
function initRenderer(){
width=document.getElementById(‘three_canvas‘).clientWidth;
height=document.getElementById(‘three_canvas‘).clientHeight;
renderer=new THREE.WebGLRenderer({
//将canvas绑定到renderer
canvas:document.getElementById(‘three_canvas‘)
});
renderer.setSize(width,height);//将渲染的大小设为canvas相同
renderer.setClearColor(0xFFFFFF, 1.0);//设置默认颜色与透明度
};
//初始化场景
function initScene(){
scene = new THREE.Scene();
};
//初始化相机
function initCamera(){
//简单的正交投影相机，正对着视口中心，视口大小与canvas大小相同
camera = new THREE.OrthographicCamera(width/-2,width/2,height/2,height/-2,1,1000);
//设置相机的位置
camera.position.x=0;
camera.position.y=0;
camera.position.z=200;
//设置相机的上方向
camera.up.x=0;
camera.up.y=1;
camera.up.z=0;
//设置相机聚焦的位置（其实就是确定一个方向）
camera.lookAt({
x:0,
y:0,
z:0
})
};
//该添加一个立方体到场景中了
function initObject(){
//创建一个边长为100的立方体
var geometry = new THREE.CubeGeometry(100,100,100);
object = new THREE.Mesh(geometry,new THREE.MeshNormalMaterial());
//法向材质MeshNormalMaterial这样立方体每个面的颜色与这个面对着的方向是相关的，更便于观察/调试。
//在这个简单的demo里我不打算添加光影效果，而法向材质对光也是没有反应的。
scene.add(object);
}
//最后要动起来，创建一个动画循环
function render(){
// requestAnimFrame，它会自动在每次页面重绘前调用传入的函数。
requestAnimationFrame(render);
object.rotation.x +=0.05;
object.rotation.y +=0.05;
renderer.render(scene,camera);
}
//调用
function threeStart(){
initRenderer();
initCamera();
initScene();
initObject();
render();
};
window.onload=threeStart();
</script>
</body>
</html>
时间： 2024-11-12 22:38:47