先上效果图：
再上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Niconne&display=swap");
* {
margin: 0;
padding: 0;
}
body {
position: relative;
width: 100vw;
height: 100vh;
background: radial-gradient(circle, #82707a, #24111e 100%);
}
main {
position: relative;
z-index: 1;
}
h1 {
font-family: "Niconne", cursive;
font-size: 10vw;
margin-left: 1rem;
color: rgba(255, 255, 255, 0.2);
}
p {
position: fixed;
bottom: 0;
margin: 10px;
font-size: max(3.3vw, 15px);
color: rgba(255, 255, 255, 0.5);
}
#filter {
}
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
margin: 0;
padding: 0;
z-index: 0;
}
header {
position: fixed;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 0 1% 1%;
width: 100%;
z-index: 3;
height: 7em;
font-family: "Bebas Neue", sans-serif;
font-size: clamp(0.66rem, 2vw, 1rem);
letter-spacing: 0.5em;
}
a{
color: black;
text-decoration: none;
}
</style>
</head>
<body>
<main>
<h1></h1>
<p></p>
</main>
<header>
<div>Animated Sections</div>
<div><a href="https://blog.csdn.net/qq_35241329?type=blog">Original By TiMi先生</a></div>
</header>
<div id="filter"></div>
<script async src="https://ga.jspm.io/npm:es-module-shims@1.6.3/dist/es-module-shims.js" crossorigin="anonymous"></script>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.150.1/build/three.module.js",
"three/addons/": "https://unpkg.com/three@0.150.1/examples/jsm/"
}
}
</script>
</body>
<script type="module">
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { OBJLoader } from "three/addons/loaders/OBJLoader.js";
let container;
let camera, scene, renderer, controls;
let manager;
let object;
let material = new THREE.MeshStandardMaterial({
metalness: 0,
roughness: 0.8,
side: THREE.DoubleSide
});
init();
animate();
function init() {
container = document.createElement("div");
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(
33, //45
window.innerWidth / window.innerHeight,
1,
2000
);
camera.position.y = 150;
camera.position.z = 250;
scene = new THREE.Scene();
const ambientLight = new THREE.AmbientLight(0xffffff, 0.1);
scene.add(ambientLight);
const pointLight = new THREE.PointLight(0xffffff, 0.5);
pointLight.castShadow = true;
camera.add(pointLight);
scene.add(camera);
// manager
function loadModel() {
object.traverse(function (child) {
if (child.isMesh) {
if (child.name == "rose") {
material = material.clone();
material.color.set("crimson");
} else if (child.name == "calyx") {
material = material.clone();
material.color.set("#001a14");
} else if (child.name == "leaf1" || child.name == "leaf2") {
material = material.clone();
material.color.set("#00331b");
}
child.material = material;
}
});
object.rotation.set(0, Math.PI / 1.7, 0);
object.receiveShadow = true;
object.castShadow = true;
scene.add(object);
}
manager = new THREE.LoadingManager(loadModel);
// model
function onProgress(xhr) {
if (xhr.lengthComputable) {
const percentComplete = (xhr.loaded / xhr.total) * 100;
}
}
function onError() {}
const loader = new OBJLoader(manager);
loader.load(
"https://happy358.github.io/Images/Model/red_rose3.obj",
function (obj) {
object = obj;
},
onProgress,
onError
);
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.shadowMap.enabled = true;
container.appendChild(renderer.domElement);
controls = new OrbitControls(camera, renderer.domElement);
controls.autoRotate = true; //true
controls.autoRotateSpeed = 2;
controls.enableDamping = true;
controls.enablePan = false;
controls.minPolarAngle = 0;
controls.maxPolarAngle = Math.PI / 2;
controls.target.set(0, 0, 0);
controls.update();
window.addEventListener("resize", onWindowResize);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame(animate);
controls.update();
render();
}
function render() {
renderer.render(scene, camera);
}
</script>
</html>
最近截的动图好多都大于5M无法上传了，有没有比较好的视频转gif的工具推荐以下。