如何在angular2中使用THREE.css3drender

我已经在我的angular2应用程序中应用了三个.js，由npm安装这两个@types/three@0.0.27及three@0.82.1我在我的服务中导入它们

import * as THREE from "three";

但当我尝试使用CSS3时

this.renderer = new THREE.CSS3DRenderer();

我弄错了

core.umd.js:3004异常：THREE.css3drender不是构造函数。似乎css3drender不在three.js中 包裹

我还做了npm安装css3drender。现在我在node_modules/css3drender/中有css3drender.js，在node_modules/@types/three中有three-css3drender.d.ts/

---

那么如何在angular2中使用新的THREE.css3drender（）？顺便说一句，我有angular2@2.1.2用网页包。任何建议都将不胜感激，谢谢

编辑2-示例功能，如轨道控制

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

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

在该文件中，转到project.architect.scripts数组并添加其节点路径

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

注意build和examples文件夹之间的区别。对于每个额外功能，添加其直接路径。还要注意打字，因为三的打字定义可能不包括所有的示例，因此请参阅Edit1，了解如何在本地扩展它

---

编辑1-打字

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

主要是这两个文件：

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

---

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

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

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

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

删除@types/三种类型

在typings.d.ts中添加“declare var THREE:any；”

将节点_模块路径添加到.angular-cli.json

“脚本”：[
“./node_modules/three/build/three.min.js”，
“./node_modules/three/examples/js/renderers/css3drender.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);

希望这有帮助

---

Marcus

编辑2-示例功能，如轨道控制

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

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

在该文件中，转到project.architect.scripts数组并添加其节点路径

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

注意build和examples文件夹之间的区别。对于每个额外功能，添加其直接路径。还要注意打字，因为三的打字定义可能不包括所有的示例，因此请参阅Edit1，了解如何在本地扩展它

---

编辑1-打字

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

主要是这两个文件：

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

---

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

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

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

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

删除@types/三种类型

在typings.d.ts中添加“declare var THREE:any；”

将节点_模块路径添加到.angular-cli.json

“脚本”：[
“./node_modules/three/build/three.min.js”，
“./node_modules/three/examples/js/renderers/css3drender.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);

希望这有帮助

---

Marcus

您已经获得了该类，但是您是否已将THREE.css3drender js文件添加到应用程序中？它是在主脚本之前加载的，还是在three.min.js之后加载的？如果你正在制作自己的min文件，它是否被缩小并包含在正确的位置？@Radio No我没有添加它，three.min.js也没有。我的index.html中没有一个。我只是从“三”中*导入*为三；*在我的组件中，我得到了我的组件中的三个。但是css3drender不在three.js包中，所以我希望我可以在我的组件中使用css3drender，就像three.webglrenderer一样，不必在我的html中添加css3renderer.min.js，只需导入