<!DOCTYPE html>
<html>
<head>
<title></title>
<style>canvas { width: 100%; height: 100% }</style>
<script src="libs/three.js"></script>
</head>
<body>
<script>
var renderer;
var scene;
var camera;
function init() {
//创建场景
scene = new THREE.Scene();
//THREE.PerspectiveCamera(fov, aspect, near, far)
//创建一个透视相机 fov: 表示相机的夹角; aspect:水平长度和竖直长度的比值; near:拍摄最近距离 ;far:拍摄最远距离
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);//相机
camera.position.set(15, 16, 13);//位置
camera.lookAt(scene.position);//对准的焦点
scene.add(camera);//照相机需要被添加到场景中
//添加一个渲染器
renderer = new THREE.WebGLRenderer();//渲染
renderer.setClearColor(0x000000, 1.0);//设置渲染颜色（背景底色）
renderer.setSize(window.innerWidth, window.innerHeight);//渲染面大小（在二维平面上的窗口大小）
//添加长方体
var geometry = new THREE.BoxGeometry(6, 6, 6);//BoxGeometry创建一个长方体 长宽高
var matarial = new THREE.MeshLambertMaterial({color: 'red'});//MeshLambertMaterial材质
var cube = new THREE.Mesh(geometry, matarial);
scene.add(cube);//创建好的长方体添加到场景中
var light = new THREE.SpotLight(0xffffff);//通过SpotLight创建灯光效果
light.position.set(20, 30, 20);
scene.add(light);
document.body.appendChild(renderer.domElement);
render();
}
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);//调用渲染器的渲染函数，就能使其渲染一次
}
window.onload = init;
</script>
</body>
</html>
