angular - 如何在 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 EXCEPTION: THREE.CSS3DRenderer is not a constructor. It seems like css3drenderer is not in the three.js package.

我还安装了 npm install css3drenderer。现在我在 node_modules/css3drenderer/中同时拥有 CSS3DRenderer.js，在 node_modules/@types/three/中拥有 three-css3drenderer.d.ts

那么我如何在 angular2 中使用新的 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"
]

请注意 build 和 examples 文件夹之间的区别。对于每个额外的功能添加它的直接路径。还要注意打字，因为 Three 的打字定义可能不包括所有示例，因此请查看编辑 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 类型，但理想情况下这应该是一个接口(interface)等。

---

这取决于 Angular 4 CLI。这也是我需要一个一次性项目的快速解决方案，没有什么长期的...

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

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

但是，我没有选择另一个第三方，而是选择了将外部全局脚本添加到 Angular CLI 项目并显式声明类型的途径。以下是我获得基本渲染的步骤:

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

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

   “脚本”:[ “../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);
   

希望这对您有所帮助。

马库斯