threejs 美术表现之科技大屏代码流

[复制链接]
查看: 1755   回复: 15

138

主题

138

帖子

795

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
795
2023-1-27 00:47:03   显示全部楼层   阅读模式  
1.png


效果预览

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

第一讲b站免费看



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

解压密码: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.     // 加载环境贴图

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


  171.     // 加载glTF资源
  172.     loader.load(
  173.       // resource URL
  174.       'body.glb',
  175.       function (gltf) {

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

  179.           var obj = gltf.scene.getObjectByName(name)
  180.           // console.log("抓取到了主体+"+obj.name)
  181.           return (obj)
  182.         }
  183.         gltf.scene.traverse(function (child) {
  184.           if (child.isMesh) {
  185.             if ((child.material.name == "人体")) {
  186.               child.material.blending = THREE.AdditiveBlending
  187.               child.material.flatShading = false
  188.               child.material.depthTest = false
  189.             }

  190.           }
  191.         })
  192.         // changeMaterial.a=findMesh('工业处理身体')
  193.       },

  194.       function (xhr) {

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

  199.       },

  200.     );
  201.     //添加视频 贴片
  202. function addPlane(src,num,sizea,sizeb,loopA,rota){
  203.   let video = document.createElement("video")
  204.     video.src = src
  205.     video.loop = loopA
  206.     video.muted = true
  207.     video.play();
  208.     // let size=50
  209.     let videoTexture = new THREE.VideoTexture(video)
  210.     const videoPlane = new THREE.PlaneGeometry(sizea, sizeb);
  211.     const material = new THREE.MeshStandardMaterial({
  212.       color: 0xffffff,
  213.       // map:videoTexture,
  214.       alphaMap: videoTexture,
  215.       side: THREE.DoubleSide,
  216.       transparent: true,
  217.       opacity: 0.95,
  218.       blending: THREE.AdditiveBlending,
  219.       flatShading:true,
  220.       depthTest : false
  221.     });
  222.     const plane = new THREE.Mesh(videoPlane, material);
  223.     plane.rotation.x = 90 / 180 * Math.PI;
  224.   
  225.     function planeRotation() {
  226.       if(plane){
  227.       plane.rotation.z -= num;
  228.     }
  229.       requestAnimationFrame(planeRotation);

  230.     }
  231.     if(rota){
  232.       planeRotation()
  233.     }
  234.    
  235.     return plane
  236. }
  237.     scene.add(  addPlane('./img/video/贴片 1.mp4',0.002,45,45,false,true))
  238.     let plane1=addPlane('./img/video/贴片2.mp4',-0.001,55,55,false,true)
  239.     // let plane3=addPlane('./img/video/大健康贴片.mp4',-0.001,192,108,false,false)
  240.     plane1.position.y=-2
  241.     scene.add( plane1 )
  242.     // plane3.rotation.x = 180/ 180 * Math.PI;
  243.     // plane3.rotation.z = 180/ 180 * Math.PI;
  244.     // plane3.rotation.y = 180/ 180 * Math.PI;
  245.     // scene.add( plane3 )
  246.   
  247.    

  248.     var texLoader = new THREE.TextureLoader(manager)
  249.     var format = '.jpg';
  250.     const glassTexPath = "./img/";
  251.     function addMaterial(nam) {
  252.       const tex = texLoader.load(glassTexPath + nam + format);
  253.       tex.flipY = false
  254.       tex.encoding = THREE.sRGBEncoding;
  255.       return (tex)
  256.     }
  257.     var titleHDR = addMaterial("公共hdr1");

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

  262.     const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 2, 10000);
  263.     camera.position.set(-0.5, 29, 116)
  264.    
  265.   // function lookCamera(){
  266.   //   plane3.lookAt(camera.position)
  267.   //   requestAnimationFrame(lookCamera);
  268.   // }
  269.   // lookCamera()
  270.   
  271.    
  272.     // document.addEventListener( 'mousemove', renderCamera );
  273.     function renderCamera() {
  274.       console.log("相机x+" + camera.position.x + "+相机y" + camera.position.y + "+相机z+" + camera.position.y)
  275.     }

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

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

  279.     function animate() {

  280.       if (body_main) {
  281.         body_main.rotation.y += 0.001;
  282.       }
  283.       controls.update();
  284.       requestAnimationFrame(animate);
  285.       renderer.render(scene, camera);
  286.     }
  287.     animate();
  288.   </script>

  289. <!--------------------------------------------------->

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

  292.     function renderSet() {

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

  301.     }
  302.     const camera1 = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 2, 10000);
  303.     camera1.position.set(0, 0, 100)
  304.   

  305.     function addPlane(src, num, sizea, sizeb, loopA, rota) {
  306.       let video = document.createElement("video")
  307.       video.src = src
  308.       video.loop = loopA
  309.       video.muted = true
  310.       video.play();
  311.       // let size=50
  312.       let videoTexture = new THREE.VideoTexture(video)
  313.       const videoPlane = new THREE.PlaneGeometry(sizea, sizeb);
  314.       const material = new THREE.MeshStandardMaterial({
  315.         color: 0xffffff,
  316.         // map:videoTexture,
  317.         alphaMap: videoTexture,
  318.         side: THREE.DoubleSide,
  319.         transparent: true,
  320.         opacity: 0.95,
  321.         blending: THREE.AdditiveBlending,
  322.         flatShading: true,
  323.         depthTest: false
  324.       });
  325.       const plane = new THREE.Mesh(videoPlane, material);
  326.      

  327.       function planeRotation() {
  328.         if (plane) {
  329.           plane.rotation.z -= num;
  330.         }
  331.         requestAnimationFrame(planeRotation);

  332.       }
  333.       if (rota) {
  334.         planeRotation()
  335.       }

  336.       return plane
  337.     }
  338.     let render1 = renderSet()

  339.    
  340.     function onWindowResize() {
  341.       var SCREEN_WIDTH = window.innerWidth;
  342.       var SCREEN_HEIGHT = window.innerHeight;
  343.       render1.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
  344.       camera1.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
  345.       camera1.updateProjectionMatrix();
  346.     }
  347.     window.addEventListener('resize', onWindowResize);
  348.   
  349.     let plane1 = addPlane('./img/video/大健康贴片.mp4', 0, 192, 108, false, false)
  350.     plane1.rotation.x = 0 / 180 * Math.PI;
  351.     plane1.position.y
  352.     function addMaterial(nam) {
  353.       var texLoader = new THREE.TextureLoader()
  354.     var format = '.jpg';
  355.     const glassTexPath1 = "./img/";
  356.       const tex = texLoader.load(glassTexPath1 + nam + format);
  357.       tex.flipY = false
  358.       tex.encoding = THREE.sRGBEncoding;
  359.       return (tex)
  360.     }
  361.     var titleHDR = addMaterial("公共hdr1");
  362.     titleHDR.encoding = THREE.sRGBEncoding;
  363.     titleHDR.mapping = THREE.EquirectangularReflectionMapping//专门针对金属反射映射贴图   
  364.     scene.environment = titleHDR
  365.     // scene.background = addMaterial("背景2");

  366.     scene.add(plane1)

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

  371.     function animate() {
  372.       requestAnimationFrame(animate);
  373.       render1.render(scene, camera1);
  374.     }
  375.     animate();
  376. //  console.log(plane);

  377.   </script>


  378. </body>

  379. </html>
复制代码



回复

使用道具 举报

0

主题

3

帖子

14

积分

新手上路

Rank: 1

积分
14
2023-2-1 11:01:53   显示全部楼层  

回复

使用道具 举报

0

主题

4

帖子

48

积分

新手上路

Rank: 1

积分
48
2023-2-1 13:42:27   显示全部楼层  
报道
回复

使用道具 举报

0

主题

1

帖子

6

积分

新手上路

Rank: 1

积分
6
2023-2-2 11:40:24   显示全部楼层  
:victory::victory::victory::victory:
回复

使用道具 举报

0

主题

4

帖子

22

积分

新手上路

Rank: 1

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

使用道具 举报

0

主题

5

帖子

48

积分

新手上路

Rank: 1

积分
48
2023-2-18 20:26:30   显示全部楼层  
回复

使用道具 举报

0

主题

4

帖子

48

积分

新手上路

Rank: 1

积分
48
2023-2-19 12:08:59   显示全部楼层  
回复

使用道具 举报

0

主题

3

帖子

14

积分

新手上路

Rank: 1

积分
14
2023-3-10 21:37:38   显示全部楼层  
...........
回复

使用道具 举报

0

主题

4

帖子

38

积分

新手上路

Rank: 1

积分
38
2023-3-20 15:01:27   显示全部楼层  
666666666888888888
回复

使用道具 举报

0

主题

8

帖子

38

积分

新手上路

Rank: 1

积分
38
2023-4-30 19:37:18   显示全部楼层  
我先圣诞节奥施康定杰卡斯
回复

使用道具 举报

12下一页
您需要登录后才可以回帖   登录 立即注册

高级模式

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