|
|
@@ -1,10 +1,11 @@
|
|
|
import * as THREE from 'three'; //导入整个 three.js核心库
|
|
|
-import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';
|
|
|
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'; //导入控制器模块，轨道控制器
|
|
|
-import { CSS3DRenderer, CSS3DSprite } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
|
|
|
-import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
|
|
|
+import {FBXLoader} from 'three/examples/jsm/loaders/FBXLoader';
|
|
|
+import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'; //导入控制器模块，轨道控制器
|
|
|
+import {CSS3DRenderer, CSS3DSprite} from 'three/examples/jsm/renderers/CSS3DRenderer.js';
|
|
|
+import {GUI} from 'three/examples/jsm/libs/lil-gui.module.min.js';
|
|
|
import * as TWEEN from '@tweenjs/tween.js';
|
|
|
-import { getBottomMaterial } from './material.js';
|
|
|
+import {getBottomMaterial} from './material.js';
|
|
|
+
|
|
|
// 定义一个 class类
|
|
|
class renderModel {
|
|
|
constructor(selector) {
|
|
|
@@ -28,6 +29,7 @@ class renderModel {
|
|
|
//模型平面
|
|
|
this.planeGeometry;
|
|
|
}
|
|
|
+
|
|
|
// 初始化加载模型方法
|
|
|
init() {
|
|
|
//初始化场景
|
|
|
@@ -46,6 +48,7 @@ class renderModel {
|
|
|
//场景渲染
|
|
|
this.sceneAnimation();
|
|
|
}
|
|
|
+
|
|
|
//创建场景
|
|
|
initScene() {
|
|
|
this.scene = new THREE.Scene();
|
|
|
@@ -75,11 +78,13 @@ class renderModel {
|
|
|
this.scene.add(plane2);
|
|
|
this.scene.add(plane);
|
|
|
}
|
|
|
+
|
|
|
// 创建相机
|
|
|
initCamera() {
|
|
|
- const { clientHeight, clientWidth } = this.container;
|
|
|
+ const {clientHeight, clientWidth} = this.container;
|
|
|
this.camera = new THREE.PerspectiveCamera(18, clientWidth / clientHeight, 0.1, 10000);
|
|
|
}
|
|
|
+
|
|
|
// 创建渲染器
|
|
|
initRender() {
|
|
|
this.renderer = new THREE.WebGLRenderer({
|
|
|
@@ -94,7 +99,7 @@ class renderModel {
|
|
|
//设置屏幕像素比
|
|
|
this.renderer.setPixelRatio(window.devicePixelRatio);
|
|
|
//渲染的尺寸大小
|
|
|
- const { clientHeight, clientWidth } = this.container;
|
|
|
+ const {clientHeight, clientWidth} = this.container;
|
|
|
this.renderer.setSize(clientWidth, clientHeight);
|
|
|
this.container.appendChild(this.renderer.domElement);
|
|
|
|
|
|
@@ -110,24 +115,32 @@ class renderModel {
|
|
|
this.css3DRenderer.domElement.style.className = 'css3DRenderer';
|
|
|
this.container.appendChild(this.css3DRenderer.domElement);
|
|
|
}
|
|
|
+
|
|
|
// 创建光源
|
|
|
createLight() {
|
|
|
this.scene.add(new THREE.AmbientLight(0xffffff, 10));
|
|
|
}
|
|
|
+
|
|
|
initControls() {
|
|
|
this.controls = new OrbitControls(this.camera, this.renderer.domElement);
|
|
|
- this.controls.enableDamping = true;
|
|
|
- this.controls.screenSpacePanning = false;
|
|
|
- this.controls.maxPolarAngle = Math.PI/1.1 ;
|
|
|
- this.controls.minPolarAngle = Math.PI/2 ;
|
|
|
- this.controls.minAzimuthAngle = 0 ;
|
|
|
- this.controls.maxAzimuthAngle = 0 ;
|
|
|
- this.controls.maxDistance = 2000;
|
|
|
+ // this.controls.enableDamping = true;
|
|
|
+ // this.controls.screenSpacePanning = false;
|
|
|
+ // this.controls.maxPolarAngle = Math.PI / 1.1;
|
|
|
+ // this.controls.minPolarAngle = Math.PI / 2;
|
|
|
+ // this.controls.minAzimuthAngle = 0;
|
|
|
+ // this.controls.maxAzimuthAngle = 0;
|
|
|
+ // this.controls.maxDistance = 2000;
|
|
|
//标签控制器
|
|
|
this.css3dControls = new OrbitControls(this.camera, this.css3DRenderer.domElement);
|
|
|
this.css3dControls.enablePan = false;
|
|
|
this.css3dControls.enableDamping = true;
|
|
|
+ this.controls.mouseButtons = {
|
|
|
+ LEFT: THREE.MOUSE.PAN,
|
|
|
+ MIDDLE: THREE.MOUSE.DOLLY,
|
|
|
+ RIGHT: THREE.MOUSE.ROTATE
|
|
|
+ };
|
|
|
}
|
|
|
+
|
|
|
animate() {
|
|
|
this.renderer.render(this.scene, this.camera);
|
|
|
this.controls.update();
|
|
|
@@ -140,10 +153,12 @@ class renderModel {
|
|
|
// console.log('Controls Target:', this.controls.target);
|
|
|
// }
|
|
|
}
|
|
|
+
|
|
|
// 使用动画器不断更新场景
|
|
|
sceneAnimation() {
|
|
|
this.renderer.setAnimationLoop(this.animate.bind(this));
|
|
|
}
|
|
|
+
|
|
|
initGUI() {
|
|
|
const gui = new GUI();
|
|
|
|
|
|
@@ -208,7 +223,7 @@ class renderModel {
|
|
|
.name('Reset Position');
|
|
|
}
|
|
|
|
|
|
- flyTo(target, scale=1, duration = 1000) {
|
|
|
+ flyTo(target, scale = 1, duration = 1000) {
|
|
|
const targetPosition = new THREE.Vector3().copy(target.position);
|
|
|
const targetFocus = new THREE.Vector3().copy(target.targetContent);
|
|
|
|
|
|
@@ -230,8 +245,13 @@ class renderModel {
|
|
|
})
|
|
|
.start();
|
|
|
|
|
|
- new TWEEN.Tween(this.model.scale).to({ x: scale, y: scale, z: scale }, duration).easing(TWEEN.Easing.Quadratic.InOut).start();
|
|
|
+ new TWEEN.Tween(this.model.scale).to({
|
|
|
+ x: scale,
|
|
|
+ y: scale,
|
|
|
+ z: scale
|
|
|
+ }, duration).easing(TWEEN.Easing.Quadratic.InOut).start();
|
|
|
}
|
|
|
+
|
|
|
tag3D(name) {
|
|
|
// 创建div元素(作为标签)
|
|
|
let div = document.createElement('div');
|
|
|
@@ -260,6 +280,7 @@ class renderModel {
|
|
|
dialog.rotateY(Math.PI / 2); //控制HTML标签CSS3对象姿态角度
|
|
|
return dialog; //返回CSS3模型标签
|
|
|
}
|
|
|
+
|
|
|
/**
|
|
|
* 设置加载模型居中
|
|
|
* {Object} object 模型对象
|
|
|
@@ -274,6 +295,7 @@ class renderModel {
|
|
|
object.position.y += object.position.y - center.y;
|
|
|
object.position.z = 0;
|
|
|
}
|
|
|
+
|
|
|
setFBXModel() {
|
|
|
var fbxLoader = new FBXLoader();
|
|
|
fbxLoader.load('/models/model2.FBX', object => {
|
|
|
@@ -314,14 +336,16 @@ class renderModel {
|
|
|
this.createStorageLabel();
|
|
|
});
|
|
|
}
|
|
|
+
|
|
|
onWindowResizes() {
|
|
|
if (!this.container) return false;
|
|
|
- const { clientHeight, clientWidth } = this.container;
|
|
|
+ const {clientHeight, clientWidth} = this.container;
|
|
|
//调整屏幕大小
|
|
|
this.camera.aspect = clientWidth / clientHeight; // 摄像机宽高比例
|
|
|
this.camera.updateProjectionMatrix(); //相机更新矩阵，将3d内容投射到2d面上转换
|
|
|
this.renderer.setSize(clientWidth, clientHeight);
|
|
|
}
|
|
|
+
|
|
|
calcMeshCenter(group) {
|
|
|
/**
|
|
|
* 包围盒全自动计算：模型整体居中
|
|
|
@@ -338,6 +362,7 @@ class renderModel {
|
|
|
group.position.y = 0;
|
|
|
group.position.z = 17;
|
|
|
}
|
|
|
+
|
|
|
createGuangfuLabel() {
|
|
|
const label3D = this.tag3D('光伏');
|
|
|
const dialog3D = this.createDialog(`
|
|
|
@@ -370,6 +395,7 @@ class renderModel {
|
|
|
this.scene.add(label3D);
|
|
|
this.scene.add(dialog3D);
|
|
|
}
|
|
|
+
|
|
|
createStorageLabel() {
|
|
|
const label3D = this.tag3D('储能');
|
|
|
const dialog3D = this.createDialog(`
|
|
|
@@ -402,6 +428,7 @@ class renderModel {
|
|
|
this.scene.add(label3D);
|
|
|
this.scene.add(dialog3D);
|
|
|
}
|
|
|
+
|
|
|
createFuheLabel() {
|
|
|
const label3D = this.tag3D('负荷');
|
|
|
const dialog3D = this.createDialog(`
|
