run typescript app success

master
xieguigang 8 years ago
parent 21d8d89f21
commit afe87d3db7

@ -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;
}

@ -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

@ -1 +1 @@
{"version":3,"file":"3DApp.js","sourceRoot":"","sources":["treeTest/3DApp.ts"],"names":[],"mappings":"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"}
{"version":3,"file":"3DApp.js","sourceRoot":"","sources":["treeTest/3DApp.ts"],"names":[],"mappings":"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"}

@ -23,6 +23,8 @@
<script src="3DApp.js"></script>
<script>
var app = new threeApp();
</script>
</body>
</html>

@ -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);
}
}
}
Loading…
Cancel
Save