-
<html>
-
<head>
-
<title>一个简单的场景</title>
-
</head>
-
<body>
-
<script src="../build/three.min.js"></script>
-
<script>
-
//定义画布的高度和宽度
-
var width = 400, height = 300;
-
//定义镜头的角度 宽高比 最近最远的限制
-
var view_Angle = 45,aspect = width / height,near = 0.1,far = 10000;
-
//创建一个Div元素 这是装Canvas的容器
-
var container = document.createElement( 'div' );
-
//将容器添加到body中
-
document.body.appendChild( container );
-
//创建一个WebGL渲染器
-
var renderer = new THREE.WebGLRenderer();
-
//创建一个镜头 参数是上面定义的
-
var camera =new THREE.PerspectiveCamera(view_Angle,aspect,near,far);
-
//创建一个场景
-
var scene = new THREE.Scene();
-
//将镜头加入到场景中
-
scene.add(camera);
-
//把渲染器的DOM元素加到容器中 实际上是把一个WebGL渲染器生成的Canvas场景添加到body中的DIV容器中去了
-
container.appendChild( renderer.domElement );
-
//创建一个Cube
-
var cube = new THREE.Mesh( new THREE.CubeGeometry( 200, 200, 200 ), new THREE.MeshNormalMaterial() );
-
scene.add(cube);
-
//调整镜头的Z轴坐标
-
camera.position.z = 500;
-
//调整画面的大小
-
renderer.setSize(width, height);
-
//渲染
-
renderer.render( scene, camera );
-
</script>
-
</body>
-
</html>
