first commit

kit.js

@@ -0,0 +1,129 @@
+require("three/build/three");
+require("three/examples/js/loaders/GLTFLoader");
+require("three/examples/js/controls/TrackballControls");
+
+// 工具组
+const Kit = {
+  // 添加事件
+  addCaster(renderer, camera, objects, click) {
+    let raycaster, mouse;
+    raycaster = new THREE.Raycaster();
+    mouse = new THREE.Vector2();
+
+    $("#model").bind("click", onDocumentMouseDown, false);
+    $("#model").bind("touchstart", onDocumentMouseDown, false);
+
+    function onDocumentMouseDown(event) {
+      event.preventDefault();
+      try {
+        mouse.x = (event.touches[0].clientX / renderer.domElement.clientWidth) * 2 - 1;
+        mouse.y = -(event.touches[0].clientY / renderer.domElement.clientHeight) * 2 + 1;
+      } catch (err) {
+        mouse.x = (event.clientX / renderer.domElement.clientWidth) * 2 - 1;
+        mouse.y = -(event.clientY / renderer.domElement.clientHeight) * 2 + 1;
+      }
+
+      raycaster.setFromCamera(mouse, camera);
+      const intersects = raycaster.intersectObjects(objects);
+
+      for (let a = 0; a < intersects.length; a++) {
+        click && click(intersects[a]);
+      }
+    }
+  },
+  // gLTF格式模型
+  gLTFModel(options) {
+    const { ele, src, minDistance, maxDistance, rotateSpeed, AmbientLight, DirectionalLight, SpotLight, cameraPosition, setMate, loading, click } = options;
+    const that = this;
+
+    return new Promise(next => {
+      let container, camera, scene, renderer, controls;
+      let { width, height } = document.querySelector(ele).getBoundingClientRect();
+      init();
+      animate();
+
+      function init() {
+        const ambientLight = new THREE.AmbientLight(0xffffff, AmbientLight || 0);
+        const directionalLight = new THREE.DirectionalLight(0xffffff, DirectionalLight || 0);
+        const spotLight = new THREE.SpotLight(0xffffff, SpotLight || 0);
+        const manager = new THREE.LoadingManager();
+
+        container = document.createElement("div");
+        document.querySelector(ele).appendChild(container);
+        camera = new THREE.PerspectiveCamera(2, width / height, 1, 1000);
+        camera.position.z = cameraPosition || 100;
+
+        // scene
+        scene = new THREE.Scene();
+
+        directionalLight.position.set(0, 1, 0);
+        spotLight.position.set(1, 0, 1);
+
+        scene.add(ambientLight);
+        scene.add(directionalLight);
+        camera.add(spotLight);
+        scene.add(camera);
+
+        // model
+        function onProgress(xhr) {
+          if (xhr.lengthComputable) {
+            let percentComplete = (xhr.loaded / xhr.total) * 100;
+            loading && loading(Math.round(percentComplete, 2));
+            console.log("已加载：" + Math.round(percentComplete, 2) + "%");
+          }
+        }
+
+        new THREE.GLTFLoader(manager).load(
+          `${src}.gltf`,
+          function (mod) {
+            const gltf = mod.scene;
+            for (let a = 0; a < gltf.children.length; a++) {
+              gltf.children[a].castShadow = true;
+              gltf.children[a].receiveShadow = true;
+            }
+            setMate(gltf);
+            scene.add(mod.scene);
+            that.addCaster(renderer, camera, gltf.children, click);
+            render();
+            next();
+          },
+          onProgress
+        );
+
+        renderer = new THREE.WebGLRenderer({ alpha: true });
+        // renderer.outputEncoding = THREE.sRGBEncoding;
+        renderer.shadowMap.enabled = true;
+        renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+        renderer.setPixelRatio(window.devicePixelRatio);
+        renderer.setSize(width, height);
+        container.appendChild(renderer.domElement);
+
+        window.addEventListener("resize", onWindowResize, false);
+
+        // controls
+        controls = new THREE.TrackballControls(camera, renderer.domElement);
+        controls.rotateSpeed = rotateSpeed || 0;
+        controls.minDistance = minDistance || 10;
+        controls.maxDistance = maxDistance || 30;
+      }
+
+      function onWindowResize() {
+        camera.aspect = width / height;
+        camera.updateProjectionMatrix();
+
+        renderer.setSize(width, height);
+      }
+
+      function animate() {
+        requestAnimationFrame(animate);
+        controls.update();
+        render();
+      }
+
+      function render() {
+        camera.lookAt(scene.position);
+        renderer.render(scene, camera);
+      }
+    });
+  },
+};