Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- ///<reference path="./three.d.ts"/>
- class ThreeJSTest {
- renderer:THREE.WebGLRenderer;
- scene:THREE.Scene;
- camera:THREE.Camera;
- constructor() {
- this.renderer = new THREE.WebGLRenderer({ alpha: true });
- this.renderer.setSize(500, 500);
- this.renderer.setClearColor(0xFFFFFF, 1);
- document.getElementById('content').appendChild(this.renderer.domElement);
- this.scene = new THREE.Scene();
- this.camera = new THREE.PerspectiveCamera(75
- , 1
- , 0.1, 1000);
- this.camera.position = new THREE.Vector3(10, 0, 10);
- this.camera.lookAt(new THREE.Vector3(0, 0, 0));
- // New code begins below
- // Create a loader to load in the JSON file
- var modelLoader = new THREE.JSONLoader();
- // Call the load method, passing in the name of our generated JSON file
- // and a callback for when loadign is complete.
- // Not fat arrow typescript call for proper thisification. AKA, we want
- this to be this, not that
- // or something else completely
- modelLoader.load("robot.jsm", (geometry,materials) => {
- // create a mesh using the passed in geometry and textures
- var mesh = new THREE.SkinnedMesh(geometry,new THREE.MeshFaceMaterial(
- materials));
- mesh.position.x = 0; mesh.position.y = mesh.position.z = 0;
- // add it to the scene
- this.scene.add(mesh);
- });
- this.scene.add(new THREE.AmbientLight(new THREE.Color(0.9,0.9,0.9).
- getHex()));
- this.renderer.render(this.scene, this.camera);
- }
- render() {
- requestAnimationFrame(() => this.render());
- this.renderer.render(this.scene, this.camera);
- }
- start() {
- this.render();
- }
- }
- window.onload = () => {
- var three = new ThreeJSTest();
- three.start();
- };
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement