zoukankan      html  css  js  c++  java
  • typescript结合three.js

    import * as THREE from "three";
    
    // https://github.com/pinqy520/three-typescript-starter/blob/master/src/index.ts
    class Game
    {
        private _scene: THREE.Scene;
        //private _canvas: HTMLCanvasElement;
        private _camera: THREE.PerspectiveCamera;
        private _renderer: THREE.WebGLRenderer;
        private _axis: THREE.AxisHelper;
        private _light: THREE.DirectionalLight;
        private _light2: THREE.DirectionalLight;
        private _material: THREE.MeshBasicMaterial;
        private _box: THREE.Mesh;
    
        public constructor()
        {
            //this._canvas = <HTMLCanvasElement>document.getElementById(canvasElement);
            this._scene = new THREE.Scene();
            this._camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            this._renderer = new THREE.WebGLRenderer();
            this._axis = new THREE.AxisHelper(10);
            this._light = new THREE.DirectionalLight(0xffffff, 1.0);
            this._light2 = new THREE.DirectionalLight(0xffffff, 1.0);
            this._material = new THREE.MeshBasicMaterial({
                color: 0xaaaaaa,
                wireframe: true
            });
            this._box = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), this._material);
        }
    
        public createScene(): void
        {
            this._renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(this._renderer.domElement);
            this._scene.add(this._axis);
            this._light.position.set(100, 100, 100);
            this._scene.add(this._light);
            this._light2.position.set(-100, 100, -100)
            this._scene.add(this._light2);
            this._box.position.x = 0.5;
            this._box.rotation.y = 0.5;
    
            this._camera.position.x = 5;
            this._camera.position.y = 5;
            this._camera.position.z = 5;
    
            this._camera.lookAt(this._scene.position);
        }
    
        public animate(): void
        {
            requestAnimationFrame(this.animate);
            this._render();
        }
    
        private _render(): void
        {
            let timer = 0.002 * Date.now()
            this._box.position.y = 0.5 + 0.5 * Math.sin(timer)
            this._box.rotation.x += 0.1
            this._renderer.render(this._scene, this._camera)
        }
    }
    
    window.onload = () =>
    {
        let game = new Game();
        game.createScene();
        game.animate();
    }


    https://stackoverflow.com/questions/35968047/using-webpack-threejs-examples-and-typescript
    https://stackoverflow.com/questions/43799041/typescript-error-node-modules-types-three-three-core-d-ts767-24-error-ts230
  • 相关阅读:
    Python中的编码
    编译gcc
    内存的非法读写操作的检查
    Git合并特定commits 到另一个分支
    局部静态变量是如何做到只初始化一次的?
    how-to-redirect-cin-and-cout-to-files
    Time series database
    Linux System Calls Hooking Method Summary
    tomcat 创建虚拟主机
    oracle查锁表SQL
  • 原文地址:https://www.cnblogs.com/feixiangsnail15-12-28/p/8717865.html
Copyright © 2011-2022 走看看