Threejs_纹理

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>贴图</title><style>body {margin: 0;overflow: hidden;/* 隐藏body窗口区域滚动条 */}</style><!--引入three.js三维引擎--><script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script><script src="http://127.0.0.1:8080/three.js-master/examples/js/controls/OrbitControls.js"></script><!-- <script src="http://127.0.0.1:8080/three.js-master/build/three.js"></script> --><!-- <script src="./three.js-master/build/three.js"></script> --><!-- <script src="./three.js"></script> --><!-- <script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script> -->
</head>
<div id="myapp"></div><body><script>//1 舞台var scene = new THREE.Scene();//1.1摄像头camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 1, 1000);//1.2设置渲染器render = new THREE.WebGLRenderer({antialias: true//抗锯齿});//1.2.1设置像素render.setPixelRatio(window.devicePixelRatio);//1.2.2设置尺寸render.setSize(window.innerWidth, window.innerHeight)/****///1.3设置html名称var app = document.getElementById("myapp");app.appendChild(render.domElement);//渲染器放入规定位置//2 设置载体 let video = document.createElement('video'); //创建video对象video.src = "../img/021.mp4"; // 视频-地址video.autoplay = "autoplay"; //设置-播放video.loop = "loop";  //循环-播放var geometry = new THREE.PlaneGeometry(30, 20, 30); //平面//var geometry = new THREE.PlaneGeometry(20, 20, 32); //平面//2.14质地var textureLoader = new THREE.TextureLoader(); // 纹理加载器var texture = new THREE.VideoTexture(video);  //视频当作贴图<!-- var texture = textureLoader.load('./img/factory3.jpg');  -->//var texture = textureLoader.load('./img/tree.png'); //var texture = textureLoader.load('./img/Earth.png'); // 纹理模式：默认-ClampToEdgeWrapping(夹边包裹)  RepeatWrapping：阵列  镜像阵列：MirroredRepeatWrappingtexture.wrapS = THREE.RepeatWrapping;//质地.包裹texture.wrapT = THREE.RepeatWrapping;// u+v方向纹理重复数量texture.repeat.set(1,1);//质地重复<!-- var material = new THREE.MeshLambertMaterial({ --><!-- color: 0x00ff00, --><!-- }); -->//2.2素材、物质的var material = new THREE.MeshBasicMaterial({map: texture, // 贴图color: 0x00ff00,side: THREE.DoubleSide});//2. 网格化、啮合化=几何+素材var plane = new THREE.Mesh(geometry, material);scene.add(plane);//加到场景内//3 相机camera.position.set(20, 30, 40); //设置相机位置camera.lookAt(new THREE.Vector3(0, 0, 0))/*********///4  动画 自我调用//4.1 函数动画function animate(){<!-- texture.offset.x -= 0.006//数越大越快 -->render.render(scene, camera);window.requestAnimationFrame(animate);}//4.2 调用函数animate();
</script></body>
</html>

Threejs_纹理_视频相关推荐

软件_视频rtmp,rmvb,h265区别
原创博客地址: 软件_视频rtmp,rmvb,h265区别 h265,h264 视频压缩算法,原始视频是图片流,意味着[[r,g,b],[r,g,b],,]等等,极其占用空间,所以这种数据只能出现内存 ...
摄像机服务器端返回消息错误,_平安城市_视频监控（本科）毕业论文设计.doc
_平安城市_视频监控(本科)毕业论文设计摘要随着城市经济的高速发展,城市治安管理面临的压力也越来越大,传统的以人力防范和事后处理为主的公安管理模式已经开始制约城市治安管理水平的进一步提高.城市公安 ...
综合评价模型的缺点_视频/图像质量评价综述(一)
1. 概述视频/图像质量评价(Video/Image Quality Assessment)是指通过主客观的方式对两幅主体内容相同的图像信息的变化与失真进行感知.衡量与评价. 视频/图像质量评价包括 ...
python 视频转场_视频剪辑什么鬼?Python 带你高效创作短视频
近两年,抖音.快手将短视频推到风口浪尖上,要生产出高质量的视频,离不开视频剪辑这一环节:在全民剪片浪潮中,大众使用最多的剪辑软件如:Pr.FCPX.剪印.Vue 等. 视频剪辑过程中,Python 一 ...
python视频编辑过场动画_视频剪辑什么鬼？Python 带你高效创作短视频
点击上方" AirPython ",选择"置顶公众号" 第一时间获取 Python 技术干货! 阅读文本大概需要 10 分钟. 近两年,抖音.快手将短视频推到风 ...
深度学习用于视频检测_视频如何用于检测您的个性？
深度学习用于视频检测视频是新的第一印象! (Videos are the New First Impressions!) Think about the approximate number of ...
python3.7下载教程视频_视频 | 我选择Python3.7来学习！顺便把教程分享给大家
原标题:视频 | 我选择Python3.7来学习!顺便把教程分享给大家 [文章正文] Python 3.7增添了众多新的类,可用于数据处理.针对脚本编译和垃圾收集的优化以及更快的异步I/O. Pyth ...
图像sobel梯度详细计算过程_视频处理之Sobel【附源码】
边缘检测是检测图像中的一些像素点,它们周围的像素点的灰度发生了急剧的变化,我们认为在这过程中,图像中的物体不同导致了这一变化,因此可以将这些像素点作为一个集合,可以用来标注图像中不同物体的边界.边缘区 ...
python视频车流量计数_视频访问量实时统计项目学习
(一)效果图先来两个效果图看看图1 图2 #coding=UTF-8 import random import time url_paths = [ // "/www/2", ...
python 视频剪辑_视频剪辑太麻烦？用Python带你高效创作短视频
近两年,抖音.快手将短视频推到风口浪尖上,要生产出高质量的视频,离不开视频剪辑这一环节:在全民剪片浪潮中,大众使用最多的剪辑软件如:Pr.FCPX.剪印.Vue 等.视频剪辑过程中,Python 一些 ...

Threejs_纹理_视频

Threejs_纹理_视频相关推荐

最新文章

热门文章