three模拟三维场景水面漂浮大黄鸭动画效果代码
代码语言:html
所属分类:三维
代码描述:three模拟三维场景水面漂浮大黄鸭动画效果代码
代码标签: three 模拟 三维 场景 水面 漂浮 大黄鸭 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Lato&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; } *::before, *::after { box-sizing: border-box; } html, body { overscroll-behavior-x: none; overscroll-behavior-y: none; scroll-behavior: smooth; } body { font-family: "Lato", sans-serif; position: relative; width: 100%; max-width: 100vw; height: auto; min-height: 100vh; text-align: center; overflow-x: hidden; background: black; color: gray; } canvas { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; position: fixed; width: 100%; max-width: 100vw; height: auto; min-height: 100vh; top: 0; left: 0; z-index: 0; } main { position: relative; } section { position: relative; width: 100vw; min-height: 100vh; display: grid; place-items: center; } </style> </head> <body translate="no"> <!-- Beach Scene Copyright (c) 2024 by Wakana Y.K. (https://codepen.io/wakana-k/pen/YzoKyev) --> <!-- using three.js --> <main> <section> <div> <p>Loading...</p> </div> </section> </main> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/es-module-shims.1.6.3.js"></script> <script type="importmap"> { "imports": { "three": "//repo.bfw.wiki/bfwrepo/js/module/three/build/160/three.module.js", "three/addons/": "//repo.bfw.wiki/bfwrepo/js/module/three/examples/160/jsm/" } } </script> <script type="module"> /*! Beach Scene Copyright (c) 2024 by Wakana Y.K. (https://codepen.io/wakana-k/pen/YzoKyev) */ "use strict"; console.clear(); import * as THREE from "three"; import { OrbitControls } from "three/addons/controls/OrbitControls.js"; //import * as BufferGeometryUtils from "three/addons/utils/BufferGeometryUtils.js"; import { ParametricGeometry } from "three/addons/geometries/ParametricGeometry.js"; import { Water } from "three/addons/objects/Water2.js"; import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js"; (function () { let camera, scene, renderer, controls; let geometry, material, mesh; let water, duck; var time = 0; const textureLoader = new THREE.TextureLoader(); const GLTF_Loader = new GLTFLoader(); let texture1, texture2, waterTexture1, waterTexture2, envTexture, gltf; loadAssets(); async function loadAssets() { const waterTexturePromise1 = textureLoader.loadAsync( "//repo.bfw.wiki/bfwrepo/threemodel/sea/Water_1_M_Normal.jpg"); const waterTexturePromise2 = textureLoader.loadAsync( "//repo.bfw.wiki/bfwrepo/threemodel/sea/Water_2_M_Normal.jpg"); const texturePromise = textureLoader.loadAsync( "//repo.bfw.wiki/bfwrepo/threemodel/sea/aerial_beach_01_nor_gl_2k.jpg"); const texturePromise1 = textureLoader.loadAsync( "//repo.bfw.wiki/bfwrepo/threemodel/sea/aerial_beach_01_rough_2k.jpg"); const envTexturePromise = textureLoader.loadAsync( "//repo.bfw.wiki/bfwrepo/threemodel/sea/kloofendal_48d_partly_cloudy_puresky_2k.jpg"); const gltfPromise1 = GLTF_Loader.loadAsync( "//repo.bfw.wiki/bfwrepo/threemodel/sea/rubber_duck.gltf"); [ texture1, texture2, waterTexture1, waterTexture2, envTexture, gltf] = await Promise.all([ texturePromise, texturePromise1, waterTexturePromise1, waterTexturePromise2, envTexturePromise, gltfPromise1]); //texture1.center = new THREE.Vector2(0.5, 0.5); //texture1.rotation = Math.PI / 2; texture1.wrapT = THREE.RepeatWrapping; texture1.repeat.y = 1; //texture2.center = new THREE.Vector2(0.5, 0.5); //texture2.rotation = Math.PI / 2; texture2.wrapT = THREE.RepeatWrapping; texture2.repeat.y = 1; init(); obj(); animate(); } function slope(u, v, target) { let a = 2; // 傾斜強度:大きくなるほど傾斜が緩やかになる u = u * 4 - 2; v = v * 2 - 1; let x = v; let y = Math.tan(v) * a; let z = u; return target.set(x, y, z); } function obj() { // water const params = { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0