From dda78e2eb4a04f55d01de2645b4a6abc821cc8f9 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期三, 17 四月 2024 15:11:43 +0800
Subject: [PATCH] feat:绘制3d地图
---
src/views/screen/components/screen-map-three/experience/world/enviroment.js | 90 ++++++++++++++++++++++++++++++++-------------
1 files changed, 64 insertions(+), 26 deletions(-)
diff --git a/src/views/screen/components/screen-map-three/experience/world/enviroment.js b/src/views/screen/components/screen-map-three/experience/world/enviroment.js
index 4eae921..9fb8d80 100644
--- a/src/views/screen/components/screen-map-three/experience/world/enviroment.js
+++ b/src/views/screen/components/screen-map-three/experience/world/enviroment.js
@@ -7,46 +7,84 @@
constructor(experience) {
this.experience = experience;
this.scene = this.experience.scene;
- // this.setSunLight();
+ this.textureLoader = new THREE.TextureLoader();
+
+ this.setSunLight();
+ this.setRotateHola();
this.setBackground();
+ this.setCirclePoint();
}
setSunLight() {
- this.sunLight = new THREE.DirectionalLight('#ffffff', 4);
- this.sunLight.castShadow = true;
- this.sunLight.shadow.camera.far = 15;
- this.sunLight.shadow.mapSize.set(2048, 2048);
- this.sunLight.shadow.normalBias = 0.05;
- this.sunLight.position.set(-1.3, 7, 10);
- this.scene.add(this.sunLight);
+ // 骞宠鍏�1
+ let directionalLight1 = new THREE.DirectionalLight(0xffffff, 0.6);
+ directionalLight1.position.set(400, 200, 200);
+ // 骞宠鍏�2
+ let directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.6);
+ directionalLight2.position.set(-400, -200, -300);
+ // 鐜鍏�
+ let ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
+
+ this.scene.add(directionalLight1);
+ this.scene.add(directionalLight2);
+ this.scene.add(ambientLight);
}
- setBackground() {
- const texture = new THREE.TextureLoader();
- const rotatingApertureTexture = texture.load(rotatingAperture);
- const rotatingPointTexture = texture.load(rotatingPoint);
- const circlePointTexture = texture.load(circlePoint);
- const sceneBgTexture = texture.load(sceneBg);
- let meshConfig1 = {
- width: 100,
- height: 100,
+ setRotateHola() {
+ const rotatingApertureTexture = this.textureLoader.load(rotatingAperture);
+ const rotatingPointTexture = this.textureLoader.load(rotatingPoint);
+ const meshConfig1 = {
+ width: 48,
+ height: 48,
texture: rotatingApertureTexture,
- positionList: [0, 0.13, 0.3],
- scaleList: [0.048, 0.048, 0.048],
+ positionList: [0, 0.4, 0.3],
+ scaleList: [1, 1, 1],
rotateList: [-Math.PI / 2, 0, 0]
};
- let meshConfig2 = {
- width: 100,
- height: 100,
+ const meshConfig2 = {
+ width: 40,
+ height: 40,
texture: rotatingPointTexture,
- positionList: [0, 0.1, 0.3],
- scaleList: [0.04, 0.04, 0.04],
+ positionList: [0, 0.3, 0.3],
+ 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) {
@@ -56,7 +94,7 @@
map: texture,
transparent: true,
opacity: 1,
- depthTest: true,
+ depthTest: false,
});
let mesh = new THREE.Mesh(plane, material);
mesh.position.set(...positionList);
--
Gitblit v1.8.0