diff --git a/1_wind/index.html b/1_wind/index.html index fc7b79b..02cc7a4 100644 --- a/1_wind/index.html +++ b/1_wind/index.html @@ -188,34 +188,60 @@ let nowLabelData = null let labelCSS2D = 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) + var scene = null + var camera = null + var renderer = null + let labelRenderer = null - //加载地板 - 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()