这一章渲染一个立方体对象到场景中，效果如下：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script text="module" charset="UTF-8" src="./js/Three.js"></script>
<style>
body{margin: 0;overflow: hidden;}
</style>
</head>
<body>
<div id="puidu-webgl-output"></div>
<script type="module">
//引入关键字
import {Scene,PerspectiveCamera,WebGLRenderer,BoxGeometry,MeshBasicMaterial,Mesh} from "./js/three.js";
//创建场景
var scene = new Scene();
//设置透视摄像机
var camera = new PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000);
//设置渲染器
var render = new WebGLRenderer();
render.setSize(window.innerWidth,window.innerHeight);
//将渲染器中的DOM元素对象添加到指定的DIV中
document.getElementById("puidu-webgl-output").appendChild(render.domElement);
//创建立方几何体
var geometry = new BoxGeometry();
//创建一个网格基础材质，并设置材质颜色
var material = new MeshBasicMaterial({color:0xff2288});
//立方几何体和材质整合
var cube = new Mesh(geometry,material);
//立方体网格添加到场景中
scene.add(cube);
//设置透视摄像机z轴的距离，也就是和屏幕的距离
camera.position.z = 20;
camera.rotation.x += 0.50;
camera.rotation.y += 0.50;
//将场景和摄像机传入到渲染器中
render.render(scene,camera);
</script>
</body>
</html>
