threejs 初识

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

posted @ 2019-02-13 10:58 点几阅读(1054) 评论(0) 编辑收藏举报

刷新页面返回顶部

点几

threejs 初识

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

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

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

绘制结果与DOM挂钩

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

添加场景内 模型

渲染

事件设置（可选）

实现过程中遇到了一些问题，这里特做以记录：

公告

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

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

添加场景内模型