如何在angular2中使用THREE.CSS3DRenderer

Question

我已经在我的angular2应用程序中通过npm安装应用了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等的示例文件夹)未打包在主构建中.因此,它们在技术上并不存在于运行时,因为它们没有链接到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文件夹之间的区别.对于每个额外功能,添加它的直接路径.同样考虑打字,因为三人的打字定义可能不包括所有的例子,因此请看编辑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项目并明确声明类型的路径,而不是另一个第三方.以下是我获取基本渲染内容的步骤:

1. 删除@ types /三种类型
2. 添加"declare var THREE:any;" 到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);
   

希望这可以帮助.

马库斯