From 39e735b29cc5ae8374db6ec3524d3a0366e33d0f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?= <1262327911@qq.com> Date: Fri, 11 Aug 2023 21:43:43 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3=E4=BA=86=E4=B8=89?= =?UTF-8?q?=E7=BB=B4=E5=9C=B0=E7=90=83=E4=B8=8D=E8=83=BD=E8=A2=AB=E6=88=AA?= =?UTF-8?q?=E5=9B=BE=E7=9A=84bug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Three/ThreeEarth01/code/world/Basic.ts | 125 +++++++++--------- 1 file changed, 63 insertions(+), 62 deletions(-) diff --git a/src/packages/components/Decorates/Three/ThreeEarth01/code/world/Basic.ts b/src/packages/components/Decorates/Three/ThreeEarth01/code/world/Basic.ts index bfe9d760..72284935 100644 --- a/src/packages/components/Decorates/Three/ThreeEarth01/code/world/Basic.ts +++ b/src/packages/components/Decorates/Three/ThreeEarth01/code/world/Basic.ts @@ -1,62 +1,63 @@ -/** - * 创建 threejs 四大天王 - * 场景、相机、渲染器、控制器 - */ - -import * as THREE from 'three' -import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' - -export class Basic { - public scene!: THREE.Scene - public camera!: THREE.PerspectiveCamera - public renderer!: THREE.WebGLRenderer - public controls!: OrbitControls - public dom: HTMLElement - - constructor(dom: HTMLElement) { - this.dom = dom - this.initScenes() - this.setControls() - } - - /** - * 初始化场景 - */ - initScenes() { - this.scene = new THREE.Scene() - - this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 100000) - this.camera.position.set(0, 30, -250) - - this.renderer = new THREE.WebGLRenderer({ - // canvas: this.dom, - alpha: true, // 透明 - antialias: true // 抗锯齿 - }) - this.renderer.setPixelRatio(window.devicePixelRatio) // 设置屏幕像素比 - this.renderer.setSize(window.innerWidth, window.innerHeight) // 设置渲染器宽高 - this.dom.appendChild(this.renderer.domElement) // 添加到dom中 - } - - /** - * 设置控制器 - */ - setControls() { - // 鼠标控制 相机,渲染dom - this.controls = new OrbitControls(this.camera, this.renderer.domElement) - - this.controls.autoRotateSpeed = 3 - // 使动画循环使用时阻尼或自转 意思是否有惯性 - this.controls.enableDamping = true - // 动态阻尼系数 就是鼠标拖拽旋转灵敏度 - this.controls.dampingFactor = 0.05 - // 是否可以缩放 - this.controls.enableZoom = true - // 设置相机距离原点的最远距离 - this.controls.minDistance = 100 - // 设置相机距离原点的最远距离 - this.controls.maxDistance = 300 - // 是否开启右键拖拽 - this.controls.enablePan = false - } -} +/** + * 创建 threejs 四大天王 + * 场景、相机、渲染器、控制器 + */ + +import * as THREE from 'three' +import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' + +export class Basic { + public scene!: THREE.Scene + public camera!: THREE.PerspectiveCamera + public renderer!: THREE.WebGLRenderer + public controls!: OrbitControls + public dom: HTMLElement + + constructor(dom: HTMLElement) { + this.dom = dom + this.initScenes() + this.setControls() + } + + /** + * 初始化场景 + */ + initScenes() { + this.scene = new THREE.Scene() + + this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 100000) + this.camera.position.set(0, 30, -250) + + this.renderer = new THREE.WebGLRenderer({ + // canvas: this.dom, + alpha: true, // 透明 + antialias: true, // 抗锯齿 + preserveDrawingBuffer: true + }) + this.renderer.setPixelRatio(window.devicePixelRatio) // 设置屏幕像素比 + this.renderer.setSize(window.innerWidth, window.innerHeight) // 设置渲染器宽高 + this.dom.appendChild(this.renderer.domElement) // 添加到dom中 + } + + /** + * 设置控制器 + */ + setControls() { + // 鼠标控制 相机,渲染dom + this.controls = new OrbitControls(this.camera, this.renderer.domElement) + + this.controls.autoRotateSpeed = 3 + // 使动画循环使用时阻尼或自转 意思是否有惯性 + this.controls.enableDamping = true + // 动态阻尼系数 就是鼠标拖拽旋转灵敏度 + this.controls.dampingFactor = 0.05 + // 是否可以缩放 + this.controls.enableZoom = true + // 设置相机距离原点的最远距离 + this.controls.minDistance = 100 + // 设置相机距离原点的最远距离 + this.controls.maxDistance = 300 + // 是否开启右键拖拽 + this.controls.enablePan = false + } +}