用于展示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. 第60章 设备流交互服务 - Identity Server 4 中文文档(v1.0.0)

    该IDeviceFlowInteractionService接口旨在提供用户界面用于在设备流授权期间与IdentityServer通信的服务.它可以从依赖注入系统获得,通常作为构造函数参数注入到Ide ...

  2. vb.net C# AtlAxGetControl 函数使用方法

    先省略一万字的坑坑坑 找遍了互联网既然没搜索到相关资料 一定是我搜索的方法有问题 下面简单几句代码 第一种方法 Public Declare Function AtlAxGetControl Lib ...

  3. HTML代码片段

    按钮类 后退.前进按钮 返回按钮 几种刷新按钮 警告框显示源代码 链接按钮 打开新窗口 打印 新窗口延迟打开 背景色变换 表单类 点击清空文字 关闭输入法 链接 双击打开链接 超链接鼠标形状 页面 不 ...

  4. FaaS技术框架

    FaaS介绍 微服务(MicroService)是以专注于单一服务/功能的小型单元块为基础,利用模块化的方式组合成复杂的大型应用服务. FaaS是Function as a Service的缩写,可以 ...

  5. 流程控制之 if 判断

    语法一:if 条件: 代码1 代码2 代码3 gender='female'age=18is_beautiful=True if gender == 'female' and age > 16 ...

  6. 一种递推组合数前缀和的Trick

    记录一下一种推组合数前缀和的方法 Trick 设\(\sum_{i = 0}^m C_n^i = S(n, m)\) \(S\)是可以递推的 \(S(n, m + 1) = S(n, m) + C_{ ...

  7. Android为TV端助力 MediaPlayer 错误代码(error code)总结 转载

    public static final int MEDIA_ERROR_IO Added in API level 17 File or network related operation error ...

  8. Java新知识系列 七

    抽象类和接口的区别和特点 java的JDK中包含的五个工具 编译型语言和解释型语言 Java和C++的区别` 常见的ASCII的值 Forward和Redirect之间的对比 Web Service ...

  9. 两种常用的全排列算法(java)

    问题:给出一个字符串,输出所有可能的排列. 全排列有多种算法,此处仅介绍常用的两种:字典序法和递归法. 1.字典序法: 如何计算字符串的下一个排列了?来考虑"926520"这个字符 ...

  10. No module named "Crypto"，如何安装Python三方模块Crypto

    前两天公司公司老总让我研究怎么用企业微信第三方应用进行官网对接,完成URL回调验证问题. 具体如何进行Python 的Django网站与企业微信第三方应用进行回调验证的博客地址为:https://ww ...