WebGL11--动画基础--网格模型选项的常用技巧和方法

1、3D世界的运动规律

3D世界只有三种运动方式：移动，旋转，放大缩小；

2、练习旋转实例代码；

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>

//注意： threejs使用版本为73
<script src="js/three.js"></script>
<script src="vtkJS/Stats.js"></script>
<script src="vtkJS/Tween.js"></script>
<style type="text/css">
div#canvas-frame {
border: none;
cursor: pointer;
100%;
height: 600px;
background-color: #eee;
}
</style>
<script>
var renderer;
var 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(0xFFFFFF,1.0);

stats = new Stats();
stats.domElement.style.position = "absolute";
stats.domElement.style.left = "0px";
stats.domElement.style.top = '0px';
document.getElementById('canvas-frame').appendChild(stats.domElement);
}

var camera;
function initCamera(){
camera = new THREE.PerspectiveCamera(45,width/height,1,10000);
camera.position.x = 100;
camera.position.y = 300;
camera.position.z = 600;

camera.up.x = 0;
camera.up.y = 1;
camera.up.z = 0;
camera.lookAt({
x: 0,
y: 0,
z: 0
})
}

var scene;
function initScene(){
scene = new THREE.Scene();
}

var light;
function initLight(){
light = new THREE.AmbientLight(0xFF0000);
light.position.set(100,100,200);
scene.add(light);
}

var cube;
var mesh;
function initObject(){

//生成一个正方体；其构造函数为THREE.BoxGeometry = function(width,height,depth,widthSegments,heightSegments,depthSegments);

参数①width 表示立方体的宽度；②height表示立方体的高度；③ depth表示立方体的长度或深度； ④ widthSegments：宽度分段份数

⑤heightSegments：高度分段份数； ⑥ depthSegments: 长度分段份数；
var geometry = new THREE.BoxGeometry(100,100,100);
for(var i=0;i<geometry.faces.length;i+=2){
var hex = Math.random()*0xffffff;

//将Geometry中的每两个面赋予随机的一种颜色；
geometry.faces[i].color.setHex(hex);
geometry.faces[i+1].color.setHex(hex);
}

//让几何体的每个顶点使用geometry.faces[i].color中的颜色；
var material = new THREE.MeshBasicMaterial({ vertexColors: THREE.FaceColors});
mesh = new THREE.Mesh(geometry,material);
mesh.position = new THREE.Vector3(0,0,0);
scene.add(mesh);
}

//绘制网格

function initGrid(){

//生成一个网格模型，边长为1000，大网格中有小网格，小网格的边长为50；
var helper = new THREE.GridHelper(1000,50);

//网格线的颜色一头是0x0000ff,另一头是0x808080.线段中间的颜色取这两个颜色的差值；
helper.setColors(0x0000FF,0x808080);
scene.add(helper);
}

function threeStart(){
initThree();
initCamera();
initScene();
initLight();
initObject();
initGrid();
animation();
}

function animation(){

//旋转的两种方式：

//1、通过Mesh的rotation属性来旋转物体； var rotation = new THREE.Euler();

//mesh.rotation.y +=0.01;这里的0.01代表弧度，转化为度=弧度*180/PI=0.57,意思为每个帧循环将旋转0.57度

// 2、通过rotateX,rotateY,rotateZ函数来旋转物体；例如： mesh.rotationY(0.01);
mesh.rotation.y +=0.01;
mesh.rotation.x +=0.01;
renderer.render(scene,camera);
requestAnimationFrame(animation);
}

</script>
</head>
<body onload="threeStart()">
<div style="margin-left: 150px"></div>
<div id="canvas-frame"></div>
</body>
</html>