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

xiefandaren · 2023-1-27 00:47:03

效果预览

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

第一讲b站免费看

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

解压密码：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>
</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);
// 加载环境贴图
//加载进度检测模块
// 加载glTF资源
loader.load(
// resource URL
'body.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)
}
gltf.scene.traverse(function (child) {
if (child.isMesh) {
if ((child.material.name == "人体")) {
child.material.blending = THREE.AdditiveBlending
child.material.flatShading = false
child.material.depthTest = false
}
}
})
// 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(-0.5, 29, 116)
// 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;
}
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, 0, 100)
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/video/大健康贴片.mp4', 0, 192, 108, false, false)
plane1.rotation.x = 0 / 180 * Math.PI;
plane1.position.y
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>

复制代码

eightxiao · 2023-2-1 11:01:53

阿漠斯瓦辛 · 2023-2-1 13:42:27

报道

18844270763 · 2023-2-2 11:40:24

:victory::victory::victory::victory:

liao5202pm · 2023-2-7 22:57:46

yujia3show · 2023-2-18 20:26:30

gaobowei · 2023-2-19 12:08:59

aron · 2023-3-10 21:37:38

...........

Manwei3D · 2023-3-20 15:01:27

666666666888888888