用于展示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. 关于HTML相关知识随记

    HTML是构成网页文档的主要语言,它由HTML标签和字符信息组成.HTML标签可以标识文字.图形.动画.声音.表格.超链接等网页对象,字符信息用以传达网页内容,如标题.段落文本.图像等. HTML4文 ...

  2. Understanding ROS Services and Parameters

    service是nodes之间通信的一种方式,允许nodes send a request and recieve a response. rosservice rosparam roservice ...

  3. webpack4.0各个击破（4）—— Javascript & splitChunk

    目录 一. Js模块化开发 二. Js文件的一般打包需求 三. 使用webpack处理js文件 3.1 使用babel转换ES6+语法 3.2 脚本合并 3.3 公共模块识别 3.4 代码分割 3.5 ...

  4. [angularjs] AngularJs 知识回顾

    AngularJs 知识回顾 简介 1.通过指令扩展了 HTML,通过表达式绑定数据到 HTML: 2.一个 Js 框架: 3.指令: 通过被称为 指令 的新属性来扩展 HTML, 即为应用添加新功能 ...

  5. git合并两个不同的仓库

    目前开发是2个仓库,线上仓库online_a(对应的branch分支为online),测试环境online_b(对应的branch分支为demo),测试环境需要时刻保持onine_a上的最新稳定稳定代 ...

  6. Java学习笔记 抽象类 接口 多态

    instanceof 对象名 instanceof 类名 该对象是否属于该类 Animal animal = new Dog(); if(animal instanceof Dog){ Dog d = ...

  7. 拯救老旧工程，记桥接SpringMVC与Stripes框架

    背景: 公司基础设施部门推出了自己的微服务框架(以下简称M),要求所有业务应用都要接入进去,但坑爹的是M只提供了SpringMVC工程的support,对于采用Stripes作为MVC框架的应用并不支 ...

  8. .NET平台下使用Redis

    using DBI.SaaS.Web.Models.Args; using Rafy; using StackExchange.Redis; using System; using System.Co ...

  9. geoserver发布瓦片，geoserver发布arcgis切片和geoserver发布金字塔切片

    1 转https://www.jianshu.com/p/cf046ec1efd2,分享使用geoserver发布arcgis切片 2 转 http://www.it610.com/article/1 ...

  10. 调用android的getColor()方法出现 java.lang.NoSuchMethodError: android.content.res.Resources.getColor

    1.java.lang.NoSuchMethodError: android.content.res.Resources.getDrawable/getColor或者 java.lang.NoSuch ...