Toggle navigation
Sign Up
Log In
Explore
Works
Folders
Tools
Collections
Artists
Groups
Groups
Topics
Tasks
Tasks
Jobs
Teams
Jobs
Recommendation
More Effects...
JS
///
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 = {})); ///
///
///
///
///
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
body { margin: 0; padding: 0; }
HTML
Join Effecthub.com
Working with Global Gaming Artists and Developers!
Login
Sign Up
Or Login with Your Email Address:
Email
Password
Remember
Or Sign Up with Your Email Address:
Your Email
This field must contain a valid email
Set Password
Password should be at least 1 character
Stay informed via email