以前用纯js+threejs开发了3D。现在用angular试试。会展示部分代码。流程如下

 1.搭建项目环境ng new 项目名引入需要的3d包，并且要加类型的说明，否则无法调用,如下：cnpm i three --savecnpm i three-full --savecnpm i gsap --savecnpm i stats.js --save---------------------------cnpm i @types/three -scnpm i @types/three-full -scnpm i @types/gsap -scnpm i @types/stats.js -s以上安装完成需要的3D支持和环境库。

2.展示代码在src目录下建立conf/modul.tsimport {Scene,AmbientLight,PointLight,WebGLRenderer,PerspectiveCamera,GridHelper,Vector2,Raycaster,Color
} from 'three';import {CSS2DRenderer
} from 'node_modules/three/examples/jsm/renderers/CSS2DRenderer';
// @ts-ignore
import * as Stats from 'node_modules/stats.js/build/stats.min.js';import {FXAAShader, UnrealBloomPass, ShaderPass, FilmPass, OutlinePass, GeometryUtils, CopyShader, ColorifyShader, SepiaShader,OrbitControls, GLTFLoader, EffectComposer, RenderPass, SMAAShader, SMAAPass, ClearMaskPass, MaskPass,
} from 'three-full';//  渲染器
export const RENDERER = new WebGLRenderer(); //  渲染器(去据此){ antialias: true }
// @ts-ignore
export const CSS2DRENDER = new CSS2DRenderer();// tslint:disable-next-line:typedef
export function initRenderer(doc) {RENDERER.setSize(doc.clientWidth,doc.clientHeight);RENDERER.shadowMap.enabled = true; // 辅助线doc.appendChild(RENDERER.domElement);CSS2DRENDER.setSize(doc.clientWidth,doc.clientHeight);CSS2DRENDER.domElement.style.position = 'absolute';CSS2DRENDER.domElement.style.top = '0' ;CSS2DRENDER.domElement.className  = 'Css2DRenderDiv';doc.appendChild(CSS2DRENDER.domElement);}// 场景
export const SCENE = new Scene();export const MOUSE = new Vector2();
export const raycaster = new Raycaster();// tslint:disable-next-line:typedef
export function initScene() {SCENE.background = new Color(0xcccccc);
}//  灯光
// tslint:disable-next-line:typedef
export function initLight() {const ambientLight = new AmbientLight(0xffffff, 0.2);    // 全局光ambientLight.position.set(10, 20, 55);   // 灯光SCENE.add(ambientLight);// 点光源const pointLight = new PointLight(0xffffff);pointLight.distance = 0;CAMERA.add(pointLight);SCENE.add(CAMERA);
}//  相机
export let CAMERA;
export let CONTROLS;
// tslint:disable-next-line:typedef
export function initCamera(doc) {const d = {fov: 30, // 拍摄距离  视野角值越大，场景中的物体越小near: 1, //  最小范围far: 1000, //  最大范围};CAMERA = new PerspectiveCamera(d.fov,doc.clientWidth / doc.clientHeight,d.near,d.far);const p = {x: 0,y: 600,z: 200,};CAMERA.position.set(p.x, p.y, p.z);CAMERA.lookAt(0, 0, 0);CONTROLS = new OrbitControls(CAMERA, CSS2DRENDER.domElement);  // 控制镜头
}//  网格
// tslint:disable-next-line:typedef
export function initGrid() {const gridHelper = new GridHelper(100, 50);SCENE.add(gridHelper);
}//  性能检测
export const STATS = new Stats();
// tslint:disable-next-line:typedef
export function initStats(doc) {STATS.setMode(0);STATS.domElement.style.position = 'absolute';STATS.domElement.left = '0px';STATS.domElement.top = '0px';doc.appendChild(STATS.domElement);
}//  动画混合器组（把模型的动画混合器都push到这里面，在canvas.ts里面更新动画   ）
export const MIXER = [];

3.在app-module.ts调用conf下配置的tsimport { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { EventManager } from '@angular/platform-browser';
import {initRenderer,initCamera,initScene, initLight,initGrid, initStats, MOUSE, raycaster, CSS2DRENDER,RENDERER, CAMERA, SCENE, CONTROLS, STATS, MIXER
} from '../../src/config/base';// @ts-ignore
import {CSS2DObject
} from 'node_modules/three/examples/jsm/renderers/CSS2DRenderer';
import {FXAAShader, UnrealBloomPass, ShaderPass, FilmPass, OutlinePass, GeometryUtils, CopyShader, ColorifyShader, SepiaShader,OrbitControls, GLTFLoader, EffectComposer, RenderPass, SMAAShader, SMAAPass, ClearMaskPass, MaskPass,
} from 'three-full';
import { Vector2, Group, Scene, SphereGeometry, ImageUtils, AnimationMixer, MeshBasicMaterial, Mesh } from 'three';
import { fromEvent } from 'rxjs';
import {TweenMax} from 'gsap';
// import {ServerProcessService} from './share/server-process.service';@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{@ViewChild('canvasFrame', { static: true }) canvasContainer: ElementRef;thing;constructor(private eventManager: EventManager) { }title = 'datacenter';ngOnInit(): void {console.log('数据库获取值');// console.log(this.serverDataSource.getdata());this.init();// @ts-ignorethis.eventManager.addGlobalEventListener('window', 'click', (e) => {this.checkisModelsection( e );});this.eventManager.addGlobalEventListener('window', 'resize', (e) => {const width = window.innerWidth;const height = window.innerHeight;CAMERA.aspect = width / height;CAMERA.updateProjectionMatrix();RENDERER.setSize( width, height );RENDERER.setPixelRatio(window.devicePixelRatio);RENDERER.setSize(window.innerWidth, window.innerHeight);CSS2DRENDER.setSize(window.innerWidth, window.innerHeight);});this.eventManager.addGlobalEventListener('window', 'touchend', (e) => {console.log(e);});}// tslint:disable-next-line:typedefonResize(){console.log('888');}// tslint:disable-next-line:typedefcheckisModelsection( event ) {// tslint:disable-next-line:one-variable-per-declaration prefer-constlet x, y, z, selectedObj ;if ( event.changedTouches ) {x = event.changedTouches[ 0 ].pageX;y = event.changedTouches[ 0 ].pageY;} else {x = event.clientX;y = event.clientY;}MOUSE.x = ( x / window.innerWidth ) * 2 - 1;MOUSE.y = - ( y / window.innerHeight ) * 2 + 1;raycaster.setFromCamera( MOUSE, CAMERA );const inter = raycaster.intersectObjects( [ SCENE ], true );if (inter.length > 0){selectedObj = inter[ 0 ].object;console.log(selectedObj);const parentDiv = document.createElement('div');parentDiv.className = 'modelLabel';const asName = '55';const sonDiv = document.createElement('div');sonDiv.className =  'power-child';sonDiv.innerText = asName;parentDiv.appendChild(sonDiv);// @ts-ignoreconst parentLabel = new CSS2DObject( parentDiv );parentLabel.visible = true;parentLabel.name = 'biaoqian';parentLabel.position.set( 0, 0, 0 );selectedObj.add(parentLabel);TweenMax.to(selectedObj.position, 1.5, {y: '60',x: '10',z: '60',delay: 1});TweenMax.to(selectedObj.scale, 1.5, {y: '5',x: '5',z: '5',delay: 2});}}// tslint:disable-next-line:typedefinit() {initRenderer(this.canvasContainer.nativeElement);initCamera(this.canvasContainer.nativeElement);initScene();initLight();initGrid();initStats(this.canvasContainer.nativeElement);//  加载模型-starthis.importantModel();//  加载模型-end// const delta = new Clock();const rendererOut = () => {requestAnimationFrame(rendererOut);RENDERER.render(SCENE, CAMERA);CSS2DRENDER.render(SCENE, CAMERA);CONTROLS.update();STATS.update();if (MIXER) {MIXER.map(r => {// r.update(delta.getDelta());});}};rendererOut();}// tslint:disable-next-line:typedefimportantModel() {const rollOverGeo = new SphereGeometry( 5, 5, 5 );const rollOverMaterial = new MeshBasicMaterial( { color: 0xff0000, opacity: 0.5, transparent: true } );const rollOverMesh = new Mesh( rollOverGeo, rollOverMaterial );rollOverMesh.visible = true;rollOverMesh.position.set(20, 10, 0);rollOverMesh.name = 'robotMesh';SCENE.add( rollOverMesh );}
}

 不出意外肯定是可以跑起来了。案例里面也实现了部分的模型交互，动画以及对接数据库，剩下的就看你们想怎么弄。总直。重点还是模型，代码难度不大。到这里吧