Three.js 时间映射动效 - 掉落的慢动作 - 踏得网

Three.js Time Remap

three, canvas, 物理

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3933
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

/// <reference path="threejs/three.d.ts" />
var demo;
(function(demo) {
    var BasicView = (function() {
        function BasicView() {
            var _this = this;
            this.containerElement = document.createElement('div');
            document.body.appendChild(this.containerElement);
            this.scene = new THREE.Scene();
            this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 200000);
            this.camera.position.z = -1000;
            this.renderer = new THREE.WebGLRenderer({
                antialias: true
            });
            this.renderer.setClearColor(0x0);
            this.renderer.setPixelRatio(window.devicePixelRatio);
            this.renderer.setSize(window.innerWidth, window.innerHeight);
            this.containerElement.appendChild(this.renderer.domElement);
            window.addEventListener('resize', function(e) {
                _this.handleResize(e);
            }, false);
        }
        BasicView.prototype.handleResize = function(event) {
            this.camera.aspect = window.innerWidth / window.innerHeight;
            this.camera.updateProjectionMatrix();
            this.renderer.setSize(window.innerWidth, window.innerHeight);
        };
        BasicView.prototype.startRendering = function() {
            this.update();
        };
        BasicView.prototype.update = function() {
            requestAnimationFrame(this.update.bind(this));
            this.onTick();
            this.render();
        };
        BasicView.prototype.render = function() {
            this.renderer.render(this.scene, this.camera);
        };
        BasicView.prototype.onTick = function() {};
        return BasicView;
    })();
    demo.BasicView = BasicView;
})(demo || (demo = {}));
///<reference path="threejs/three.d.ts" />
///<reference path="BasicView.ts" />
///<reference path="easeljs/easeljs.d.ts" />
///<reference path="tweenjs/tweenjs.d.ts" />
///<reference path="greensock/greensock.d.ts" />
var __extends = this.__extends || function(d, b) {
    for (var p in b)
        if (b.hasOwnProperty(p)) d[p] = b[p];

function __() {
        this.constructor = d;
    }
    __.prototype = b.prototype;
    d.prototype = new __();
};
var demo;
(function(demo) {
    var DemoCubesWorld = (function(_super) {
        __extends(DemoCubesWorld, _super);

function DemoCubesWorld() {
                var _this = this;
                _super.call(this);
                this.rot = 0; // カメラの円運動用
                /** ボックスの境界線の更新のための配列 */
                this.edgesPool = [];
                /** ボックスの一辺の長さ */
                this.STEP = 100;
                this.scene.fog = new THREE.Fog(0x000000, 100, 12500);
                this.cameraPositionTarget = new THREE.Vector3();
                this.cameraLookAtTarget = new THREE.Vector3();
                var timeline = new TimelineMax();
                timeline.repeat(-1);
                // カメラの動きをTweenで作る
                timeline.set(this, {
                    rot: 135
                }, 0);
                timeline.to(this, 7, {
                    rot: 0,
                    ease: Cubic.easeInOut
                }, 0);
                timeline.set(this.cameraPositionTarget, {
                    y: 0
                }, 0);
                timeline.to(this.cameraPositionTarget, 6, {
                    y: 400,
                    ease: Cubic.easeInOut
                }, 0);
                timeline.set(this.cameraLookAtTarget, {
                    y: 500
                }, 0);
                timeline.to(this.cameraLookAtTarget, 6, {
                    y: 0,
                    ease: Cubic.easeInOut
                }, 0);
                var geometryBox = new THREE.BoxGeometry(this.STEP, this.STEP, this.STEP, 1, 1, 1);
                var materialBox = new THREE.MeshBasicMaterial({
                    color: 0xFF0000
                });
                for (var i = 0; i < DemoCubesWorld.OBJ_NUM; i++) {
                    var mesh = new THREE.Mesh(geometryBox, materialBox);
                    // 立方体を作る
                    var egh = new THREE.EdgesHelper(mesh, 0xFF0000);
                    egh.material.linewidth = 1;
                    // ランダムに立方体を配置
                    egh.position.x = this.STEP * Math.round(20000 * (Math.random() - 0.5) / this.STEP) + this.STEP / 2;
                    egh.position.z = this.STEP * Math.round(20000 * (Math.random() - 0.5) / this.STEP) + this.STEP / 2;
                    egh.updateMatrix();
                    this.scene.add(egh);
                    this.edgesPool.push(egh);
                    // 秒数
                    var sec = 2 * Math.random() + 3;
                    // 立方体の落下する動き
                    timeline.set(egh.position, {
                        y: 8000
                    }, 0);
                    timeline.to(egh.position, sec, {
                        y: this.STEP / 2 + 1,
                        ease: Bounce.easeOut
                    }, 0);
                }
                this.createTimescale(timeline);
                timeline.addCallback(function() {
                    _this.createTimescale(timeline);
                }, timeline.duration());
                // 地面
                var grid = new THREE.GridHelper(10000, this.STEP);
                grid.setColors(0x444444, 0x444444);
                this.scene.add(grid);
                this.startRendering();
            }
            /**
             * タイムリマップを作成します。
             * @param timeline    タイムリマップさせたいインスタンス
             */
        DemoCubesWorld.prototype.createTimescale = function(timeline) {
            var totalTimeline = new TimelineMax();
            totalTimeline.set(timeline, {
                timeScale: 1.5
            }).to(timeline, 1.5, {
                timeScale: 0.01,
                ease: Expo.easeInOut
            }, "+=0.8").to(timeline, 1.5, {
                timeScale: 1.5,
                ease: Expo.easeInOut
            }, "+=5");
        };
        /**
         * 毎フレーム実行される BasicView のライフサイクルイベントです。
         */
        DemoCubesWorld.prototype.onTick = function() {
            this.camera.position.x = 1000 * Math.cos(this.rot * Math.PI / 180);
            this.camera.position.z = 1000 * Math.sin(this.rot * Math.PI / 180);
            this.camera.position.y = this.cameraPositionTarget.y;
            this.camera.lookAt(this.cameraLookAtTarget);
            for (var i = 0; i < this.edgesPool.length; i++) {
                this.edgesPool[i].updateMatrix();
            }
        };
        /** オブジェクトの個数 */
        DemoCubesWorld.OBJ_NUM = 1500;
        return DemoCubesWorld;
    })(demo.BasicView);
    demo.DemoCubesWorld = DemoCubesWorld;
})(demo || (demo = {}));
window.addEventListener("load", function() {
    new demo.DemoCubesWorld();
});

编译

CSS

HTML