我正在使用 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++; } }我已经导入了所需的模块，但仍然无法正常工作，并且显示错误，例如“三个不是函数”或其他内容。
2 回答
Qyouu
TA贡献1786条经验 获得超11个赞
首先使用npm安装 three.js
npm 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,
}
}
侃侃尔雅
TA贡献1801条经验 获得超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>
添加回答
举报
0/150
提交
取消