import * as THREE from "three"; import { Mesh } from "three"; import { CameraControls, PointPick, boardMaterial, selectMaterial } from "."; import { CameraUpdate } from "./CameraUpdate"; import { ColorMaterial } from "./ColorPalette"; import { GetBox, GetBoxArr, cZeroVec } from "./GeUtils"; import { PlaneExt } from "./PlaneExt"; export class Viewer { m_LookTarget: any; m_Camera: CameraUpdate = new CameraUpdate(); m_bNeedUpdate: boolean = true; m_Render: THREE.WebGLRenderer;//渲染器 //暂时只用这个类型 m_DomEl: HTMLElement; //画布容器 _Height: number; _Width: number; m_Scene: THREE.Scene = new THREE.Scene(); //构造 constructor(canvasContainer: HTMLElement) { this.m_DomEl = canvasContainer; this.initRender(canvasContainer); this.OnSize(); this.StartRender(); new CameraControls(this); window.addEventListener("resize", () => { this.OnSize(); }); let oldMesh: Mesh; this.m_Render.domElement.addEventListener("mousemove", (e: MouseEvent) => { let mesh = PointPick(this, e.offsetX, e.offsetY); if (oldMesh) oldMesh.material = boardMaterial; if (mesh && mesh.material !== ColorMaterial.GetLineMaterial(1)) { oldMesh = mesh; mesh.material = selectMaterial; } this.m_bNeedUpdate = true; }) } //初始化render initRender(canvasContainer: HTMLElement) { this.m_Render = new THREE.WebGLRenderer( { antialias: true,//antialias:true/false是否开启反锯齿 precision: "highp",//precision:highp/mediump/lowp着色精度选择 alpha: true,//alpha:true/false是否可以设置背景色透明 // premultipliedAlpha: false,//? // stencil: false,//? // preserveDrawingBuffer: true,//preserveDrawingBuffer:true/false是否保存绘图缓冲 // maxLights: 1//maxLights:最大灯光数 } ); //加到画布 canvasContainer.appendChild(this.m_Render.domElement); this.m_Render.autoClear = true; //如果设置,那么它希望所有的纹理和颜色都是预乘的伽玛。默认值为false。 // this.m_Render.gammaInput = true; // this.m_Render.gammaOutput = true; // this.m_Render.shadowMap.enabled = true; // this.m_Render.toneMapping = THREE.ReinhardToneMapping; //设置设备像素比。 这通常用于HiDPI设备,以防止模糊输出画布。 this.m_Render.setPixelRatio(window.devicePixelRatio); this.m_Render.physicallyCorrectLights = true; //this.m_Render.toneMappingExposure = Math.pow(1, 5.0); // to allow for very bright scenes. //设置它的背景色为黑色 this.m_Render.setClearColor(0xffffff, 1); this.OnSize(); } OnSize = (width?, height?) => { this._Width = width ? width : this.m_DomEl.clientWidth; this._Height = height ? height : this.m_DomEl.clientHeight; //校验.成为2的倍数 避免外轮廓错误. if (this._Width % 2 == 1) this._Width -= 1; if (this._Height % 2 == 1) this._Height -= 1; this.m_Render.setSize(this._Width, this._Height); this.m_Camera.SetSize(this._Width, this._Height); } StartRender = () => { requestAnimationFrame(this.StartRender); if (this.m_Scene != null && this.m_bNeedUpdate) { this.Render(); this.m_bNeedUpdate = false; } } Render() { this.m_Render.render(this.m_Scene, this.m_Camera.Camera); } ScreenToWorld(pt: THREE.Vector3, planVec?: THREE.Vector3) { //变换和求交点 let plan = new PlaneExt(planVec || new THREE.Vector3(0, 0, 1)); let raycaster = new THREE.Raycaster(); // 射线从相机射线向屏幕点位置 raycaster.setFromCamera( { x: (pt.x / this._Width) * 2 - 1, y: - (pt.y / this._Height) * 2 + 1 } , this.m_Camera.Camera ) plan.intersectRay(raycaster.ray, pt, true); } WorldToScreen(pt: THREE.Vector3) { let widthHalf = this._Width * 0.5; let heightHalf = this._Height * 0.5; pt.project(this.m_Camera.Camera); pt.x = (pt.x * widthHalf) + widthHalf; pt.y = - (pt.y * heightHalf) + heightHalf; } /** * 更新视角观测目标(物体中心) * * @memberof Viewer */ UpdateLockTarget() { let renderList = this.m_Render.renderLists.get(this.m_Scene, this.m_Camera.Camera); let box = GetBoxArr(renderList.opaque.map(o => o.object)); if (box) this.m_LookTarget = box.getCenter(new THREE.Vector3()); else this.m_LookTarget = cZeroVec; } Rotate(mouseMove: THREE.Vector3) { this.m_Camera.Rotate(mouseMove, this.m_LookTarget); this.m_bNeedUpdate = true; } Pan(mouseMove: THREE.Vector3) { this.m_Camera.Pan(mouseMove); this.m_bNeedUpdate = true; } Zoom(scale: number, center?: THREE.Vector3) { this.m_Camera.Zoom(scale, center); this.m_bNeedUpdate = true; } ZoomAll() { this.m_Camera.ZoomExtensBox3(GetBox(this.m_Scene, true)); this.m_bNeedUpdate = true; } ViewToTop() { this.m_Camera.LookAt(new THREE.Vector3(0, 0, -1)); this.m_bNeedUpdate = true; } ViewToFront() { this.m_Camera.LookAt(new THREE.Vector3(0, 1, 0)); this.m_bNeedUpdate = true; } ViewToSwiso() { this.m_Camera.LookAt(new THREE.Vector3(1, 1, -1)); this.m_bNeedUpdate = true; } }