二three.js的hello word
2020-12-07 本文已影响0人
霁雨轩阁
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/three.js"></script>
<script type="text/javascript" src="js/stats.min.js"></script>
<style type="text/css">
div#canvas-frame{
border: none;
cursor: pointer;
width: 100%;
height: 600px;
background-color: #eeeeee;
}
</style>
<script type="text/javascript">
//一 首先封装渲染器 二 封装相机 三 初始化场景 四 初始化灯光 五 创建几何体 六 动画循环
var width,height;
//渲染器的封装
var renderer,stats;
function initThree(){
width = document.getElementById("canvas-frame").clientWidth;
height = document.getElementById("canvas-frame").clientHeight;
renderer = new THREE.WebGLRenderer({
antialias : true//优质渲染
});
//设置画布的大小 并加入视图中
renderer.setSize(width,height);
document.getElementById("canvas-frame").appendChild(renderer.domElement);
//重新刷新颜色
renderer.setClearColor("#ffffff");
//渲染帧数的检测插件
stats = new Stats();
stats.domElement.style.position = "absolute";
stats.domElement.style.top = "0";
stats.domElement.style.left = "0";
document.getElementById("canvas-frame").appendChild(stats.domElement);
}
//相机的封装
var camera;
function initCamera(){
//创建相机
camera = new THREE.PerspectiveCamera(45,width/height,1,10000);
//设置相机的摆放位置
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 50;
camera.up.x = 0;
camera.up.y = 1;
camera.up.z = 0;
camera.lookAt(0,0,0)
}
//初始化场景
var scene;
function initScene(){
scene = new THREE.Scene();
}
//初始化灯光
var light;
function initLight(){
//设置一个光源
light = new THREE.DirectionalLight(0xff0000,1.0,0);
light.position.set(100,100,200);
//将光源加入到场景中
scene.add(light);
}
//初始化一个几何体
var cube;
function initObject() {
var geometry= new THREE.CubeGeometry(2,2,2);//网格和大小
var material= new THREE.MeshBasicMaterial({color:0xff0000});
cube= new THREE.Mesh(geometry,material);
scene.add(cube);
console.log(1111)
}
function animation(){
stats.begin();
renderer.render(scene,camera);
requestAnimationFrame(animation);
camera.position.x+=0.1;
stats.end();
}
function threeStart(){
initThree();//渲染器
initCamera();//相机
initScene();//场景
initLight();//光源
initObject();//几何体
animation();//渲染循环
}
</script>
</head>
<body onload="threeStart();">
<div id="canvas-frame">
</div>
</body>
</html>
image.png
