用于展示3D动效，就是 跟拍电影一样，需要有3大模块：scene，camera，renderer。

  • scene：场景，用于放置用到的模型。
  • camera：摄像机，拍电影似的，得有个摄像机。
  • renderer：渲染器，很重要，用于与被渲染的dom元素挂钩，也用于 与场景、摄像机 挂钩。

一个动效的制作过程如下：

  1. 得到三大基础模块：scene, camera, renderer

  2. 绘制结果与DOM挂钩

  3. 加载摄像头控制器（可选），用于 旋转、缩放等效果

  4. 添加场景内 模型

  5. 渲染

  6. 事件设置（可选）

示例是一个 星球，顶点上 是 文字。可旋转，缩放：

<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 进行缩放，参数是 缩放量，三维的。改变前两参数就行

threejs 初识的更多相关文章

  1. 初识webgl--我的webgl学习第一课（基于threeJs）

    一,我为什么要学习webgl 一个偶然的机会,在和朋友的聊天过程中,听说了webgl,也许过去也看到过,但是没有特别在意过.原来,JavaScript也可以很好的渲染并在网页上显示三维动画,不用借助插 ...

  2. 首个threejs项目-前端填坑指南

    第一次使用threejs到实际项目中,开始的时候心情有点小激动,毕竟是第一次嘛,然而做着做着就感受到这玩意水好深,满满的都是坑,填都填不过来.经过老板20天惨无人道的摧残,终于小有成就. 因为第一次搞 ...

  3. Android动画效果之初识Property Animation（属性动画）

    前言: 前面两篇介绍了Android的Tween Animation(补间动画) Android动画效果之Tween Animation(补间动画).Frame Animation(逐帧动画)Andr ...

  4. 初识Hadoop

    第一部分:              初识Hadoop 一.             谁说大象不能跳舞 业务数据越来越多,用关系型数据库来存储和处理数据越来越感觉吃力,一个查询或者一个导出,要执行很长 ...

  5. python学习笔记（基础四：模块初识、pyc和PyCodeObject是什么）

    一.模块初识(一) 模块,也叫库.库有标准库第三方库. 注意事项:文件名不能和导入的模块名相同 1. sys模块 import sys print(sys.path) #打印环境变量 print(sy ...

  6. 转 threejs中3D视野的缩放实现

    Threejs基础部分学习知道透视相机new THREE.PerspectiveCamera(fov, aspect , near,far)中. fov视野角(拍摄距离)越大,场景中的物体越小.fov ...

  7. Threejs中的材质贴图

    最近项目需要折腾three.js,有关three.js几点说明 1.作用 threejs适合创建简单的模型视图 2.对于复杂的模型图(如:室内模型图)需要美术3D制作,前端导成特定格式文件(如*.mt ...

  8. 初识IOS,Label控件的应用。

    初识IOS,Label控件的应用. // // ViewController.m // Gua.test // // Created by 郭美男 on 16/5/31. // Copyright © ...

  9. UI篇（初识君面）

    我们的APP要想吸引用户,就要把UI(脸蛋)搞漂亮一点.毕竟好的外貌是增进人际关系的第一步,我们程序员看到一个APP时,第一眼就是看这个软件的功能,不去关心界面是否漂亮,看到好的程序会说"我 ...

随机推荐

  1. MySQL高可用复制管理工具 —— Orchestrator介绍

    背景 在MySQL高可用架构中,目前使用比较多的是Percona的PXC,Galera以及MySQL 5.7之后的MGR等,其他的还有的MHA,今天介绍另一个比较好用的MySQL高可用复制管理工具:O ...

  2. 易被忽略的Python内置类型

    Python中的内置类型是我们开发中最常见的,很多人都能熟练的使用它们. 然而有一些内置类型确实不那么常见的,或者说往往会被我们忽略,所以这次的主题就是带领大家重新认识这些"不同寻常&quo ...

  3. NLP入门（七）中文预处理之繁简体转换及获取拼音

      在日常的中文NLP中,经常会涉及到中文的繁简体转换以及拼音的标注等问题,本文将介绍这两个方面的实现.   首先是中文的繁简体转换,不需要使用额外的Python模块,至需要以下两个Python代码文 ...

  4. 杭电ACM2014--青年歌手大奖赛_评委会打分

    青年歌手大奖赛_评委会打分 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...

  5. 简述ADO.NET（一）

    ADO.NET 宏观定义 传统ADO主要针对紧密连接的客户端/服务器端系统,而 ADO.NET考虑到了断开连接式应用并且引进了 Dateset 它代表任意数量的关联表,其中每个表都包含了行和列的集合的 ...

  6. WCF消息交换模式之请求-响应模式

    WCF的消息交换模式(MEP)有三种:请求/响应.单向模式和双工模式.WCF的默认MEP是请求/响应模式. 请求/响应模式操作签名代码如下,无需指定模式,默认就是. [OperationContrac ...

  7. Android破解学习之路（九）—— 练手破解游戏集合

    1.魔塔50层 https://www.taptap.com/app/48859 选择需要购买的东西,之后在支付宝支付界面点击取消,即可支付成功 2.布布合丁丁 https://www.coolapk ...

  8. Hdu 3001 Travelling 状态DP

    题目大意 一次旅游,经过所有城市至少一次,并且任何一座城市访问的次数不能超过两次,求最小费用 每个城市最多访问两次,用状态0,1,2标识访问次数 把城市1~N的状态按照次序连接在一起,就组成了一个三进 ...

  9. pm2部署nodejs项目

    安装: 最新的PM2稳定版可通过NPM进行安装: npm install pm2@latest -g 用法: 启动,守护和监控应用程序的最简单的方法是使用以下命令行: pm2 start app.js ...

  10. 如何解决angular不自动生成spec.ts文件

    "schematics":{   "@schematics/angular:component": {        "styleext": ...