threejs 科技地图项目demo

[复制链接]
查看: 903   回复: 7

164

主题

164

帖子

939

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
939
2023-1-27 15:33:33   显示全部楼层   阅读模式  
1.jpg
第一节课b站免费看




效果预览


https://www.xiefansq.cn/threejsP/2023/1/27/


完整源码需要购买邀请码,注册才可以下载:点击购买

解压密码:https://www.xiefansq.cn/

游客,如果您要查看本帖隐藏内容请回复



源码预览

  1. <!DOCTYPE html>
  2. <html lang="en">

  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>地图科技项目</title>
  6.   <style>
  7.     body {
  8.       margin: 0;
  9.       overflow: hidden;
  10.     }

  11.     * {
  12.       margin: 0;
  13.       padding: 0;
  14.     }

  15.     #jindu {
  16.       margin: 0;
  17.     }

  18.     .box {
  19.       width: 500px;
  20.       height: 20px;
  21.       border: 1px solid #979797;
  22.       position: absolute;
  23.       top: 50%;
  24.       left: 50%;
  25.       margin-left: -250px;
  26.       margin-top: -1px;
  27.     }

  28.     .load {

  29.       width: var(--loadWidth);
  30.       height: 20px;
  31.       background: #ffffff;
  32.     }

  33.     .tex {
  34.       color: aliceblue;
  35.       font-size: 30px;
  36.       position: absolute;
  37.       top: 50%;
  38.       left: 50%;
  39.       margin-left: -250px;
  40.       margin-top: 23px;
  41.     }

  42.     .boxBackground {
  43.       /* border-width: 10px; */
  44.       /* border:4px solid rgb(255, 0, 0);   */
  45.       display: block;
  46.       width: 100%;
  47.       height: 100%;
  48.       top: 0;
  49.       left: 0;
  50.       background: #000000;
  51.       position: absolute;


  52.       font-size: 0;
  53.     }

  54.     #load {
  55.       position: absolute;
  56.       top: 10%;
  57.       left: 10%;
  58.       color: white;
  59.     }
  60.     #videoC{
  61.       /* width: 30%;
  62.       height: 30%; */
  63.       /* background: #da0d0d; */
  64.       position: absolute;

  65.     }
  66.   </style>



  67.   <script src="./plugin/vue.global.js"></script>



  68. </head>


  69. <body>
  70.   <script type="text/javascript" src="./build/three.js"></script>
  71.   <script type="text/javascript" src="./plugin/GLTFLoader.js"></script>
  72.   <script type="text/javascript" src="./plugin/DRACOLoader.js"></script>
  73.   <script type="text/javascript" src="./plugin/OrbitControls.js"></script>
  74.   <script src="./plugin/vue.global.js"></script>

  75.   <!--进度条-->



  76.   <div id="jindu">
  77.     <template v-if="display">
  78.       <p class="boxBackground"></p>
  79.       <div class="box">
  80.         <div :style="changeLoad" class="load">
  81.           <!-- <div style=" --loadWidth:305px;" class="load"></div> -->
  82.         </div>
  83.       </div>
  84.       <div class="tex">
  85.         <p>科技地图加载当中</p>
  86.       </div>
  87.     </template>
  88.   </div>
  89.   <canvas id="videoC"  style="height: 100%;width: 100%;pointer-events:none;" ></canvas>
  90.     <!-- <canvas style="height: 100%;width: 100%;background-color: #979797;position: absolute;"></canvas>
  91.     <video id="videoC"  src="./img/video/大健康贴片.mp4" controls ></video>


  92. <script>
  93.     let video = document.createElement("video")
  94.     video.src = "./img/video/大健康贴片.mp4"
  95.     video.loop = true
  96.     video.muted = true
  97.     video.play();
  98.     let canvasHua=document.getElementsByTagName('canvas')
  99.     console.log(canvasHua);
  100. </script> -->



  101.   <script type="module">
  102.     // import { GUI } from './examples/jsm/libs/lil-gui.module.min.js';
  103.     let num = 0; let body_main = null;
  104.     var system = {};
  105.     var p = navigator.platform;
  106.     system.win = p.indexOf("Win") == 0;
  107.     system.mac = p.indexOf("Mac") == 0;

  108.     const UIdata = {//配置对象的属性方法
  109.       data: function () {
  110.         return {
  111.           start: 0,
  112.           jindu: 0,
  113.           display: true
  114.         }
  115.       },
  116.       computed: {
  117.         changeLoad() {
  118.           return '--loadWidth:${this.jindu};'
  119.         }
  120.       },
  121.       methods: {
  122.       }
  123.     }
  124.     var UiJinDuApp = Vue.createApp(UIdata).mount('#jindu')
  125.     // console.log(p);
  126.     // vue APP架构、、、



  127.     const manager = new THREE.LoadingManager();//定义加载跟踪容器
  128.     manager.onStart = function (url, itemsLoaded, itemsTotal) {

  129.     };
  130.     manager.onProgress = function (url, itemsLoaded, itemsTotal) {

  131.     };
  132.     manager.onError = function (url) {

  133.     };
  134.     manager.onLoad = function () {

  135.       console.log('加载成功');
  136.       UiJinDuApp.display = false
  137.       dracoLoader.dispose();

  138.     };
  139.     //onload加载检测器成功的时候会执行下面操作
  140.     /**
  141.     * 创建场景对象Scene
  142.     * Scene包含三维模型和光源
  143.     */
  144.     const dracoLoader = new THREE.DRACOLoader();
  145.     dracoLoader.setDecoderPath('./plugin/draco/');
  146.     dracoLoader.setDecoderConfig({ type: 'js' });
  147.     dracoLoader.setPath('glb/');

  148.     var scene = new THREE.Scene();
  149.     var loader = new THREE.GLTFLoader(manager); //创建一个GLTF加载器


  150.     const renderer = new THREE.WebGLRenderer({ antialias: true});
  151.     renderer.setSize(window.innerWidth, window.innerHeight);
  152.     renderer.outputEncoding = THREE.sRGBEncoding//srg颜色
  153.     renderer.sortObjects=false//定义渲染器是否应对对象进行排序。默认是true. 不再透明度排序,从而修补透明度 显示bug
  154.     //  renderer.toneMappingExposure = 1
  155.     // renderer.antialias = true//开启抗锯齿

  156.     document.body.appendChild(renderer.domElement);

  157.     // renderer.canvas=canvas1
  158.     // canvas.appendChild(renderer.domElement);
  159.     window.addEventListener('resize', onWindowResize);

  160.     function onWindowResize() {

  161.       var SCREEN_WIDTH = window.innerWidth;
  162.       var SCREEN_HEIGHT = window.innerHeight;
  163.       renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
  164.       camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
  165.       camera.updateProjectionMatrix();

  166.     }

  167.     loader.setPath('glb/');
  168.     loader.setDRACOLoader(dracoLoader);


  169.     function addVideoPlane(obj,src,num,sizea,sizeb,loopA,rota){
  170.     let video = document.createElement("video")
  171.     video.src = src
  172.     video.loop = loopA
  173.     video.muted = true
  174.     video.play();
  175.     // let size=50
  176.     let videoTexture = new THREE.VideoTexture(video)
  177.     const material = new THREE.MeshStandardMaterial({
  178.       color: 0xffffff,
  179.       // map:videoTexture,
  180.       alphaMap: videoTexture,
  181.       side: THREE.DoubleSide,
  182.       transparent: true,
  183.       opacity: 1,
  184.       blending: THREE.AdditiveBlending,
  185.       flatShading:true,
  186.       depthTest : false
  187.     });
  188.     const plane = new THREE.Mesh(obj, material);
  189.     // plane.rotation.x = 90 / 180 * Math.PI;
  190.   
  191.     function planeRotation() {
  192.       if(plane){
  193.       plane.rotation.z -= num;
  194.     }
  195.       requestAnimationFrame(planeRotation);

  196.     }
  197.     if(rota){
  198.       planeRotation()
  199.     }
  200.    
  201.     return plane
  202. }

  203.     // 加载环境贴图

  204.     //加载进度检测模块

  205. let biaoji=null
  206.     // 加载glTF资源
  207.     loader.load(
  208.       // resource URL
  209.       '地图1.glb',
  210.       function (gltf) {

  211.         scene.add(gltf.scene);
  212.         body_main = gltf.scene;
  213.         function findMesh(name) {

  214.           var obj = gltf.scene.getObjectByName(name)
  215.           // console.log("抓取到了主体+"+obj.name)
  216.           return (obj)
  217.         }
  218.         // scene.add(  addPlane('./img/video/贴片 1.mp4',0.002,45,45,false,true))
  219.         gltf.scene.traverse(function (child) {
  220.           if(child.name=='标记'){
  221.             biaoji=child
  222.             biaoji.rotation.y=0.3
  223.           }
  224.           if(child.name=='2'){
  225.             // console.log(child);
  226.             let material1 = addVideoPlane(child.geometry, './img/贴图/地图工程.mp4', 0.002, 45, 45, true, true).material
  227.             material1.opacity=0.1
  228.             material1.alphaMap.wrapS = THREE.RepeatWrapping;
  229.             material1.alphaMap.wrapT = THREE.RepeatWrapping;
  230.             material1.alphaMap.repeat.set(0.3,0.2);
  231.             child.material = material1
  232.           }
  233.           if(child.name=='标记_2'){
  234.             // console.log(child.material.name);

  235.             let material1=  addVideoPlane(child.geometry,'./img/贴图/标记贴图.mp4',0.002,45,45,true,true).material
  236.             material1.color=new THREE.Color( 0xffe100 );
  237.             child.material=material1
  238.             // const videoPlane = new THREE.BoxGeometry( 100, 100, 100 );
  239.             // const plane = new THREE.Mesh(videoPlane, material1);
  240.             // scene.add(plane)
  241.           }
  242.           if(child.name=='标记_1'){
  243.             // console.log(child);
  244.             let material1=  addVideoPlane(child.geometry,'./img/贴图/标记贴图.mp4',0.002,45,45,true,true).material
  245.             material1.color=new THREE.Color( 0xffe100 );
  246.             child.material=material1
  247.           }
  248.           if(child.name=='牌子'){
  249.             // console.log(child);
  250.             let material1= addVideoPlane(child.geometry,'./img/贴图/标签.mp4',0.002,45,45,true,true).material
  251.             material1.color=new THREE.Color( 0xffe100 );
  252.             child.material=material1
  253.           }
  254.       
  255.       
  256.         })
  257.         // changeMaterial.a=findMesh('工业处理身体')
  258.       },

  259.       function (xhr) {

  260.         // console.log( ( xhr.loaded / xhr.total * 100 ) + '% 加载进度' );
  261.         UiJinDuApp.jindu = xhr.loaded / xhr.total * 500;
  262.         console.log(UiJinDuApp.jindu);
  263.         //给宽度增加

  264.       },

  265.     );
  266.     //添加视频 贴片
  267. function addPlane(src,num,sizea,sizeb,loopA,rota){
  268.   let video = document.createElement("video")
  269.     video.src = src
  270.     video.loop = loopA
  271.     video.muted = true
  272.     video.play();
  273.     // let size=50
  274.     let videoTexture = new THREE.VideoTexture(video)
  275.     const videoPlane = new THREE.PlaneGeometry(sizea, sizeb);
  276.     const material = new THREE.MeshStandardMaterial({
  277.       color: 0xffffff,
  278.       // map:videoTexture,
  279.       alphaMap: videoTexture,
  280.       side: THREE.DoubleSide,
  281.       transparent: true,
  282.       opacity: 0.95,
  283.       blending: THREE.AdditiveBlending,
  284.       flatShading:true,
  285.       depthTest : false
  286.     });
  287.     const plane = new THREE.Mesh(videoPlane, material);
  288.     plane.rotation.x = 90 / 180 * Math.PI;
  289.   
  290.     function planeRotation() {
  291.       if(plane){
  292.       plane.rotation.z -= num;
  293.     }
  294.       requestAnimationFrame(planeRotation);

  295.     }
  296.     if(rota){
  297.       planeRotation()
  298.     }
  299.    
  300.     return plane
  301. }
  302.     // scene.add(  addPlane('./img/video/贴片 1.mp4',0.002,45,45,false,true))
  303.     // let plane1=addPlane('./img/video/贴片2.mp4',-0.001,55,55,false,true)
  304.     // // let plane3=addPlane('./img/video/大健康贴片.mp4',-0.001,192,108,false,false)
  305.     // plane1.position.y=-2
  306.     // scene.add( plane1 )
  307.     // plane3.rotation.x = 180/ 180 * Math.PI;
  308.     // plane3.rotation.z = 180/ 180 * Math.PI;
  309.     // plane3.rotation.y = 180/ 180 * Math.PI;
  310.     // scene.add( plane3 )
  311.   
  312.    

  313.     var texLoader = new THREE.TextureLoader(manager)
  314.     var format = '.jpg';
  315.     const glassTexPath = "./img/";
  316.     function addMaterial(nam) {
  317.       const tex = texLoader.load(glassTexPath + nam + format);
  318.       tex.flipY = false
  319.       tex.encoding = THREE.sRGBEncoding;
  320.       return (tex)
  321.     }
  322.     var titleHDR = addMaterial("公共hdr1");

  323.     titleHDR.encoding = THREE.sRGBEncoding;
  324.     titleHDR.mapping = THREE.EquirectangularReflectionMapping//专门针对金属反射映射贴图   
  325.     scene.environment = titleHDR
  326.     scene.background = addMaterial("背景2");

  327.     const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 2, 10000);
  328.     camera.position.set(318, 784, 934)
  329.    
  330.   // function lookCamera(){
  331.   //   plane3.lookAt(camera.position)
  332.   //   requestAnimationFrame(lookCamera);
  333.   // }
  334.   // lookCamera()
  335.   
  336.    
  337.     // document.addEventListener( 'mousemove', renderCamera );
  338.     function renderCamera() {
  339.       console.log("相机x+" + camera.position.x + "+相机y" + camera.position.y + "+相机z+" + camera.position.y)
  340.     }

  341.     // camera.lookAt(new THREE.Vector3(0, 0, 0));
  342.     var controls = new THREE.OrbitControls(camera, renderer.domElement)

  343.     controls.target = new THREE.Vector3(0, 20, 0)

  344.     function animate() {

  345.       if (body_main) {
  346.         body_main.rotation.y += 0.001;
  347.       }
  348.       if(biaoji){
  349.         biaoji.rotation.y -= 0.001;
  350.       }
  351.       controls.update();
  352.       requestAnimationFrame(animate);
  353.       renderer.render(scene, camera);
  354.     }
  355.     animate();
  356.   </script>

  357. <!--------------------------------------------------->

  358.   <script type="module">
  359.     var scene = new THREE.Scene();

  360.     function renderSet() {

  361.       let canvas1 =document.getElementById("videoC")
  362.    
  363.       const renderer = new THREE.WebGLRenderer({ antialias: true,canvas:canvas1,alpha:true  });
  364.       renderer.setSize(window.innerWidth, window.innerHeight);
  365.       renderer.outputEncoding = THREE.sRGBEncoding//srg颜色
  366.       renderer.sortObjects = false//定义渲染器是否应对对象进行排序。默认是true. 不再透明度排序,从而修补透明度 显示bug
  367.       
  368.       return renderer

  369.     }
  370.     const camera1 = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 2, 10000);
  371.     camera1.position.set(0, 5, 120)
  372.   

  373.     function addPlane(src, num, sizea, sizeb, loopA, rota) {
  374.       let video = document.createElement("video")
  375.       video.src = src
  376.       video.loop = loopA
  377.       video.muted = true
  378.       video.play();
  379.       // let size=50
  380.       let videoTexture = new THREE.VideoTexture(video)
  381.       const videoPlane = new THREE.PlaneGeometry(sizea, sizeb);
  382.       const material = new THREE.MeshStandardMaterial({
  383.         color: 0xffffff,
  384.         // map:videoTexture,
  385.         alphaMap: videoTexture,
  386.         side: THREE.DoubleSide,
  387.         transparent: true,
  388.         opacity: 0.95,
  389.         blending: THREE.AdditiveBlending,
  390.         flatShading: true,
  391.         depthTest: false
  392.       });
  393.       const plane = new THREE.Mesh(videoPlane, material);
  394.      

  395.       function planeRotation() {
  396.         if (plane) {
  397.           plane.rotation.z -= num;
  398.         }
  399.         requestAnimationFrame(planeRotation);

  400.       }
  401.       if (rota) {
  402.         planeRotation()
  403.       }

  404.       return plane
  405.     }
  406.     let render1 = renderSet()

  407.    
  408.     function onWindowResize() {
  409.       var SCREEN_WIDTH = window.innerWidth;
  410.       var SCREEN_HEIGHT = window.innerHeight;
  411.       render1.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
  412.       camera1.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
  413.       camera1.updateProjectionMatrix();
  414.     }
  415.     window.addEventListener('resize', onWindowResize);
  416.   
  417.     let plane1 = addPlane('./img/贴图/ui.mp4', 0, 192, 108, true, false)
  418.     plane1.rotation.x = 0 / 180 * Math.PI;

  419.     function addMaterial(nam) {
  420.       var texLoader = new THREE.TextureLoader()
  421.     var format = '.jpg';
  422.     const glassTexPath1 = "./img/";
  423.       const tex = texLoader.load(glassTexPath1 + nam + format);
  424.       tex.flipY = false
  425.       tex.encoding = THREE.sRGBEncoding;
  426.       return (tex)
  427.     }
  428.     var titleHDR = addMaterial("公共hdr1");
  429.     titleHDR.encoding = THREE.sRGBEncoding;
  430.     titleHDR.mapping = THREE.EquirectangularReflectionMapping//专门针对金属反射映射贴图   
  431.     scene.environment = titleHDR
  432.     // scene.background = addMaterial("背景2");

  433.     scene.add(plane1)

  434.       // const geometry = new THREE.BoxGeometry(10, 10, 10);
  435.       // const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  436.       // const cube = new THREE.Mesh(geometry, material);
  437.       // scene.add(cube);

  438.     function animate() {
  439.       requestAnimationFrame(animate);
  440.       render1.render(scene, camera1);
  441.     }
  442.     animate();
  443. //  console.log(plane);

  444.   </script>


  445. </body>

  446. </html>
复制代码










回复

使用道具 举报

0

主题

2

帖子

8

积分

新手上路

Rank: 1

积分
8
2023-1-27 18:23:30   显示全部楼层  
可以大幅度上升到三大风
回复

使用道具 举报

0

主题

4

帖子

22

积分

新手上路

Rank: 1

积分
22
2023-2-7 22:57:14   显示全部楼层  
回复

使用道具 举报

0

主题

8

帖子

38

积分

新手上路

Rank: 1

积分
38
2023-3-13 06:20:21   显示全部楼层  
撒旦撒接电话撒娇肯定会尽快撒
回复

使用道具 举报

0

主题

8

帖子

30

积分

新手上路

Rank: 1

积分
30
2023-6-2 17:15:01   显示全部楼层  
33333333333333
回复

使用道具 举报

0

主题

3

帖子

18

积分

新手上路

Rank: 1

积分
18
2023-6-30 13:23:07   显示全部楼层  
学习一下 感谢老师分享
回复

使用道具 举报

0

主题

9

帖子

56

积分

注册会员

Rank: 2

积分
56
2023-8-23 11:25:14   显示全部楼层  
好好学习,天天向上
回复

使用道具 举报

0

主题

7

帖子

46

积分

新手上路

Rank: 1

积分
46
2023-10-15 22:30:20   显示全部楼层  
666666666666666666666
回复

使用道具 举报

您需要登录后才可以回帖   登录 立即注册

高级模式

南通谢凡软件科技有限公司