用于展示3D动效，就是 跟拍电影一样，需要有3大模块：scene，camera，renderer。
- scene：场景，用于放置用到的模型。
- camera：摄像机，拍电影似的，得有个摄像机。
- renderer：渲染器，很重要，用于与被渲染的dom元素挂钩，也用于 与场景、摄像机 挂钩。
一个动效的制作过程如下：
得到三大基础模块：scene, camera, renderer
绘制结果与DOM挂钩
加载摄像头控制器（可选），用于 旋转、缩放等效果
添加场景内 模型
渲染
事件设置（可选）
示例是一个 星球，顶点上 是 文字。可旋转，缩放：
<html>
<head>
<title>球状旋转_sprite_v2.html</title>
<meta charset="utf-8">
<style>
body { margin: 0; }
</style>
</head>
<body>
</body>
<script src="js/three.js"></script>
<script src="js/OrbitControls.js"></script>
<script>
/**
* 3d加载步骤
* 1、得到三大基础模块：scene, camera, renderer
* 2、绘制结果与DOM挂钩
* 3、加载摄像头控制器（可选）
* 4、添加场景内 模型
* 5、渲染
* 6、事件设置（可选）
*/ var scene, camera, renderer, controls, group;
var container;
var startX, startY;
container = document.createElement( 'div' );
document.body.appendChild( container ); /*1*/
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 40, window.innerWidth/window.innerHeight, 1, 1000 );
camera.position.z = 50;
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight ); /*2*/
container.appendChild( renderer.domElement ); /*3*/
// controls
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.minDistance = 20;
controls.maxDistance = 50;
controls.maxPolarAngle = Math.PI / 2; /*4*/
group = new THREE.Group();
scene.add( group ); var vertices = new THREE.DodecahedronGeometry( 10 ).vertices; //多个精灵
vertices.forEach(function (item, index) {
var sprite = createSpriteTextNoPosition(index);
sprite.position.set(item.x, item.y, item.z);
sprite.clickFlag = true;
sprite.aa = '序号：' + index;
group.add(sprite);
}); /*5*/
var animate = function () {
requestAnimationFrame( animate ); // group.rotation.x += 0.005;
group.rotation.y += 0.005; renderer.render( scene, camera );
};
animate(); /*6*/
//监听移动端touchstart事件
function onTouchStart(e) {
// console.log('触摸开始')
// console.log(e) var touch = e.touches[0]; //获取第一个触点
var x = Number(touch.pageX); //页面触点X坐标
var y = Number(touch.pageY); //页面触点Y坐标
//记录触点初始位置
startX = x;
startY = y;
}
//监听移动端touchEnd事件
function onTouchEnd(e) {
// console.log('触摸结束')
// console.log(e);
if (e.changedTouches[0].pageX == startX && e.changedTouches[0].pageY == startY)
getClickMap(e);
} function getClickMap(event) {
event.preventDefault();
var mouse = {}; mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
if(event.touches) {
mouse.x = (event.changedTouches[0].pageX / window.innerWidth) * 2 - 1;
mouse.y = -(event.changedTouches[0].pageY / window.innerHeight) * 2 + 1;
}
var vector = new THREE.Vector3(mouse.x, mouse.y, 0.5); vector = vector.unproject(camera); var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize()); var intersects = raycaster.intersectObjects(group.children); //TODO 这个50 距离原点的距离， 正好就是 摄像头 到 球心的距离应该是。
if (intersects.length > 0 && intersects[0].distance < 50 && intersects[0].object.clickFlag) {
console.log(intersects[0].object.aa);
}
}
function createSpriteTextNoPosition(index){
//先用画布将文字画出
let canvas = document.createElement("canvas");
canvas.width = 400;
let ctx = canvas.getContext("2d");
ctx.fillStyle = "#ffff00";
ctx.font = "Bold 100px Arial";
ctx.lineWidth = 4;
ctx.fillText("萨克拉" + index,4,104);
let texture = new THREE.Texture(canvas);
texture.needsUpdate = true;//不设置，会 不出现 //使用Sprite显示文字
let material = new THREE.SpriteMaterial({map:texture});
let textObj = new THREE.Sprite(material);
textObj.scale.set(4, 2, 1);
return textObj;
}
document.addEventListener('mousedown', getClickMap, false);
document.addEventListener('touchstart', onTouchStart, false);
document.addEventListener('touchend', onTouchEnd, false); </script>
</html>
实现过程中遇到了一些问题，这里特做以记录：
1、geometry 带有顶点的 几何图形
2、获取几何图形的顶点，数组
利用属性 vertices
3、group 组的概念，用于 多个模型分组。
常用于 整个组 内容 一起 旋转之类。
4、group.children 可获取到 组内所有的 模型。scene.children同理
5、光投影
6、orbitControls 与移动端 touchmove事件冲突，不能共存
7、利用 touchStart 和 touchEnd 判断是否为点击事件
利用 touch事件对象 的 changedTouches[0]；start和 end皆有； 如果 start里的 坐标 等于 end 里的 坐标，则为点击。
8、模型上移
不做其他改变，使用定位，将画布绝对定位 top=-100px;点击事件里 pageY + 100
9、bug：手机浏览器 画布过大，超过屏幕，与google调试不一致；
强行指定canvas给渲染器，并 important 宽高 为100%。
10、球形顶点 多点旋转：点与数据量实施方案
顶点数须大于数据量：遍历顶点，数据量不够则再来一遍。铺满
11、MeshPhongMaterial 镜面材质，需要灯光
12、MeshBasicMaterial 基础材质，普通上色，不需灯光
13、动效切换，清除
a、停止动效 （必须cancelAnimationFrame）
b、清除场景内模型 （需要深清除，内存里的）
移除场景内的子元素，需注意 不要移除 摄像机和灯光（子元素包含了）。
c、有绑定事件的 移除事件
14、canvas文本显示不清晰，
解决：使用textObj.scale.set(4,2,1); 对sprite 进行缩放，参数是 缩放量，三维的。改变前两参数就行