|
第一节课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>
复制代码
|
|