import * as THREE from 'three';
|
import rotatingAperture from '@/assets/map/texture/rotatingAperture.png';
|
import rotatingPoint from '@/assets/map/texture/rotating-point2.png';
|
import circlePoint from '@/assets/map/texture/circle-point.png';
|
import sceneBg from '@/assets/map/texture/scene-bg2.png';
|
|
import { GUI } from "three/examples/jsm/libs/lil-gui.module.min.js";
|
|
export default class Enviroment {
|
constructor(experience) {
|
this.experience = experience;
|
this.scene = this.experience.scene;
|
this.textureLoader = new THREE.TextureLoader();
|
|
this.setSunLight();
|
// this.setRotateHola();
|
this.setBackground();
|
// this.setCirclePoint();
|
|
// this.debuger();
|
}
|
setSunLight() {
|
// 平行光1
|
this.directionalLight1 = new THREE.DirectionalLight(0xffffff, 0.9);
|
this.directionalLight1.position.set(0, 57, 33);
|
// 平行光2
|
this.directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.6);
|
this.directionalLight2.position.set(-95, 28, -33);
|
// 环境光
|
this.ambientLight = new THREE.AmbientLight(0xffffff, 0.8);
|
|
this.scene.add(this.directionalLight1);
|
this.scene.add(this.directionalLight2);
|
this.scene.add(this.ambientLight);
|
}
|
|
setRotateHola() {
|
const rotatingApertureTexture = this.textureLoader.load(rotatingAperture);
|
const rotatingPointTexture = this.textureLoader.load(rotatingPoint);
|
const meshConfig1 = {
|
width: 48,
|
height: 48,
|
texture: rotatingApertureTexture,
|
positionList: [0, 0.4, 0],
|
scaleList: [1, 1, 1],
|
rotateList: [-Math.PI / 2, 0, 0]
|
};
|
const meshConfig2 = {
|
width: 40,
|
height: 40,
|
texture: rotatingPointTexture,
|
positionList: [0, 0.3, 0],
|
scaleList: [1, 1, 1],
|
rotateList: [-Math.PI / 2, 0, 0]
|
};
|
this.hola1 = this.createMesh(meshConfig1);
|
this.hola2 = this.createMesh(meshConfig2);
|
this.scene.add(this.hola1);
|
this.scene.add(this.hola2);
|
}
|
|
setBackground() {
|
const sceneBgTexture = this.textureLoader.load(sceneBg);
|
const plane = new THREE.PlaneGeometry(120, 120);
|
const material = new THREE.MeshPhongMaterial({
|
// color: 0x061920,
|
color: 0xffffff,
|
map: sceneBgTexture,
|
transparent: true,
|
opacity: 1,
|
// depthTest: true
|
});
|
this.background = new THREE.Mesh(plane, material);
|
this.background.rotation.set(-Math.PI / 2, 0, 0);
|
this.background.position.set(0, 0.1, 0);
|
this.scene.add(this.background);
|
}
|
|
setCirclePoint() {
|
const circleTexture = this.textureLoader.load(circlePoint);
|
const plane = new THREE.PlaneGeometry(45, 45);
|
const material = new THREE.MeshPhongMaterial({
|
color: 0x00ffff,
|
map: circleTexture,
|
transparent: true,
|
opacity: 1,
|
depthTest: false,
|
});
|
this.circle = new THREE.Mesh(plane, material);
|
this.circle.rotation.set(-Math.PI / 2, 0, 0);
|
this.circle.position.set(0, 0.2, 0);
|
this.scene.add(this.circle);
|
}
|
|
createMesh(config) {
|
let { width, height, texture, positionList, rotateList, scaleList } = config;
|
let plane = new THREE.PlaneGeometry(width, height);
|
let material = new THREE.MeshBasicMaterial({
|
map: texture,
|
transparent: true,
|
opacity: 1,
|
depthTest: false,
|
});
|
let mesh = new THREE.Mesh(plane, material);
|
mesh.position.set(...positionList);
|
mesh.scale.set(...scaleList);
|
mesh.rotation.set(...rotateList);
|
return mesh;
|
}
|
|
update() {
|
if (this.hola1) {
|
this.hola1.rotation.z += 0.001;
|
}
|
if (this.hola2) {
|
this.hola2.rotation.z -= 0.001;
|
}
|
}
|
|
destroy() {
|
this.disposeObject();
|
this.removeObject();
|
this.resetObject();
|
}
|
|
disposeObject() {
|
this.hola1.geometry.dispose();
|
this.hola1.material.dispose();
|
this.hola2.geometry.dispose();
|
this.hola2.material.dispose();
|
this.background.geometry.dispose();
|
this.background.material.dispose();
|
this.circle.geometry.dispose();
|
this.circle.material.dispose();
|
this.directionalLight1.dispose();
|
this.directionalLight2.dispose();
|
this.ambientLight.dispose();
|
}
|
|
removeObject() {
|
this.scene.remove(this.hola1);
|
this.scene.remove(this.hola2);
|
this.scene.remove(this.background);
|
this.scene.remove(this.circle);
|
}
|
|
resetObject() {
|
this.hola1 = null;
|
this.hola2 = null;
|
this.background = null;
|
this.circle = null;
|
this.directionalLight1 = null;
|
this.directionalLight2 = null;
|
this.ambientLight = null;
|
}
|
|
debuger() {
|
const gui = new GUI();
|
|
const folder1 = gui.addFolder('平行光1');
|
const folder2 = gui.addFolder('平行光2');
|
const folder3 = gui.addFolder('环境光');
|
|
folder1.add(this.directionalLight1.position, 'x').min(-200).max(200).step(1).name("x轴的位置");
|
folder1.add(this.directionalLight1.position, 'y').min(-200).max(200).step(1).name("y轴的位置");
|
folder1.add(this.directionalLight1.position, 'z').min(-200).max(200).step(1).name("z轴的位置");
|
folder1.add(this.directionalLight1, 'intensity').min(0).max(1).step(0.1).name("强度");
|
|
folder2.add(this.directionalLight2.position, 'x').min(-200).max(200).step(1).name("x轴的位置");
|
folder2.add(this.directionalLight2.position, 'y').min(-200).max(200).step(1).name("y轴的位置");
|
folder2.add(this.directionalLight2.position, 'z').min(-200).max(200).step(1).name("z轴的位置");
|
folder2.add(this.directionalLight2, 'intensity').min(0).max(1).step(0.1).name("强度");
|
|
|
folder3.add(this.ambientLight, 'intensity').min(0).max(1).step(0.1).name("强度");
|
}
|
}
|
