import * as THREE from 'three'; import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'; // 导入轨道控制器 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'; import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer' // import gsap from 'gsap'; import ResourceTracker from '/@/utils/threejs/ResourceTracker'; import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader' import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader' class UseThree { canvasContainer: HTMLCanvasElement; CSSCanvasContainer: HTMLCanvasElement | null = null; camera: THREE.PerspectiveCamera | null = null; scene: THREE.Scene | null = null; renderer: THREE.WebGLRenderer | null = null; css3dRender: CSS3DRenderer | null = null; orbitControls: OrbitControls | null = null; giftLoader: THREE.Object3D | null = null; animationMixer: THREE.AnimationMixer | null = null; animationAction: THREE.AnimationAction | null = null; clock: THREE.Clock = new THREE.Clock(); // 计时器 timeoutId: NodeJS.Timeout | null = null; animationId: number = 0 resourceTracker:ResourceTracker | null = null track: any = null spriteText: THREE.Sprite | null = null constructor(canvasSelector, cssCanvas?) { this.resourceTracker = new ResourceTracker() this.track = this.resourceTracker.track.bind(this.resourceTracker) this.animationId = 0 this.canvasContainer = document.querySelector(canvasSelector); //初始化 this.init(cssCanvas); this.animate(); window.addEventListener('resize', this.resizeRenderer.bind(this)); // 添加滚动事件，鼠标滚动模型执行动画 // window.addEventListener('wheel', this.wheelRenderer.bind(this)); } init(cssCanvas?) { // 初始化场景 this.initScene(); // 初始化环境光 this.initLight(); // 初始化相机 this.initCamera(); //初始化渲染器 this.initRenderer(); // 初始化控制器 this.initControles(); if(cssCanvas){ this.initCSSRenderer(cssCanvas) // this.addTextSprite() } // this.setTestPlane() } initScene() { this.scene = this.track(new THREE.Scene()); // const axesHelper = new THREE.AxesHelper(100); // this.scene?.add(axesHelper); // const size = 1000; // const divisions = 10; // const gridHelper = new THREE.GridHelper( size, divisions ); // this.scene?.add( gridHelper ) } initLight() { const light = this.track(new THREE.AmbientLight(0xffffff, 1)); light.position.set(0, 1000, 1000); (this.scene as THREE.Scene).add(light); } initCamera() { this.camera = this.track(new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.01, 1000)); this.camera?.position.set(0, 0.2, 0.3); // const helper = new THREE.CameraHelper( this.camera); // this.scene?.add( helper ); } initRenderer() { this.renderer = this.track(new THREE.WebGLRenderer({ antialias: true, alpha:true })) as THREE.WebGLRenderer; // 设置屏幕像素比 this.renderer?.setPixelRatio(window.devicePixelRatio); // 设置渲染的尺寸 this.renderer?.setSize(window.innerWidth, window.innerHeight); // 色调映射 this.renderer.toneMapping = THREE.ACESFilmicToneMapping; this.renderer.outputEncoding = THREE.sRGBEncoding; this.renderer.shadowMap.enabled = true this.renderer.shadowMap.type = THREE.PCFSoftShadowMap // 曝光程度 this.renderer.toneMappingExposure = 1; this.canvasContainer.appendChild(this.renderer.domElement); } initCSSRenderer(cssCanvas) { this.CSSCanvasContainer = document.querySelector(cssCanvas); this.css3dRender = this.track(new CSS3DRenderer()) as CSS3DRenderer this.css3dRender.setSize((window.innerWidth), (window.innerHeight)) this.CSSCanvasContainer?.appendChild(this.css3dRender.domElement) this.css3dRender.render(this.scene as THREE.Scene, this.camera as THREE.PerspectiveCamera) this.orbitControls = this.track(new OrbitControls(this.camera as THREE.Camera, this.css3dRender?.domElement)) as OrbitControls; this.orbitControls.update() // this.orbitControls.enableZoom = false; // // to disable rotation // this.orbitControls.enableRotate = false; // // to disable pan // this.orbitControls.enablePan = false; } initControles() { this.orbitControls = this.track(new OrbitControls(this.camera as THREE.Camera, this.renderer?.domElement)) as OrbitControls; this.orbitControls.update() // this.orbitControls.enableZoom = false; // // to disable rotation // this.orbitControls.enableRotate = false; // // to disable pan // this.orbitControls.enablePan = false; } setModalCenter(group) { var box3 = new THREE.Box3() // 计算层级模型group的包围盒 // 模型group是加载一个三维模型返回的对象，包含多个网格模型 box3.expandByObject(group) // 计算一个层级模型对应包围盒的几何体中心在世界坐标中的位置 var center = new THREE.Vector3() box3.getCenter(center) // console.log('查看几何体中心坐标', center); // 重新设置模型的位置，使之居中。 group.position.x = group.position.x - center.x group.position.y = group.position.y - center.y group.position.z = group.position.z - center.z }; setModel(modalName) { const a = new Date().getTime() / 1000 return new Promise(async (resolve, reject) => { try { const db = window['CustomDB'] const modalArr = await db.modal.where('modalName').equals(modalName).toArray() // debugger if(modalArr.length > 0) { const modalValue = modalArr[0].modalVal try { const gltfLoader = new GLTFLoader() const dracoLoader = new DRACOLoader(); dracoLoader.setDecoderPath( '/3D/draco/gltf/' ); dracoLoader.setDecoderConfig({ type: "js" }); //使用兼容性强的draco_decoder.js解码器 dracoLoader.preload(); gltfLoader.setDRACOLoader(dracoLoader); gltfLoader.setPath('/3d/glft/') gltfLoader.parse(modalValue, '/3d/glft/', (gltf) => { const object = this.track(gltf.scene.children[0]) this.setModalCenter(object) object.traverse((obj) => { if (obj instanceof THREE.Mesh) { obj.material.emissiveIntensity = 1 obj.material.emissiveMap = obj.material.map if(obj.name !== "buxiugangse") { obj.receiveShadow = true } obj.castShadow = true } else if (obj.type === 'Object3D') { // const text3D = this.addYFText(obj) // const textCQ3D = this.addCQText(obj) // gltf.scene.add(text3D) // gltf.scene.add(textCQ3D) } }) this.scene?.add(object); console.log(object); resolve(object) }, (err)=> { console.log(err); }) } catch (error) { console.log(error); } } } catch (error) { reject('加载模型出错') } }) } setTestPlane() { const plane = new THREE.Mesh( new THREE.PlaneGeometry( 100, 100 ), new THREE.MeshPhongMaterial( { color: 0x999999, specular: 0x101010 } ) ); plane.rotation.x = - Math.PI / 2; plane.position.y = 0.03; plane.receiveShadow = true; // this.scene?.add( plane ); } /* 自定义材质 */ setCustomMaterial(group){} /* 场景环境背景 */ setEnvMap(hdr) { // new RGBELoader().setPath('/public/3D/hdr/').load(hdr + '.jpeg', (texture) => { // debugger // texture.mapping = THREE.EquirectangularReflectionMapping; // (this.scene as THREE.Scene).background = texture; // (this.scene as THREE.Scene).environment = texture; // }); new THREE.TextureLoader().setPath('/3D/hdr/').load(hdr + '.jpeg', (texture) => { texture.mapping = THREE.EquirectangularReflectionMapping; // (this.scene as THREE.Scene).background = new THREE.Color('#00000000'); (this.scene as THREE.Scene).environment = texture; }); } render() { const delta = this.clock.getElapsedTime(); this.resetLookAt() this.startMY() this.renderer?.render(this.scene as THREE.Object3D, this.camera as THREE.Camera); this.css3dRender?.render(this.scene as THREE.Scene, this.camera as THREE.PerspectiveCamera) this.animationMixer?.update(delta); } /* 实时物体刷新朝向 */ resetLookAt() { } /* 漫游 */ startMY() {} animate() { // this.renderer?.setAnimationLoop(this.render.bind(this)); if(this.animationId != -1) { this.render() this.animationId = requestAnimationFrame(this.animate.bind(this)) } } resizeRenderer() { // 更新相机比例 (this.camera as THREE.PerspectiveCamera).aspect = window.innerWidth / window.innerHeight; // 刷新相机矩阵 this.camera?.updateProjectionMatrix(); // 设置场景尺寸 this.renderer?.setSize(window.innerWidth, window.innerHeight); this.css3dRender?.setSize(window.innerWidth, window.innerHeight); } wheelRenderer(e: WheelEvent) { const timeScale = e.deltaY > 0 ? 1 : -1; this.animationAction?.setEffectiveTimeScale(timeScale); (this.animationAction as THREE.AnimationAction).paused = false; this.animationAction?.play(); if (this.timeoutId) { clearTimeout(this.timeoutId); } this.timeoutId = setTimeout(() => { this.animationAction?.halt(0.5); }, 500); } deleteModal() { try { this.resourceTracker && this.resourceTracker.dispose() this.renderer?.dispose() this.renderer?.forceContextLoss() // this.renderer?.domElement = null this.renderer = null // this.css3dRender?.domElement = null this.css3dRender = null; cancelAnimationFrame(this.animationId); const gl = this.renderer?.domElement.getContext("webgl"); gl && gl?.getExtension("WEBGL_lose_context")?.loseContext(); const gl1 = this.css3dRender?.domElement.getContext("webgl"); gl1 && gl1?.getExtension("WEBGL_lose_context")?.loseContext(); this.animationId = -1 this.resourceTracker?.untrack(this.resourceTracker.resources) // this.scene = null console.log('销毁场景',this.scene); } catch (error) { console.log(error); } // this.scene?.children.forEach((obj:any) => { // if(obj.type === 'Group'){ // obj.traverse(function(item:any) { // if (item.type === 'Mesh') { // item.geometry.dispose(); // item.material.dispose(); // !!item.clear&&item.clear(); // } // }) // }else if (obj.material) { // obj.material.dispose(); // }else if (obj.geometry) { // obj.geometry.dispose(); // } // this.scene?.remove(obj) // !!obj.clear??obj.clear() // obj = null; // }) // let gl = this.renderer?.domElement.getContext("webgl"); // gl && gl?.getExtension("WEBGL_lose_context")?.loseContext(); // this.renderer?.forceContextLoss(); // this.renderer?.dispose(); // this.camera = null; // this.orbitControls = null; // this.renderer.domElement = null; // this.renderer = null; // css3dRender.domElement = null; // css3dRender = null; // model3D.innerHTML = ''; // css3D.innerHTML = ''; // model3D = null // css3D = null // this.stats = null // scene = null THREE.Cache.clear(); console.log('3D环境已清理干净'); } /* 创建字体精灵 */ addTextSprite(message, parameters) { if (parameters === undefined) parameters = {}; var fontface = parameters.hasOwnProperty("fontface") ? parameters["fontface"] : "Arial"; /* 字体大小 */ var fontsize = parameters.hasOwnProperty("fontsize") ? parameters["fontsize"] : 18; /* 边框厚度 */ var borderThickness = parameters.hasOwnProperty("borderThickness") ? parameters["borderThickness"] : 4; /* 边框颜色 */ var borderColor = parameters.hasOwnProperty("borderColor") ? parameters["borderColor"] : { r: 0, g: 0, b: 0, a: 1.0 }; /* 背景颜色 */ var backgroundColor = parameters.hasOwnProperty("backgroundColor") ? parameters["backgroundColor"] : { r: 255, g: 255, b: 255, a: 1.0 }; /* 创建画布 */ var canvas = document.createElement('canvas'); var context = canvas.getContext('2d') as CanvasRenderingContext2D; // canvas.width = 0 // canvas.height = 200 /* 字体加粗 */ context.font = "Bold " + fontsize + "px " + fontface; /* 获取文字的大小数据，高度取决于文字的大小 */ var metrics = context.measureText(message); var textWidth = metrics.width; /* 背景颜色 */ context.fillStyle = "rgba(" + backgroundColor.r + "," + backgroundColor.g + "," + backgroundColor.b + "," + backgroundColor.a + ")"; /* 边框的颜色 */ context.strokeStyle = "rgba(" + borderColor.r + "," + borderColor.g + "," + borderColor.b + "," + borderColor.a + ")"; context.lineWidth = borderThickness; /* 绘制圆角矩形 */ this.roundRect(context, borderThickness / 2, borderThickness / 2, textWidth + borderThickness, fontsize * 1.4 + borderThickness, 6); // this.roundRect(context, borderThickness / 2, borderThickness / 2, 10000, 10000, 6); /* 字体颜色 */ context.fillStyle = "rgba(0, 0, 0, 1.0)"; context.fillText(message, borderThickness, fontsize + borderThickness); // context.fillRect(borderThickness / 2, borderThickness / 2, 10000, 10000) /* 画布内容用于纹理贴图 */ var texture = new THREE.Texture(canvas); texture.needsUpdate = true; var spriteMaterial = new THREE.SpriteMaterial({ map: texture, transparent:false }); var sprite = new THREE.Sprite(spriteMaterial); /* 缩放比例 */ sprite.scale.set(10, 5, 1); return sprite; } /* 绘制圆角矩形 */ roundRect(ctx, x, y, w, h, r) { ctx.beginPath(); ctx.moveTo(x + r, y); ctx.lineTo(x + w - r, y); ctx.quadraticCurveTo(x + w, y, x + w, y + r); ctx.lineTo(x + w, y + h - r); ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h); ctx.lineTo(x + r, y + h); ctx.quadraticCurveTo(x, y + h, x, y + h - r); ctx.lineTo(x, y + r); ctx.quadraticCurveTo(x, y, x + r, y); ctx.closePath(); ctx.fill(); ctx.stroke(); } } export default UseThree;