代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html>
<head>
<title>办公室场景切换</title>
<meta charset="UTF-8">
<script type="text/javascript" src="libs/statistics.js"></script>
<script type="text/javascript" src="libs/steak.js"></script>
<script type="text/javascript" src="libs/three.js"></script>
<script type="text/javascript" src="libs/OrbitControls.js"></script>
<script type="text/javascript" src="libs/CSS2DRenderer.js"></script>
<script type="text/javascript" src="libs/dat.gui.js"></script>
<script type="text/javascript" src="libs/jquery-1.11.2.min.js"></script>
<script type="text/javascript" charset="UTF-8" src="libs/Tween.min.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
}
.element_title {
width: 25px;
padding: 15px 5px !important;
background: rgba(43, 53, 78, .2);
border-top: 2px solid #d39f51;
border-bottom: 2px solid #d39f51;
border-left: 1px solid rgba(213, 170, 104, .5);
border-right: 1px solid rgba(213, 170, 104, .5);
-webkit-box-shadow: 4px 3px 17px rgb(8 17 39 / 30%);
box-shadow: 4px 3px 17px rgb(8 17 39 / 30%);
}
.title {
font-size: 25px;
color: #fff;
letter-spacing: 3.6px;
line-height: 30px;
layout-flow: vertical-ideographic;
text-align: center;
font-family: HYQuanTangShiJ;
cursor: pointer;
}
.title:hover {
color: #fad194;
}
</style>
</head>
<body>
<div id="dom"></div>
<!-- 顶点着色器的目的是将几何体的每个顶点放置在2D渲染空间上。换句话说，顶点着色器将3D顶点坐标转换为2D画布坐标。 -->
<script id="vertex-shader" type="x-shader/x-vertex">
varying vec2 vUv;
void main() {
vUv = vec2( uv.x, uv.y );
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>
<!-- 片元着色器的代码将应用于几何体的每个可见片元(像素)。片元着色器运行在顶点着色器之后。 -->
<script id="fragment-shader" type="x-shader/x-fragment">
uniform float mixRatio;
uniform sampler2D tDiffuse1;
uniform sampler2D tDiffuse2;
uniform sampler2D tMixTexture;
uniform bool useTexture;
uniform float threshold;
varying vec2 vUv;
void main() {
vec4 texel1 = texture2D( tDiffuse1, vUv );
vec4 texel2 = texture2D( tDiffuse2, vUv );
if (useTexture==true) {
vec4 transitionTexel = texture2D( tMixTexture, vUv );
float r = mixRatio * (1.0 + threshold * 2.0) - threshold;
float mixf=clamp((transitionTexel.r - r)*(1.0/threshold), 0.0, 1.0);
gl_FragColor = mix( texel1, texel2, mixf );
} else {
gl_FragColor = mix( texel2, texel1, mixRatio );
}
}
</script>
<script type="text/javascript">
const el = document.getElementById("dom");
var camera;
var renderer, renderer2;
renderer = new THREE.WebGLRenderer({
antialias: true,
logarithmicDepthBuffer: true,
alpha: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
// 将呈现器的输出添加到HTML元素
el.appendChild(renderer.domElement);
renderer2 = new THREE.CSS2DRenderer();
renderer2.domElement.style.position = 'absolute';
renderer2.domElement.style.top = 0;
renderer2.setSize(window.innerWidth, window.innerHeight);
el.appendChild(renderer2.domElement);
const clock = new THREE.Clock(); //声明一个时钟对象
const textures = []
const loader = new THREE.TextureLoader()
const transitionParams = {
useTexture: true, //为 false 默认采用渐变式
transition: 0,
transitionSpeed: 0.01,
texture: textures[0],
animate: false,
}
function initControls(camera) {
const controls = new THREE.OrbitControls(camera)
// 如果使用animate方法时，将此函数删除
//controls.addEventListener( 'change', render );
// 使动画循环使用时阻尼或自转 意思是否有惯性
controls.enableDamping = true;
//动态阻尼系数 就是鼠标拖拽旋转灵敏度
controls.dampingFactor = 1.55;
//是否可以缩放
controls.enableZoom = true;
//是否自动旋转
controls.autoRotate = true;
controls.autoRotateSpeed = 0.4;
//设置相机距离原点的最远距离
controls.minDistance = 1;
//设置相机距离原点的最远距离
// controls.maxDistance = 500;
//是否开启右键拖拽
controls.enablePan = false
this.controls = controls
return controls
}
function OneScene() {
//camera
this.camera = new THREE.PerspectiveCamera(45, el.offsetWidth / el.offsetHeight, 0.1, 10000)
// camera = this.camera;
// this.camera.position.x = 3000;
// this.camera.position.y = 0;
// this.camera.position.z = 60;
this.camera.position.x = 0;
this.camera.position.y = 2532;
this.camera.position.z = 0;
// Setup scene
this.scene = new THREE.Scene()
var urls = [
'assets/bgImage/skyBox4/posx.jpg',
'assets/bgImage/skyBox4/negx.jpg',
'assets/bgImage/skyBox4/posy.jpg',
'assets/bgImage/skyBox4/negy.jpg',
'assets/bgImage/skyBox4/posz.jpg',
'assets/bgImage/skyBox4/negz.jpg'
];
var cubeLoader = new THREE.CubeTextureLoader();
this.scene.background = cubeLoader.load(urls);
var axes = new THREE.AxisHelper(10000);
// this.scene.add(axes);
// WebGLRenderTarget
const renderTargetParameters = {
minFilter: THREE.LinearFilter,
magFilter: THREE.LinearFilter,
format: THREE.RGBFormat,
stencilBuffer: false
};
this.fbo = new THREE.WebGLRenderTarget(el.offsetWidth, el.offsetHeight, renderTargetParameters)
this.controls = initControls(this.camera)
this.render = function(delta, rtt) {
// console.log(this.camera.position)
if (rtt) {
renderer.setRenderTarget(this.fbo)
renderer.clear()
renderer.render(this.scene, this.camera)
} else {
renderer.setRenderTarget(null)
renderer.render(this.scene, this.camera)
}
renderer2.render(this.scene, this.camera);
this.controls.update()
TWEEN.update();
}
}
const sceneA = new OneScene()
const sceneB = new OneScene()
setTimeout(function() {
var mesh = sceneA.scene.getObjectByName("mesh_a");
new TWEEN.Tween({
y: 2532,
x: 0,
z: 0,
})
.to({
y: 0,
x: 300,
z: 60
}, 2000)
.easing(TWEEN.Easing.Quadratic.Out)
.onUpdate(function() {
// console.log(this.y)
sceneA.camera.position.y = this.y;
sceneA.camera.position.x = this.x;
sceneA.camera.position.z = this.z;
mesh.rotation.y += 0.05;
sceneB.camera.position.y = this.y;
sceneB.camera.position.x = this.x;
sceneB.camera.position.z = this.z;
})
.start();
}, 2000)
function SceneTransition(sceneA, sceneB, transitionParams) {
const that = this
const vertShader = document.getElementById("vertex-shader").innerHTML;
const fragShader = document.getElementById("fragment-shader").innerHTML;
that.scene = new THREE.Scene();
that.camera = new THREE.OrthographicCamera(el.offsetWidth / -2, el.offsetWidth / 2, el.offsetHeight / 2, el
.offsetHeight / -2, -10, 10)
that.quadmaterial = new THREE.ShaderMaterial({
uniforms: {
tDiffuse1: {
value: null
},
tDiffuse2: {
value: null
},
mixRatio: {
value: 0.0
},
threshold: {
value: 0.1
},
useTexture: {
value: true
},
tMixTexture: {
value: transitionParams.texture
}
},
vertexShader: vertShader,
fragmentShader: fragShader,
})
const quadgeometry = new THREE.PlaneBufferGeometry(el.offsetWidth, el.offsetHeight)
that.quad = new THREE.Mesh(quadgeometry, that.quadmaterial)
that.scene.add(that.quad);
that.update = function(sceneA, sceneB, animate) {
that.sceneA = sceneA
that.sceneB = sceneB
that.quadmaterial.uniforms.tDiffuse1.value = that.sceneB.fbo.texture
that.quadmaterial.uniforms.tDiffuse2.value = that.sceneA.fbo.texture
that.quadmaterial.uniforms.mixRatio.value = 0.0
that.quadmaterial.uniforms.threshold.value = 0.1
that.quadmaterial.uniforms.useTexture.value = transitionParams.useTexture
that.quadmaterial.uniforms.tMixTexture.value = transitionParams.texture
transitionParams.animate = animate
transitionParams.transition = 0
}
that.update(sceneA, sceneB, transitionParams.animate)
that.render = function(delta) {
if (transitionParams.transition === 0) {
that.sceneA.render(delta, false)
} else if (transitionParams.transition >= 1) {
that.sceneB.render(delta, false)
transitionParams.animate = false // 停止
} else {
that.sceneA.render(delta, true)
that.sceneB.render(delta, true)
renderer.setRenderTarget(null)
renderer.clear()
renderer.render(that.scene, that.camera)
}
if (transitionParams.animate && transitionParams.transition <= 1) {
transitionParams.transition = transitionParams.transition + transitionParams.transitionSpeed
that.quadmaterial.uniforms.mixRatio.value = transitionParams.transition
}
}
}
function crateElment(id, text, pos) {
const element = document.createElement('div');
element.className = 'element_title';
element.id = id;
const number = document.createElement('div');
number.className = 'title';
number.textContent = text;
element.appendChild(number);
const objectCSS = new THREE.CSS2DObject(element);
objectCSS.position.x = pos.x;
objectCSS.position.y = pos.y;
objectCSS.position.z = pos.z;
return objectCSS;
}
function init() {
//场景A中的物体
const geometryA = new THREE.SphereGeometry(600, 60, 40);
// invert the geometry on the x-axis so that all of the faces point inward
geometryA.scale(-1, 1, 1);
const textureA = new THREE.TextureLoader().load('assets/bgImage/shuziguangnian.png');
const materialA = new THREE.MeshBasicMaterial({
map: textureA
});
const meshA = new THREE.Mesh(geometryA, materialA);
meshA.name = "mesh_a";
sceneA.scene.add(meshA);
const pos1 = new THREE.Vector3(350, 50, 100);
const xqgEle = crateElment("cst", "茶水厅", pos1);
sceneA.scene.add(xqgEle);
const pos2 = new THREE.Vector3(0, 50, -30);
const dsEle = crateElment("jsz", "办公区", pos2);
sceneA.scene.add(dsEle);
// const pos3 = new THREE.Vector3(100, 50, 300);
// const xsEle = crateElment("zcb", "总裁办", pos3);
// sceneA.scene.add(xsEle);
// const pos4 = new THREE.Vector3(-300, 50, -30);
// const tjgEle = crateElment("msz", "美术组", pos4);
// sceneA.scene.add(tjgEle);
// const pos5 = new THREE.Vector3(-300, 50, 300);
// const dmgEle = crateElment("chz", "策划组", pos5);
// sceneA.scene.add(dmgEle);
//场景B中的物体
const geometryB = new THREE.SphereGeometry(600, 60, 40);
// invert the geometry on the x-axis so that all of the faces point inward
geometryB.scale(-1, 1, 1);
const textureB = new THREE.TextureLoader().load('assets/bgImage/shuziguangnian_cst.png');
const materialB = new THREE.MeshBasicMaterial({
map: textureB
});
const meshB = new THREE.Mesh(geometryB, materialB);
sceneB.scene.add(meshB);
const transition = new SceneTransition(sceneA, sceneB, transitionParams)
// 使用GUI调试库
var controls = new function() {
this.下一个场景 = function() {
transitionParams.useTexture = false
transition.update(sceneA, sceneB, true)
}
}
// var gui = new dat.GUI();
// 设置两个变量的取值范围
// gui.add(controls, '下一个场景');
renderScene()
function renderScene() {
transition.render(clock.getDelta())
requestAnimationFrame(renderScene);
}
$('.element_title').click(function() {
switch (this.id) {
case "cst":
transitionParams.useTexture = false
transition.update(sceneA, sceneB, true)
break;
case "jsz":
transitionParams.useTexture = false
transition.update(sceneB, sceneA, true)
break;
case "zcb":
break;
case "msz":
break;
case "chz":
break;
}
})
}
window.onload = init;
// 随着窗体的变化修改场景
function onResize() {
renderer.setSize(window.innerWidth, window.innerHeight);
}
// 监听窗体调整大小事件
window.addEventListener('resize', onResize, false);
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手