[{"data":1,"prerenderedAt":67},["ShallowReactive",2],{"article-24":3},{"code":4,"msg":5,"data":6,"count":14},200,"查询成功",{"id":7,"title":8,"keywords":9,"description":10,"category_id":11,"content":12,"body_html":13,"thumb_up":14,"clicks":15,"sort":14,"remark":16,"status":17,"is_open":17,"is_deleted":14,"is_top":14,"is_recommend":14,"create_time":18,"update_time":19,"image_id":20,"url":13,"member_id":14,"cate_name":21,"prev":22,"next":25,"tags":28,"words":38,"read_time":39,"comments":14,"cover":40,"relevant":41},24,"利用three.js在网页嵌入dae类型的3d模型","javascript,three.js,前端,WEB开发","最近项目中用到将3d模型嵌入到web的需求，将整理的代码放到网站上分享",2,"##### 1、主要的html代码\n\n![](https:\u002F\u002Ftp.myong.top\u002Fstorage\u002Fckeditor\u002F20190117\u002F1c0e2e2a11cffa81c2537c519b1934b7.png)\n##### 2、静态样式\n\n``` css3\n\u002F* 模型样式 *\u002F\n#glFullscreen {width: 100%;height: 66%;min-width: 640px;min-height: 360px;position: relative;overflow: hidden;z-index: 0;}\n#glFullscreen canvas {width: 100%;height: 100%;top: 0;left: 0;background-color: #000000; }\n\u002F* 模型控制按钮样式 *\u002F\n#button{z-index: 100;position: absolute;bottom: 33%;right: 5px;cursor: pointer;}\n#button  .button {background: #1b4f63;width: 50px;border-radius: 3px;margin: 5px;float: left;}\n#button  .button p{font-family: 'Roboto'; text-align: center;text-transform: uppercase;font-size: 14px;color: #FFF;user-select: none;line-height: 16px;padding: 5px 0;margin: 0;}\n#button  .button p:hover{cursor: pointer;}\n#button  .button p:after{content: \"\";display: block;width: 100%;border-radius: 50%;background-color: darken(#f1c40f, 20%);opacity: 0.4;}\n```\n##### 2、Javascript代码讲解\n\n###### a、获取dom对象方法\n\n``` javaScript\n\u002F\u002F获取dom对象\nfunction getDom(){\n    container = document.getElementById('glFullscreen');\n }\n```\n\n###### b、模型加载方法\n\n``` javaScript\n\u002F\u002F模型加载\nfunction initLoader(){\n    var loader = new THREE.ColladaLoader();\n    loader.load('model\u002Fdemo.DAE', function(collada){\n        dae = collada.scene;\n        dae.traverse(function(child){\n            if (child instanceof THREE.Mesh) {\n                child.material.flatShading = true;\n            }\n         });\n         \u002F\u002F设置模型的位置\n         dae.position.x = 4.1;\n         dae.position.y = 8;\n         dae.position.z = 1.8;\n         \u002F\u002F调整模型的大小\n         dae.scale.x = dae.scale.y = dae.scale.z = 0.05;\n         dae.updateMatrix();\n         kinematics = collada.kinematics;\n         scene.add(dae);\n         setupTween();\n    }); \n}\n```\n###### c、创建相机方法\n\n``` javaScript\n\u002F\u002F创建相机\nfunction createCamera(posX, posY, posZ){\n   camera = new THREE.PerspectiveCamera( 45, 1, 0.1, 10000 );\n   camera.position.copy(new THREE.Vector3( 20, 10, 30 ));\n   camera.lookAt( new THREE.Vector3( 0, 5, 0) );\n   \u002F\u002Fcamera.position.set( posX, posY, posZ );\n}\n```\n\n###### d、模型控制方法\n\n``` javaScript\n\u002F\u002F轨迹控制 鼠标按下左右移动， 滚轮远近\nfunction initControl(){\n    controls = new THREE.OrbitControls( camera, renderer.domElement );\n    \u002F\u002F 如果使用animate方法时，将此函数删除\n    \u002F\u002Fcontrols.addEventListener( 'change', render );\n    \u002F\u002F 使动画循环使用时阻尼或自转 意思是否有惯性\n    controls.enableDamping = true;\n    \u002F\u002F动态阻尼系数 就是鼠标拖拽旋转灵敏度\n    \u002F\u002Fcontrols.dampingFactor = 0.25;\n    \u002F\u002F是否可以缩放\n    controls.enableZoom = true;\n    \u002F\u002F是否自动旋转\n    controls.autoRotate = true;\n    controls.autoRotateSpeed = 0.5;\n    \u002F\u002F设置相机距离原点的最远距离\n    controls.minDistance = 10;\n    \u002F\u002F设置相机距离原点的最远距离\n    controls.maxDistance = 600;\n    \u002F\u002F是否开启右键拖拽\n    controls.enablePan = false;\n}\n```\n###### e、初始化场景\n\n``` javaScript\n\u002F\u002F初始场景\nfunction initScene(){\n    scene = new THREE.Scene();\n}\n```\n\n###### f、创建网格\n\n``` javaScript\n\u002F\u002F创建网格\nfunction createGrid(){\n    var grid = new THREE.GridHelper( 20, 20 );\n    scene.add( grid );\n}\n```\n###### g、设置光照\n\n``` javaScript\n\u002F\u002F设置光照\nfunction setLight(){\n    particleLight = new THREE.Mesh( new THREE.SphereGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) );              \n    var light = new THREE.HemisphereLight( 0xffeeee, 0x111122 );\n    var pointLight = new THREE.PointLight( 0xffffff, 0.3 );\n    \u002F\u002Fscene.add( particleLight );\n    scene.add( light );\n    \u002F\u002FparticleLight.add( pointLight );\n}\n```\n###### h、创建渲染器\n\n``` javaScript\n\u002F\u002F创建webglr层\nfunction initRenderer(){\n    var params = {\n         antialias:true\n     };\n     renderer = new THREE.WebGLRenderer(params);\n     renderer.setPixelRatio( window.devicePixelRatio );\n     renderer.setSize( window.innerWidth, window.innerHeight );\n     renderer.setClearColor( 0x103f51 );\n     container.appendChild( renderer.domElement );\n}\n```\n\n###### i、创建性能监视器\n\n``` javaScript\n\u002F\u002F创建监视器\nfunction createStats(){\n    stats = new Stats();\n    \u002F\u002Fcontainer.appendChild( stats.dom );\n}\n```\n###### j、模型动作解析\n\n``` javaScript\n\u002F\u002F模型动画\nfunction setupTween() {\n    var duration = THREE.Math.randInt( 1000, 5000 );\n    var target = {};\n    for ( var prop in kinematics.joints ) {\n        if ( kinematics.joints.hasOwnProperty( prop ) ) {\n            if ( ! kinematics.joints[ prop ].static ) {\n                var joint = kinematics.joints[ prop ];\n                var old = tweenParameters[ prop ];\n                var position = old ? old : joint.zeroPosition;\n                tweenParameters[ prop ] = position;\n                target[ prop ] = THREE.Math.randInt( joint.limits.min, joint.limits.max )\n             }\n         }\n     }\n     kinematicsTween = new TWEEN.Tween( tweenParameters ).to( target, duration ).easing( TWEEN.Easing.Quadratic.Out );\n     kinematicsTween.onUpdate( function() {\n         for ( var prop in kinematics.joints ) {\n             if ( kinematics.joints.hasOwnProperty( prop ) ) {\n                    if ( ! kinematics.joints[ prop ].static ) {\n                        kinematics.setJointValue( prop, this[ prop ] );\n                    }\n                }\n            }\n        } );\n        kinematicsTween.start();\n        setTimeout( setupTween, duration );\n    }\n```\n###### k、模型动画\n\n``` javaScript\nfunction animate() {\n    \u002F*requestAnimationFrame( animate );\n    render();\n    stats.update();\n    TWEEN.update();*\u002F\n    stats.update();\n    TWEEN.update();\n    controls.update();\n    renderer.render(scene, camera);\n}\n```\n\n###### l、使模型旋转\n\n``` javaScript\nfunction render() {\n    var timer = Date.now() * 0.0001;\n    camera.lookAt( new THREE.Vector3( 0, 5, 0) );\n    particleLight.position.x = Math.sin( timer * 4 ) * 3009;\n    particleLight.position.y = Math.cos( timer * 5 ) * 4000;\n    particleLight.position.z = Math.cos( timer * 4 ) * 3009;\n    \u002F\u002F更新控制器\n    controls.update();\n    renderer.render( scene, camera );\n}\n```\n\n###### m、窗口大小监听\n\n``` javaScript\nwindow.addEventListener( 'resize', onWindowResize, false );\nfunction onWindowResize() {\n    \u002F\u002Fcamera.aspect = container.clientWidth \u002F container.clientHeight;\n    camera.updateProjectionMatrix();\n    renderer.setSize( window.innerWidth, window.innerHeight );\n}\n```\n###### n、按钮控制模型\n\n``` javaScript\nfunction resetObj(){\n    \u002F\u002F是否自动旋转\n    controls.autoRotate = true;\n    camera.position.copy(new THREE.Vector3( 20, 10, 30 ));\n    \u002F\u002Fanimate();\n }\n function frontObj(){\n     \u002F\u002F是否自动旋转\n    controls.autoRotate = false;\n    camera.position.copy(new THREE.Vector3( 0.0, 10, 20.0 ));\n    \u002F\u002FcreateCamera(20, 10, 50); \n    \u002F\u002Fanimate();\n }\n function backObj(){\n     \u002F\u002F是否自动旋转\n     controls.autoRotate = false;\n     camera.position.copy(new THREE.Vector3( 0.0, 10, -20.0 ));\n     \u002F\u002Fanimate();\n}\nfunction threeStart(){\n    initLoader();\n    getDom();\n    createCamera(20, 10,30); \n    initScene();\n    createGrid();\n    setLight();\n    initRenderer();\n    initControl();\n    createStats();\n    \u002F\u002FsetupTween();\n    \u002F\u002Fanimate();\n    setInterval(animate, parseInt(1000 \u002F frameCount));              \n}\nthreeStart();\n```\n",null,0,497,"",1,"2019-01-17 22:55:13","2026-04-19 15:14:41",134,"PHP",{"id":23,"title":24},23,"JavaScript常见算法排序之冒泡排序",{"id":26,"title":27},25,"JavaScript自定义滚动条",[29,32,35],{"id":30,"name":31},42,"前端",{"id":33,"name":34},43,"Javascript",{"id":36,"name":37},46,"three.js",4191,10,"https:\u002F\u002Ftp.myong.top\u002Fstorage\u002Farticle\u002F41\u002F9b90b419601d3b7855b4df7be19c5e.jpg",[42,47,52,57,62],{"id":43,"title":44,"create_time":45,"description":46},93,"PHP执行Python脚本解压，压缩文件夹操作","2020-08-06 14:59:05","PHP是有解压缩类文件的，但在实际项目中，用户方使用Python脚本压缩，很容易出现中文解压乱码，导致文件内容丢失的情况，本文主要介绍PHP执行Python脚本解压缩出现的问题以及解决方法",{"id":48,"title":49,"create_time":50,"description":51},92,"PHP对图片的处理","2020-07-30 15:53:38","图片处理函数功能：缩放、剪切、相框、水印、锐化、旋转、翻转、透明度、反色处理并保存历史记录的思路：当有图片有改动时自动生成一张新图片",{"id":53,"title":54,"create_time":55,"description":56},96,"PHP中字符串跟0做比较永远是true","2021-02-04 16:16:27","最近在项目中做数据对比的功能，发现一个特殊的情况，0跟任何字符串做比较永远返回true，特意了解了一下。",{"id":58,"title":59,"create_time":60,"description":61},13,"Win系统下配置PHP链接Oracle","2019-01-17 22:23:36","该文章内容主要介绍window系统下，php连接oracle的配置。",{"id":63,"title":64,"create_time":65,"description":66},103,"面向对象三大特性五大原则 + 低耦合高内聚[转载]","2021-10-31 23:18:58","面向对象的三大特性是\"封装、\"多态\"、\"继承\"，五大原则是\"单一职责原则\"、\"开放封闭原则\"、\"里氏替换原则\"、\"依赖倒置原则\"、\"接口分离原则\"。",1783431670011]