风机案例代码讲解

1_wind/index.html

@@ -188,34 +188,60 @@
       let nowLabelData = null
       let labelCSS2D = null
 
+      var scene = null
+      var camera = null
+      var renderer = null
+      let labelRenderer = null
 
-      //创建场景对象
-      var scene = new THREE.Scene()
-      //创建相机
-      var camera = createdCamera(30, size.w, size.h, [-4, -3.5, 4], 1)
-      //创建光源
-      createdLight()
-      //创建渲染器
-      var renderer = createdRender()
-      //信息窗2D渲染器
-      let labelRenderer = createTurbineLabel()
-      
-      // 辅助坐标系 参数250表示坐标系大小，可以根据场景大小去设置
-      // var axesHelper = new THREE.AxesHelper(250)
-      // scene.add(axesHelper)
-
-      //加载地板
-      loadPlane()
-      //加载内部结构
-      loadEquipment()
-      //加载外壳涡轮
-      loadTurbine()
-      
+      //基本组件准备
+      initBaseElement()
+      //导入模型
+      loadModel()
       //执行渲染
-      render()
-      //鼠标操作
-      mouseMove()
+      run()
 
+      /*
+      *基本组件准备（场景、相机、渲染器、灯光）
+      */
+      function initBaseElement(){
+        //创建场景对象【场景：是一个容器，主要用于保存、跟踪所要渲染的物体和使用的光源】
+        scene = new THREE.Scene()
+        //创建相机【摄像机：决定了能够在场景中看到什么】
+        camera = createdCamera(30, size.w, size.h, [-4, -3.5, 4], 1)
+        //创建光源
+        createdLight()
+        //创建渲染器【渲染器：会基于摄像机的角度来计算场景对象在浏览器中会渲染成什么样子】
+        renderer = createdRender()
+      }
+
+      /*
+      *导入模型及渲染元素（地板、风机内部结构、风机外部涡轮）
+      */
+      function loadModel(){
+        //加载地板
+        loadPlane()
+        //加载内部结构
+        loadEquipment()
+        //加载外壳涡轮
+        loadTurbine()
+        //2D信息窗注入3D场景
+        labelRenderer = createTurbineLabel()
+      }
+
+      /*
+      *执行（执行渲染、鼠标操作）
+      */
+      function run(){
+        // //辅助坐标系 参数250表示坐标系大小，可以根据场景大小去设置
+        // var axesHelper = new THREE.AxesHelper(250)
+        // scene.add(axesHelper)
+        //执行渲染
+        render()
+        //鼠标操作
+        mouseMove()
+        //浏览器窗口监听，实现场景的自适应
+        window.addEventListener('resize',onWindowResize,false)
+      }
 
       /*
       *创建相机
@@ -388,10 +414,6 @@
         scene.add(labelCSS2D);
         labelCSS2D.visible = false
         return labelRenderer
-        // labelCSS2D.element.addEventListener('click',()=>{
-        //   consoe.log("dianji")
-        //   labelCSS2D.visible = false
-        // })
       }
 
       //更新信息窗位置
@@ -450,7 +472,6 @@
       /*
       *三维场景自适应
       */
-      window.addEventListener('resize',onWindowResize,false)
       function onWindowResize(){
         camera.aspect = window.innerWidth/window.innerHeight
         camera.updateProjectionMatrix()