Question

我已经在我的angular2应用程序中通过npm install应用了three.js @ types / three @ 0.0.27和three@0.82.1并将其导入我的服务中。

import * as THREE from "three";

但是当我尝试使用CSS3DRenderer时，

this.renderer = new THREE.CSS3DRenderer();

我收到了错误

core.umd.js：3004 EXCEPTION：THREE.CSS3DRenderer不是构造函数。似乎css3drenderer不在three.js中包。

我也做了 npm install css3drenderer 。现在我在node_modules / css3drenderer /中有CSS3DRenderer.js，在node_modules / @ types / three /

中有三个css3drenderer.d.ts

那我怎么能在angular2中使用新的THREE.CSS3DRenderer（）？顺便说一下，我有webpack的angular2@2.1.2。任何建议将不胜感激，谢谢！

Answer 1

编辑2 - 示例功能，例如OrbitControls

Three.js的扩展功能（例如显示OrbitControls等的examples文件夹）未打包在主构建中。因此，它们在技术上不存在于运行时，因为它们没有链接到Angular而没有编译到供应商/构建文件中。

要包含这些，您需要手动将它们添加到angular.json文件中。 e.g。

https://github.com/marcusbelcher/angular-three-js-composition/blob/master/angular.json

在此文件中，转到project.architect.scripts数组并添加其node_modules路径。

"scripts": [
     "./node_modules/hammerjs/hammer.min.js",
     "./node_modules/three/build/three.min.js",
     "./node_modules/three/examples/controls/OrbitControls.js"
]

注意build和examples文件夹之间的区别。对于每个额外功能，添加它的直接路径。同样考虑打字，因为三人的打字定义可能不包括所有的例子，因此请看编辑1如何在本地扩展它。

修改1 - 打字

由于在应用程序创建时不再创建Angular 6 typings.d.ts。这需要在src文件夹内的app typings内完成。如果卡住，请参阅以下示例。

https://github.com/marcusbelcher/angular-three-js-composition

主要是这两个文件： https://github.com/marcusbelcher/angular-three-js-composition/blob/master/src/tsconfig.app.json

https://github.com/marcusbelcher/angular-three-js-composition/blob/master/src/typings.d.ts

注意：我在这里使用了Any类型，但理想情况下这应该是一个接口等等。

这取决于Angular 4 CLI。这也是我扔掉项目所需的快速解决方案，无需长期......

首先使用cli创建一个项目，然后通过npm正常安装Three.JS。

如果安装@ types / three绑定，您应该可以访问* component.ts中的典型Three.JS对象，例如WebGLRenderer等。 GitHub用户Augle-me发布了以下内容来为CSS3Renderer执行typescript绑定：Link

但是，我选择了将外部全局脚本添加到Angular CLI项目并明确声明类型的路径，而不是其他第三方。以下是我获取基本渲染内容的步骤：

删除@ types /三种类型
添加＆＃34;声明var THREE：any;＆＃34; to typings.d.ts
将node_module路径添加到.angular-cli.json

"scripts": [ "../node_modules/three/build/three.min.js", "../node_modules/three/examples/js/renderers/CSS3DRenderer.js" ],

将以下代码添加到组件以创建和呈现CSS3场景

this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 5000);
this.camera.position.set(0, 0, 0);
this.camera.lookAt(new THREE.Vector3(0, 0, -1000));
this.scene = new THREE.Scene();

this.element = document.createElement('div');
this.element.innerHTML = 'Plain text inside a div.';
this.element.className = 'three-div';

//CSS3D renderer
this.renderer = new THREE.CSS3DRenderer();
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.renderer.domElement.style.position = 'absolute';
this.renderer.domElement.style.top = 0;
//css3SandbboxEl is bound to a div via @ViewChild('css3Sandbox')
this.css3SandboxEl.nativeElement.appendChild(this.renderer.domElement);

this.element3d = new THREE.CSS3DObject(this.element);
this.element3d.position.x = 50;
this.element3d.position.y = 50;
this.element3d.position.z = -1000;
this.scene.add(this.element3d);
this.renderer.render(this.scene, this.camera);

希望这会有所帮助。

马库斯

如何在angular2中使用THREE.CSS3DRenderer

1 个答案: