如何在 Angular 7 中使用三个 JS
我正在使用 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++;
}
}
我已经导入了所需的模块，但仍然无法正常工作，并且显示错误，例如“三个不是函数”或其他内容。
哈士奇WWW2回答
-
Qyouu
首先使用npm安装 three.jsnpm i three然后在组件中导入它，如下所示import * as THREE from 'three';现在您可以像下面的代码一样从您的组件中使用它。注意：这只是举例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 版本，则无需执行此操作。{ "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, } } -
侃侃尔雅
如果不需要包含，则在角度组件中包含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>
随时随地看视频慕课网APP
相关分类
JavaScript