From afe87d3db747db3f4aef653fa5e1b49e3d7e4789 Mon Sep 17 00:00:00 2001 From: xieguigang Date: Sat, 8 Sep 2018 11:43:50 +0800 Subject: [PATCH] run typescript app success --- viz/test/3DApp.d.ts | 30 ++++---- viz/test/3DApp.js | 142 +++++++++++++++++++---------------- viz/test/3DApp.js.map | 2 +- viz/test/index.html | 4 +- viz/test/treeTest/3DApp.ts | 147 +++++++++++++++++++++---------------- 5 files changed, 181 insertions(+), 144 deletions(-) diff --git a/viz/test/3DApp.d.ts b/viz/test/3DApp.d.ts index 7e0d05f..adc8b6d 100644 --- a/viz/test/3DApp.d.ts +++ b/viz/test/3DApp.d.ts @@ -1,13 +1,17 @@ -declare var container: HTMLDivElement; -declare var camera: THREE.PerspectiveCamera; -declare var scene: THREE.Scene; -declare var renderer: THREE.CanvasRenderer; -declare var group: THREE.Group; -declare var mouseX: number, mouseY: number; -declare var windowHalfX: number; -declare var windowHalfY: number; -declare function init(): void; -declare function onWindowResize(): void; -declare function onDocumentMouseMove(event: any): void; -declare function animate(): void; -declare function render(): void; +declare class threeApp { + container: HTMLDivElement; + camera: THREE.PerspectiveCamera; + scene: THREE.Scene; + renderer: THREE.CanvasRenderer; + group: THREE.Group; + mouseX: number; + mouseY: number; + windowHalfX: number; + windowHalfY: number; + constructor(containerId?: string); + init(): void; + onWindowResize(): void; + onDocumentMouseMove(event: MouseEvent): void; + animate(): void; + render(): void; +} diff --git a/viz/test/3DApp.js b/viz/test/3DApp.js index 739685b..95d18e1 100644 --- a/viz/test/3DApp.js +++ b/viz/test/3DApp.js @@ -1,66 +1,80 @@ -var container; -var camera; -var scene; -var renderer; -var group; -var mouseX = 0, mouseY = 0; -var windowHalfX = window.innerWidth / 2; -var windowHalfY = window.innerHeight / 2; -document.addEventListener('mousemove', onDocumentMouseMove, false); -init(); -animate(); -function init() { - container = document.createElement('div'); - document.body.appendChild(container); - camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000); - camera.position.z = 500; - scene = new THREE.Scene(); - scene.background = new THREE.Color(0xffffff); - var geometry = new THREE.BoxBufferGeometry(100, 100, 100); - var material = new THREE.MeshNormalMaterial({ overdraw: 0.5 }); - group = new THREE.Group(); - for (var i = 0; i < 200; i++) { - var mesh = new THREE.Mesh(geometry, material); - mesh.position.x = Math.random() * 2000 - 1000; - mesh.position.y = Math.random() * 2000 - 1000; - mesh.position.z = Math.random() * 2000 - 1000; - mesh.rotation.x = Math.random() * 2 * Math.PI; - mesh.rotation.y = Math.random() * 2 * Math.PI; - mesh.matrixAutoUpdate = false; - mesh.updateMatrix(); - group.add(mesh); +var threeApp = /** @class */ (function () { + function threeApp(containerId) { + if (containerId === void 0) { containerId = null; } + this.mouseX = 0; + this.mouseY = 0; + this.windowHalfX = window.innerWidth / 2; + this.windowHalfY = window.innerHeight / 2; + var app = this; + this.container = document.createElement('div'); + document.addEventListener('mousemove', function (event) { + app.onDocumentMouseMove(event); + }, false); + window.addEventListener('resize', function () { + app.onWindowResize(); + }, false); + if (containerId) { + document.getElementById(containerId).appendChild(this.container); + } + else { + document.body.appendChild(this.container); + } + this.init(); + this.animate(); } - scene.add(group); - renderer = new THREE.CanvasRenderer(); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(window.innerWidth, window.innerHeight); - container.appendChild(renderer.domElement); - window.addEventListener('resize', onWindowResize, false); -} -function onWindowResize() { - windowHalfX = window.innerWidth / 2; - windowHalfY = window.innerHeight / 2; - camera.aspect = window.innerWidth / window.innerHeight; - camera.updateProjectionMatrix(); - renderer.setSize(window.innerWidth, window.innerHeight); -} -function onDocumentMouseMove(event) { - mouseX = (event.clientX - windowHalfX) * 10; - mouseY = (event.clientY - windowHalfY) * 10; -} -// -function animate() { - requestAnimationFrame(animate); - render(); -} -function render() { - camera.position.x += (mouseX - camera.position.x) * .05; - camera.position.y += (-mouseY - camera.position.y) * .05; - camera.lookAt(scene.position); - var currentSeconds = Date.now(); - group.rotation.x = Math.sin(currentSeconds * 0.0007) * 0.5; - group.rotation.y = Math.sin(currentSeconds * 0.0003) * 0.5; - group.rotation.z = Math.sin(currentSeconds * 0.0002) * 0.5; - renderer.render(scene, camera); -} + threeApp.prototype.init = function () { + this.camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000); + this.camera.position.z = 500; + this.scene = new THREE.Scene(); + this.scene.background = new THREE.Color(0xffffff); + var geometry = new THREE.BoxBufferGeometry(100, 100, 100); + var material = new THREE.MeshNormalMaterial({ overdraw: 0.5 }); + this.group = new THREE.Group(); + for (var i = 0; i < 200; i++) { + var mesh = new THREE.Mesh(geometry, material); + mesh.position.x = Math.random() * 2000 - 1000; + mesh.position.y = Math.random() * 2000 - 1000; + mesh.position.z = Math.random() * 2000 - 1000; + mesh.rotation.x = Math.random() * 2 * Math.PI; + mesh.rotation.y = Math.random() * 2 * Math.PI; + mesh.matrixAutoUpdate = false; + mesh.updateMatrix(); + this.group.add(mesh); + } + this.scene.add(this.group); + this.renderer = new THREE.CanvasRenderer(); + this.renderer.setPixelRatio(window.devicePixelRatio); + this.renderer.setSize(window.innerWidth, window.innerHeight); + this.container.appendChild(this.renderer.domElement); + }; + threeApp.prototype.onWindowResize = function () { + this.windowHalfX = window.innerWidth / 2; + this.windowHalfY = window.innerHeight / 2; + this.camera.aspect = window.innerWidth / window.innerHeight; + this.camera.updateProjectionMatrix(); + this.renderer.setSize(window.innerWidth, window.innerHeight); + }; + threeApp.prototype.onDocumentMouseMove = function (event) { + this.mouseX = (event.clientX - this.windowHalfX) * 10; + this.mouseY = (event.clientY - this.windowHalfY) * 10; + }; + threeApp.prototype.animate = function () { + var app = this; + requestAnimationFrame(function () { + app.animate(); + }); + this.render(); + }; + threeApp.prototype.render = function () { + this.camera.position.x += (this.mouseX - this.camera.position.x) * .05; + this.camera.position.y += (-this.mouseY - this.camera.position.y) * .05; + this.camera.lookAt(this.scene.position); + var currentSeconds = Date.now(); + this.group.rotation.x = Math.sin(currentSeconds * 0.0007) * 0.5; + this.group.rotation.y = Math.sin(currentSeconds * 0.0003) * 0.5; + this.group.rotation.z = Math.sin(currentSeconds * 0.0002) * 0.5; + this.renderer.render(this.scene, this.camera); + }; + return threeApp; +}()); //# sourceMappingURL=3DApp.js.map \ No newline at end of file diff --git a/viz/test/3DApp.js.map b/viz/test/3DApp.js.map index 5863726..253c84c 100644 --- a/viz/test/3DApp.js.map +++ b/viz/test/3DApp.js.map @@ -1 +1 @@ -{"version":3,"file":"3DApp.js","sourceRoot":"","sources":["treeTest/3DApp.ts"],"names":[],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"3DApp.js","sourceRoot":"","sources":["treeTest/3DApp.ts"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/viz/test/index.html b/viz/test/index.html index 52e1868..40edeec 100644 --- a/viz/test/index.html +++ b/viz/test/index.html @@ -23,6 +23,8 @@ - + diff --git a/viz/test/treeTest/3DApp.ts b/viz/test/treeTest/3DApp.ts index c587cff..dbf3d2f 100644 --- a/viz/test/treeTest/3DApp.ts +++ b/viz/test/treeTest/3DApp.ts @@ -1,101 +1,118 @@ -var container: HTMLDivElement; +class threeApp { -var camera: THREE.PerspectiveCamera; -var scene: THREE.Scene; -var renderer: THREE.CanvasRenderer; + public container: HTMLDivElement; -var group: THREE.Group; + public camera: THREE.PerspectiveCamera; + public scene: THREE.Scene; + public renderer: THREE.CanvasRenderer; -var mouseX = 0, mouseY = 0; + public group: THREE.Group; -var windowHalfX = window.innerWidth / 2; -var windowHalfY = window.innerHeight / 2; + public mouseX = 0; + public mouseY = 0; -document.addEventListener('mousemove', onDocumentMouseMove, false); + public windowHalfX = window.innerWidth / 2; + public windowHalfY = window.innerHeight / 2; -init(); -animate(); + public constructor(containerId: string = null) { + var app = this; -function init() { + this.container = document.createElement('div'); - container = document.createElement('div'); - document.body.appendChild(container); + document.addEventListener('mousemove', function (event) { + app.onDocumentMouseMove(event); + }, false); - camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000); - camera.position.z = 500; + window.addEventListener('resize', function () { + app.onWindowResize(); + }, false); - scene = new THREE.Scene(); - scene.background = new THREE.Color(0xffffff); + if (containerId) { + document.getElementById(containerId).appendChild(this.container); + } else { + document.body.appendChild(this.container); + } - var geometry = new THREE.BoxBufferGeometry(100, 100, 100); - var material = new THREE.MeshNormalMaterial({ overdraw: 0.5 }); + this.init(); + this.animate(); + } - group = new THREE.Group(); + init() { + this.camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000); + this.camera.position.z = 500; - for (var i = 0; i < 200; i++) { + this.scene = new THREE.Scene(); + this.scene.background = new THREE.Color(0xffffff); - var mesh = new THREE.Mesh(geometry, material); - mesh.position.x = Math.random() * 2000 - 1000; - mesh.position.y = Math.random() * 2000 - 1000; - mesh.position.z = Math.random() * 2000 - 1000; - mesh.rotation.x = Math.random() * 2 * Math.PI; - mesh.rotation.y = Math.random() * 2 * Math.PI; - mesh.matrixAutoUpdate = false; - mesh.updateMatrix(); - group.add(mesh); + var geometry = new THREE.BoxBufferGeometry(100, 100, 100); + var material = new THREE.MeshNormalMaterial({ overdraw: 0.5 }); - } + this.group = new THREE.Group(); - scene.add(group); + for (var i = 0; i < 200; i++) { - renderer = new THREE.CanvasRenderer(); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(window.innerWidth, window.innerHeight); - container.appendChild(renderer.domElement); + var mesh = new THREE.Mesh(geometry, material); + mesh.position.x = Math.random() * 2000 - 1000; + mesh.position.y = Math.random() * 2000 - 1000; + mesh.position.z = Math.random() * 2000 - 1000; + mesh.rotation.x = Math.random() * 2 * Math.PI; + mesh.rotation.y = Math.random() * 2 * Math.PI; + mesh.matrixAutoUpdate = false; + mesh.updateMatrix(); + this.group.add(mesh); - window.addEventListener('resize', onWindowResize, false); + } -} + this.scene.add(this.group); -function onWindowResize() { + this.renderer = new THREE.CanvasRenderer(); + this.renderer.setPixelRatio(window.devicePixelRatio); + this.renderer.setSize(window.innerWidth, window.innerHeight); + this.container.appendChild(this.renderer.domElement); + } - windowHalfX = window.innerWidth / 2; - windowHalfY = window.innerHeight / 2; + onWindowResize() { - camera.aspect = window.innerWidth / window.innerHeight; - camera.updateProjectionMatrix(); + this.windowHalfX = window.innerWidth / 2; + this.windowHalfY = window.innerHeight / 2; - renderer.setSize(window.innerWidth, window.innerHeight); + this.camera.aspect = window.innerWidth / window.innerHeight; + this.camera.updateProjectionMatrix(); -} + this.renderer.setSize(window.innerWidth, window.innerHeight); -function onDocumentMouseMove(event) { + } - mouseX = (event.clientX - windowHalfX) * 10; - mouseY = (event.clientY - windowHalfY) * 10; + onDocumentMouseMove(event: MouseEvent) { -} + this.mouseX = (event.clientX - this.windowHalfX) * 10; + this.mouseY = (event.clientY - this.windowHalfY) * 10; -// + } -function animate() { + animate() { + var app = this; - requestAnimationFrame(animate); + requestAnimationFrame(function () { + app.animate(); + }); - render(); -} + this.render(); + } -function render() { + render() { - camera.position.x += (mouseX - camera.position.x) * .05; - camera.position.y += (- mouseY - camera.position.y) * .05; - camera.lookAt(scene.position); + this.camera.position.x += (this.mouseX - this.camera.position.x) * .05; + this.camera.position.y += (- this.mouseY - this.camera.position.y) * .05; + this.camera.lookAt(this.scene.position); - var currentSeconds = Date.now(); - group.rotation.x = Math.sin(currentSeconds * 0.0007) * 0.5; - group.rotation.y = Math.sin(currentSeconds * 0.0003) * 0.5; - group.rotation.z = Math.sin(currentSeconds * 0.0002) * 0.5; + var currentSeconds = Date.now(); + this.group.rotation.x = Math.sin(currentSeconds * 0.0007) * 0.5; + this.group.rotation.y = Math.sin(currentSeconds * 0.0003) * 0.5; + this.group.rotation.z = Math.sin(currentSeconds * 0.0002) * 0.5; - renderer.render(scene, camera); + this.renderer.render(this.scene, this.camera); + + } +} -} \ No newline at end of file