第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

如何在 Angular 7 中使用三個 JS

如何在 Angular 7 中使用三個 JS

哈士奇WWW 2022-01-20 18:19:30
我正在使用 Angular 7，我想在我的項目中添加三個 JS Thee JS，但結果并不是真的很有效。我不確定我做對了。請給我指路這是我的代碼    ngAfterViewInit(): void {    let script = this._renderer2.createElement('script');    script.type = `text/javascript`;    script.text = `    {        $(document).ready(function () {          var SEPARATION = 100, AMOUNTX = 50, AMOUNTY = 50;    var container, stats;    var camera, scene, renderer;    var particles, count = 0;    var mouseX = 0, mouseY = 0;    var windowHalfX = window.innerWidth / 2;    var windowHalfY = window.innerHeight / 2;    mouseX = 635 - windowHalfX;    mouseY = 27 - windowHalfY;    init();    animate();    function init() {        container = document.createElement('div');        document.body.appendChild(container);        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);        camera.position.z = 1000;        scene = new THREE.Scene();        //        var numParticles = AMOUNTX * AMOUNTY;        var positions = new Float32Array(numParticles * 3);        var scales = new Float32Array(numParticles);        var i = 0, j = 0;        for (var ix = 0; ix < AMOUNTX; ix++) {            for (var iy = 0; iy < AMOUNTY; iy++) {                positions[i] = ix * SEPARATION - ((AMOUNTX * SEPARATION) / 2); // x                positions[i + 1] = 0; // y                positions[i + 2] = iy * SEPARATION - ((AMOUNTY * SEPARATION) / 2); // z                scales[j] = 1;                i += 3;                j++;            }        }我已經(jīng)導入了所需的模塊，但仍然無法正常工作，并且顯示錯誤，例如“三個不是函數(shù)”或其他內(nèi)容。
查看完整描述

2 回答

?
Qyouu

TA貢獻1786條經(jīng)驗 獲得超11個贊

首先使用npm安裝 three.js


npm i three

然后在組件中導入它，如下所示


import * as THREE from 'three';

現(xiàn)在您可以像下面的代碼一樣從您的組件中使用它。注意：這只是舉例


var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );


var renderer = new THREE.WebGLRenderer();

renderer.setSize( window.innerWidth, window.innerHeight );

document.body.appendChild( renderer.domElement );


var geometry = new THREE.BoxGeometry( 1, 1, 1 );

var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );

var cube = new THREE.Mesh( geometry, material );

scene.add( cube );


camera.position.z = 5;


var animate = function () {

  requestAnimationFrame( animate );


  cube.rotation.x += 0.01;

  cube.rotation.y += 0.01;


  renderer.render( scene, camera );

};


animate();

在 package.json 文件中將 typescript 更新到最新版本（3.7.2）


"devDependencies": {

    ...

    "typescript": "3.7.2"

  }

由于您在 tsconfig.json 文件中使用 Angular 7，請禁用 TypeScript 版本檢查。如果您使用的是最新的 Angular 版本，則無需執(zhí)行此操作。


{

  "compileOnSave": false,

  "compilerOptions": {

    "baseUrl": "./",

    "outDir": "./dist/out-tsc",

    "sourceMap": true,

    "declaration": false,

    "module": "es2015",

    "moduleResolution": "node",

    "emitDecoratorMetadata": true,

    "experimentalDecorators": true,

    "target": "es5",

    "typeRoots": [

      "node_modules/@types"

    ],

    "lib": [

      "es2018",

      "dom"

    ]

  },

   "angularCompilerOptions": {

    "disableTypeScriptVersionCheck": true,

  }

 }


查看完整回答
反對 回復 2022-01-20
?
侃侃爾雅

TA貢獻1801條經(jīng)驗 獲得超16個贊

如果不需要包含，則在角度組件中包含threejs。您可以在 index.html 下面的代碼演示中包含threejs腳本ThreeJS Angular Demo


    <body>

      <app-root></app-root>

      <script src="https://threejs.org/build/three.js"></script>

      <script>

         <!--  Your threejs script that creates and animates the scene --->

         <!--  Note: skip the import threejs module import statement --->


        var scene = new THREE.Scene();

        var camera = new THREE.PerspectiveCamera( 75, 

        window.innerWidth/window.innerHeight, 0.1, 1000 );


        var renderer = new THREE.WebGLRenderer();

        renderer.setSize( window.innerWidth, window.innerHeight );

        document.body.appendChild( renderer.domElement );


        var geometry = new THREE.BoxGeometry( 1, 1, 1 );

        var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );

        var cube = new THREE.Mesh( geometry, material );

        scene.add( cube );


         camera.position.z = 5;


         var animate = function () {

         requestAnimationFrame( animate );


         cube.rotation.x += 0.01;

         cube.rotation.y += 0.01;


         renderer.render( scene, camera );

       };


       animate();


      </script>

    

    </body>


查看完整回答
反對 回復 2022-01-20
  • 2 回答
  • 0 關注
  • 164 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號