如何在 angular2 中使用 THREE.CSS3DRenderer

Question

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

import * as THREE from "three";

但是当我尝试使用 CSS3DRenderer 时，

this.renderer = new THREE.CSS3DRenderer();

我收到了错误

core.umd.js:3004 例外：THREE.CSS3DRenderer 不是构造函数。好像css3drenderer不在three.js中 包裹。

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

那么我如何在 angular2 中使用 new THREE.CSS3DRenderer() 呢？顺便说一句，我有 angular2@2.1.2 和 webpack。任何建议将不胜感激，谢谢！

Answer 1

编辑 2 - OrbitControls 等示例功能

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

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

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"
]

注意构建文件夹和示例文件夹之间的区别。对于每个额外的功能，添加它的直接路径。还要小心打字，因为三的打字定义可能不包括所有示例，因此请查看编辑 1 如何在本地扩展它。

---

编辑 1 - 打字

由于 Angular 6 typings.d.ts 不再在应用程序创建时创建。这需要在 src 文件夹内的应用程序类型中完成。如果卡住了，请看下面的例子。

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 项目并显式声明类型的方法，而不是另一个第三方。以下是我获得基本渲染的步骤：

1. 删除@types/三种类型
2. 添加“声明变量三：任意；”到typings.d.ts

3. 将 node_module 路径添加到 .angular-cli.json

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

4. 将以下代码添加到组件中以创建和渲染 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);
   

希望这会有所帮助。

马库斯