threejs 科技地图项目demo

[复制链接]
查看: 2155   回复: 8     教程番外

265

主题

265

帖子

1494

积分

管理员

Rank: 9Rank: 9Rank: 9

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




效果预览


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


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

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

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



源码预览
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>地图科技项目</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }

    * {
      margin: 0;
      padding: 0;
    }

    #jindu {
      margin: 0;
    }

    .box {
      width: 500px;
      height: 20px;
      border: 1px solid #979797;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -250px;
      margin-top: -1px;
    }

    .load {

      width: var(--loadWidth);
      height: 20px;
      background: #ffffff;
    }

    .tex {
      color: aliceblue;
      font-size: 30px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -250px;
      margin-top: 23px;
    }

    .boxBackground {
      /* border-width: 10px; */
      /* border:4px solid rgb(255, 0, 0);   */
      display: block;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: #000000;
      position: absolute;


      font-size: 0;
    }

    #load {
      position: absolute;
      top: 10%;
      left: 10%;
      color: white;
    }
    #videoC{
      /* width: 30%;
      height: 30%; */
      /* background: #da0d0d; */
      position: absolute;

    }
  </style>



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



</head>


<body>
  <script type="text/javascript" src="./build/three.js"></script>
  <script type="text/javascript" src="./plugin/GLTFLoader.js"></script>
  <script type="text/javascript" src="./plugin/DRACOLoader.js"></script>
  <script type="text/javascript" src="./plugin/OrbitControls.js"></script>
  <script src="./plugin/vue.global.js"></script>

  <!--进度条-->



  <div id="jindu">
    <template v-if="display">
      <p class="boxBackground"></p>
      <div class="box">
        <div :style="changeLoad" class="load">
          <!-- <div style=" --loadWidth:305px;" class="load"></div> -->
        </div>
      </div>
      <div class="tex">
        <p>科技地图加载当中</p>
      </div>
    </template>
  </div>
  <canvas id="videoC"  style="height: 100%;width: 100%;pointer-events:none;" ></canvas>
    <!-- <canvas style="height: 100%;width: 100%;background-color: #979797;position: absolute;"></canvas>
    <video id="videoC"  src="./img/video/大健康贴片.mp4" controls ></video>


<script>
    let video = document.createElement("video")
    video.src = "./img/video/大健康贴片.mp4"
    video.loop = true
    video.muted = true
    video.play();
    let canvasHua=document.getElementsByTagName('canvas')
    console.log(canvasHua);
</script> -->



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

    const UIdata = {//配置对象的属性方法
      data: function () {
        return {
          start: 0,
          jindu: 0,
          display: true
        }
      },
      computed: {
        changeLoad() {
          return '--loadWidth{this.jindu};'
        }
      },
      methods: {
      }
    }
    var UiJinDuApp = Vue.createApp(UIdata).mount('#jindu')
    // console.log(p);
    // vue APP架构、、、



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

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

    };
    manager.onError = function (url) {

    };
    manager.onLoad = function () {

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

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

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


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

    document.body.appendChild(renderer.domElement);

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

    function onWindowResize() {

      var SCREEN_WIDTH = window.innerWidth;
      var SCREEN_HEIGHT = window.innerHeight;
      renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
      camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
      camera.updateProjectionMatrix();

    }

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


    function addVideoPlane(obj,src,num,sizea,sizeb,loopA,rota){
    let video = document.createElement("video")
    video.src = src
    video.loop = loopA
    video.muted = true
    video.play();
    // let size=50
    let videoTexture = new THREE.VideoTexture(video)
    const material = new THREE.MeshStandardMaterial({
      color: 0xffffff,
      // map:videoTexture,
      alphaMap: videoTexture,
      side: THREE.DoubleSide,
      transparent: true,
      opacity: 1,
      blending: THREE.AdditiveBlending,
      flatShading:true,
      depthTest : false
    });
    const plane = new THREE.Mesh(obj, material);
    // plane.rotation.x = 90 / 180 * Math.PI;
  
    function planeRotation() {
      if(plane){
      plane.rotation.z -= num;
    }
      requestAnimationFrame(planeRotation);
 
    }
    if(rota){
      planeRotation()
    }
   
    return plane
 }

    // 加载环境贴图

    //加载进度检测模块

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

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

          var obj = gltf.scene.getObjectByName(name)
          // console.log("抓取到了主体+"+obj.name)
          return (obj)
        }
        // scene.add(  addPlane('./img/video/贴片 1.mp4',0.002,45,45,false,true))
        gltf.scene.traverse(function (child) {
          if(child.name=='标记'){
            biaoji=child
            biaoji.rotation.y=0.3
          }
          if(child.name=='2'){
            // console.log(child);
            let material1 = addVideoPlane(child.geometry, './img/贴图/地图工程.mp4', 0.002, 45, 45, true, true).material
            material1.opacity=0.1
            material1.alphaMap.wrapS = THREE.RepeatWrapping;
            material1.alphaMap.wrapT = THREE.RepeatWrapping;
            material1.alphaMap.repeat.set(0.3,0.2);
            child.material = material1
          }
          if(child.name=='标记_2'){
            // console.log(child.material.name);

            let material1=  addVideoPlane(child.geometry,'./img/贴图/标记贴图.mp4',0.002,45,45,true,true).material
            material1.color=new THREE.Color( 0xffe100 );
            child.material=material1
            // const videoPlane = new THREE.BoxGeometry( 100, 100, 100 );
            // const plane = new THREE.Mesh(videoPlane, material1);
            // scene.add(plane)
          }
          if(child.name=='标记_1'){
            // console.log(child);
            let material1=  addVideoPlane(child.geometry,'./img/贴图/标记贴图.mp4',0.002,45,45,true,true).material
            material1.color=new THREE.Color( 0xffe100 );
            child.material=material1
          }
          if(child.name=='牌子'){
            // console.log(child);
            let material1= addVideoPlane(child.geometry,'./img/贴图/标签.mp4',0.002,45,45,true,true).material
            material1.color=new THREE.Color( 0xffe100 );
            child.material=material1
          }
      
      
        })
        // changeMaterial.a=findMesh('工业处理身体')
      },

      function (xhr) {

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

      },

    );
    //添加视频 贴片
 function addPlane(src,num,sizea,sizeb,loopA,rota){
  let video = document.createElement("video")
    video.src = src
    video.loop = loopA
    video.muted = true
    video.play();
    // let size=50
    let videoTexture = new THREE.VideoTexture(video)
    const videoPlane = new THREE.PlaneGeometry(sizea, sizeb);
    const material = new THREE.MeshStandardMaterial({
      color: 0xffffff,
      // map:videoTexture,
      alphaMap: videoTexture,
      side: THREE.DoubleSide,
      transparent: true,
      opacity: 0.95,
      blending: THREE.AdditiveBlending,
      flatShading:true,
      depthTest : false
    });
    const plane = new THREE.Mesh(videoPlane, material);
    plane.rotation.x = 90 / 180 * Math.PI;
  
    function planeRotation() {
      if(plane){
      plane.rotation.z -= num;
    }
      requestAnimationFrame(planeRotation);
 
    }
    if(rota){
      planeRotation()
    }
   
    return plane
 }
    // scene.add(  addPlane('./img/video/贴片 1.mp4',0.002,45,45,false,true))
    // let plane1=addPlane('./img/video/贴片2.mp4',-0.001,55,55,false,true)
    // // let plane3=addPlane('./img/video/大健康贴片.mp4',-0.001,192,108,false,false)
    // plane1.position.y=-2
    // scene.add( plane1 )
    // plane3.rotation.x = 180/ 180 * Math.PI;
    // plane3.rotation.z = 180/ 180 * Math.PI;
    // plane3.rotation.y = 180/ 180 * Math.PI;
    // scene.add( plane3 )
  
   

    var texLoader = new THREE.TextureLoader(manager)
    var format = '.jpg';
    const glassTexPath = "./img/";
    function addMaterial(nam) {
      const tex = texLoader.load(glassTexPath + nam + format);
      tex.flipY = false
      tex.encoding = THREE.sRGBEncoding;
      return (tex)
    }
    var titleHDR = addMaterial("公共hdr1");

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

    const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 2, 10000);
    camera.position.set(318, 784, 934)
    
  // function lookCamera(){
  //   plane3.lookAt(camera.position)
  //   requestAnimationFrame(lookCamera);
  // }
  // lookCamera()
  
   
    // document.addEventListener( 'mousemove', renderCamera );
    function renderCamera() {
      console.log("相机x+" + camera.position.x + "+相机y" + camera.position.y + "+相机z+" + camera.position.y)
    }

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

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

    function animate() {

      if (body_main) {
        body_main.rotation.y += 0.001;
      }
      if(biaoji){
        biaoji.rotation.y -= 0.001;
      }
      controls.update();
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
    }
    animate();
  </script>

<!--------------------------------------------------->

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

    function renderSet() {

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

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

    function addPlane(src, num, sizea, sizeb, loopA, rota) {
      let video = document.createElement("video")
      video.src = src
      video.loop = loopA
      video.muted = true
      video.play();
      // let size=50
      let videoTexture = new THREE.VideoTexture(video)
      const videoPlane = new THREE.PlaneGeometry(sizea, sizeb);
      const material = new THREE.MeshStandardMaterial({
        color: 0xffffff,
        // map:videoTexture,
        alphaMap: videoTexture,
        side: THREE.DoubleSide,
        transparent: true,
        opacity: 0.95,
        blending: THREE.AdditiveBlending,
        flatShading: true,
        depthTest: false
      });
      const plane = new THREE.Mesh(videoPlane, material);
     

      function planeRotation() {
        if (plane) {
          plane.rotation.z -= num;
        }
        requestAnimationFrame(planeRotation);

      }
      if (rota) {
        planeRotation()
      }

      return plane
    }
    let render1 = renderSet()

   
    function onWindowResize() {
      var SCREEN_WIDTH = window.innerWidth;
      var SCREEN_HEIGHT = window.innerHeight;
      render1.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
      camera1.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
      camera1.updateProjectionMatrix();
    }
    window.addEventListener('resize', onWindowResize);
  
    let plane1 = addPlane('./img/贴图/ui.mp4', 0, 192, 108, true, false)
    plane1.rotation.x = 0 / 180 * Math.PI;

    function addMaterial(nam) {
      var texLoader = new THREE.TextureLoader()
    var format = '.jpg';
    const glassTexPath1 = "./img/";
      const tex = texLoader.load(glassTexPath1 + nam + format);
      tex.flipY = false
      tex.encoding = THREE.sRGBEncoding;
      return (tex)
    }
    var titleHDR = addMaterial("公共hdr1");
    titleHDR.encoding = THREE.sRGBEncoding;
    titleHDR.mapping = THREE.EquirectangularReflectionMapping//专门针对金属反射映射贴图    
    scene.environment = titleHDR
    // scene.background = addMaterial("背景2");

    scene.add(plane1)

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

    function animate() {
      requestAnimationFrame(animate);
      render1.render(scene, camera1);
    }
    animate();
//  console.log(plane);

  </script>


</body>

</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

主题

7

帖子

36

积分

新手上路

Rank: 1

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

使用道具 举报

0

主题

8

帖子

30

积分

新手上路

Rank: 1

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

使用道具 举报

0

主题

5

帖子

26

积分

新手上路

Rank: 1

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

使用道具 举报

0

主题

14

帖子

84

积分

注册会员

Rank: 2

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

使用道具 举报

0

主题

7

帖子

46

积分

新手上路

Rank: 1

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

使用道具 举报

0

主题

7

帖子

34

积分

新手上路

Rank: 1

积分
34
2023-12-27 23:43:20   显示全部楼层  
啦啦啦啦啦啦!!!!
回复

使用道具 举报

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

高级模式

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