three-base 1.0.16 → 1.0.18

package/README.md

@@ -1 +1,94 @@
-没有文档请勿下载
+1. 创建一个Threebase 实例
+
+   ```tsx
+   class HomeRender extends ThreeBase {
+
+       constructor() {
+           super();
+       }
+
+       // 环境光
+       ambientLight = (() => {
+           const ambientLight = new AmbientLight("#fff", 0.4);
+           this.scene.add(ambientLight);
+           return ambientLight;
+       })();
+
+       //点光源
+       pointLight = (() => {
+           const pointLight = new PointLight("#fff", 0.4);
+           pointLight.position.set(50, 40, 50);
+           this.scene.add(pointLight);
+           return pointLight;
+       })();
+
+       init() {
+           super.init();
+   	// 使用这个方法来初始化相机的位置和朝向
+           this.resetLookAt({
+               center: new Vector3(0, 0, 0),
+               position: new Vector3(10.954, 19.452, 39.811)
+           });
+
+       }
+
+       box = (() => {
+           const geometry = new BoxGeometry(10, 10, 10);
+           const matearil = new MeshLambertMaterial({ color: 0xfff });
+           const mesh = new Mesh(geometry, matearil);
+
+   	//创建一个动画对象
+           const transition = new Transition({ rotationY: 0 });
+
+           // 动画对象播放回调
+           transition.onChange(({ rotationY }) => {
+               mesh.rotation.y = rotationY;
+           });
+
+           mesh.position.set(0, 0, 0);
+           mesh.userData = { cursor: "pointer", enableEvent: true };
+
+           // 提供了常用的鼠标事件
+           mesh.addEventListener("click", e => { });
+           mesh.addEventListener("dbclick", e => { });
+
+           mesh.addEventListener("leftclick", e => {
+               transition.set({ rotationY: Math.random() * 5 });
+           });
+           mesh.addEventListener("rightclick", e => { });
+           mesh.addEventListener("mouseenter", e => { });
+           mesh.addEventListener("mouseleave", e => { });
+           mesh.addEventListener("mousemove", e => { });
+           mesh.addEventListener("mousedown", e => { });
+           mesh.addEventListener("mouseup", e => { });
+
+           // 使用键盘修改模型的位置
+           // keyContorls.addEventListener("change", e => {
+           //     mesh.position.add(e.direction);
+           //     console.log(mesh.position.toArray().join(" ,"));
+           // });
+
+           this.scene.add(mesh);
+           return mesh;
+       })();
+
+   }
+
+
+   const homeRenderer = new HomeRender();
+
+   // 导出这个单例对象
+   export default homeRenderer;
+
+
+
+   2.添加到div里面
+
+   import homeRenderer form "./homeRenderer.ts";
+
+   homeRenderer.setContainer( document.getElementById("div") );
+
+
+
+
+   ```

package/lib/ThreeBase.ts

@@ -6,6 +6,7 @@
  */
 
 import elementResizeEvent from "element-resize-event";
+import { round } from "lodash";
 import { AxesHelper, EventDispatcher, GridHelper, LinearFilter, NoBlending, NormalBlending, Object3D, PerspectiveCamera, RGBAFormat, Scene, Texture, Vector2, Vector3, WebGLRenderer, WebGLRenderTarget } from "three";
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 import { generateUUID } from "three/src/math/MathUtils";
@@ -221,9 +222,17 @@ export default class ThreeBase extends EventDispatcher {
 
     // 获取控制的位置和朝向 保留3位小数
     getLookAt() {
+        const position = this.camera.position.toArray().map(v => round(v, 3));
+        const center = this.controls.target.toArray().map(v => round(v, 3));
+        if (threeUtils.isDev) {
+            console.log(`
+            center: new Vector3(${center.join(",")}),
+            position: new Vector3(${position.join(",")})
+            `);
+        }
         return {
-            position: new Vector3().copy(this.camera.position).multiplyScalar(1000).ceil().divideScalar(1000),
-            center: new Vector3().copy(this.controls.target).multiplyScalar(1000).ceil().divideScalar(1000)
+            position: new Vector3(...position),
+            center: new Vector3(...center)
         }
     }
 

package/lib/threeLoader.ts

@@ -102,7 +102,7 @@ class ThreeLoader extends EventDispatcher {
     // gltf 加载器
     gltfLoader = (() => {
         const loader = new GLTFLoader();
-        const dracoLoader = new class ThreePlusDRACOLoader extends DRACOLoader {
+        const dracoLoader = new class ThreeBaseDRACOLoader extends DRACOLoader {
 
             _loadLibrary(url: string, responseType: string) {
                 //@ts-ignore

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "three-base",
-    "version": "1.0.16",
+    "version": "1.0.18",
     "description": "three 3d three-base",
     "keywords": [
         "three",