效果图如下:代码如下(代码还需要优化,暂时能实现效果就行)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>160万个几何体</title>
<style>
body{
color: #cccccc;
font-family: monospace;
font-size: 13px;
text-align: center;
background-color: #FF8C00;
margin: 0px;
overflow: hidden;
}
#info{
position: absolute;
top: 0px;
width: 100%;
padding: 5px;
}
a{
color: cornflowerblue;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="info">WEBGL_ThreeJs:高性能渲染保持高帧数</div>
<script src="../../js/three.js"></script>
<script src="../../js/Stats.js"></script>
<script src="../../js/WEBGL.js"></script>
<script>
//检测浏览器是否支持webgl
if( !WEBGL.isWebGLAvailable() ){
var warning = WEBGL.getWebGLErrorMessage();
document.getElementById('container').appendChild(warning);
}
//执行函数
initAll();
animate();
//声明常量
var container,states;
var renderer,camera,scene;
var mesh;
//初始化容器
function initContainer() {
container = document.getElementById("container");
}
//初始化相机
function initCamera() {
camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,1,3500