From ee17debc7eff4af0bbfc1f28a256f2a05993b0c5 Mon Sep 17 00:00:00 2001 From: ZhangXianQiang <1135831638@qq.com> Date: 星期二, 16 四月 2024 17:19:36 +0800 Subject: [PATCH] feat:添加圆环 --- src/views/screen/components/screen-map-three/experience/world/enviroment.js | 86 +++++++++++++++++++++++++++++++++++------- 1 files changed, 71 insertions(+), 15 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 ec16969..4eae921 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 @@ -1,20 +1,76 @@ 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'; export default class Enviroment { - constructor(experience) { - this.experience = experience; - this.scene = this.experience.scene; - this.setSunLight(); + constructor(experience) { + this.experience = experience; + this.scene = this.experience.scene; + // this.setSunLight(); + this.setBackground(); + } + 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); + } + + 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, + texture: rotatingApertureTexture, + positionList: [0, 0.13, 0.3], + scaleList: [0.048, 0.048, 0.048], + rotateList: [-Math.PI / 2, 0, 0] + }; + let meshConfig2 = { + width: 100, + height: 100, + texture: rotatingPointTexture, + positionList: [0, 0.1, 0.3], + scaleList: [0.04, 0.04, 0.04], + 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); + } + + 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: true, + }); + 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; } - 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); + if (this.hola2) { + this.hola2.rotation.z -= 0.001; + } } } \ No newline at end of file -- Gitblit v1.8.0