这是简单效果-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_64180190/article/details/134347060

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>场景切换示例</title>
<style>
body {
margin: 0;
overflow: hidden;
}
#container {
width: 100%;
height: 100%;
position: absolute;
}
</style>
</head>
<body>
<div id="container"></div>

// 创建相机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 创建渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('container').appendChild(renderer.domElement);

// 创建几何体
var geometry = new THREE.TorusKnotGeometry(1, 0.4, 100, 16);

// 创建材质
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });

// 创建网格对象
var mesh = new THREE.Mesh(geometry, material);

// 将网格对象添加到场景中
scene.add(mesh);

// 创建动画循环
function animate() {
requestAnimationFrame(animate);

// 使几何体旋转起来
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.01;

// 改变几何体的大小
var scale = Math.sin(Date.now() * 0.001) * 0.2 + 1.0;
mesh.scale.set(scale, scale, scale);

// 改变几何体的颜色
var color = new THREE.Color();
color.setHSL((Date.now() * 0.0005) % 1, 1, 0.5);
mesh.material.color = color;

// 渲染场景和相机
renderer.render(scene, camera);
}

// 监听窗口大小变化事件
window.addEventListener('resize', function() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});

// 启动动画循环
animate();

// 场景切换动画
function switchScene() {
var tween = new TWEEN.Tween(mesh.position)
.to({ x: Math.random() * 10 - 5, y: Math.random() * 10 - 5, z: Math.random() * 10 - 5 }, 1000)
.easing(TWEEN.Easing.Quadratic.Out)
.start();
}

// 监听场景切换事件
document.addEventListener('click', switchScene);
</script>
</body>
</html>

结果截图：