three+TorusKnot实现三维逼真光线反射效果的玻璃圆柱鱼儿游动动画效果代码
代码语言:html
所属分类:三维
代码描述:three+TorusKnot实现三维逼真光线反射效果的玻璃圆柱鱼儿游动动画效果代码
代码标签: three TorusKnot 三维 逼真 光线 反射 玻璃 圆柱 鱼儿 游动 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> canvas { display: block; width: 100%; height: 100vh; cursor: -webkit-grab; cursor: grab; } </style> </head> <body > <!-- eel and koi --> <script async type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/es-module-shims.1.5.1.js" crossorigin="anonymous"></script> <script type="importmap"> { "imports": { "three": "//repo.bfw.wiki/bfwrepo/js/module/three/build/146/three.module.js", "three/addons/": "//repo.bfw.wiki/bfwrepo/js/module/three/examples/jsm/", "postprocessing": "//repo.bfw.wiki/bfwrepo/js/module/postprocessing.esm.js" } } </script> <script type="module"> import * as THREE from 'three' import { OrbitControls } from 'three/addons/controls/OrbitControls.js' import { TorusKnot } from 'three/addons/curves/CurveExtras.js' import { EffectComposer, EffectPass, RenderPass, GodRaysEffect } from 'postprocessing' // --- // params // --- const TK_RADIUS = 1.0 // torus knot radius const TK_TUBE_RADIUS = 0.3 // torus knot tube (the eel) radius const COIL_TUBE_RADIUS = 0.2 // coil tube (the koi) radius const TK_POINTS_COUNT = 200 // samples count of torus knot curve const TURNS_COUNT = 20.0 // turns count of coil tube const RAY_COLOR = 'cyan' // scattering color (for tyndall effect) // credit: Klara Kulikova at unsplash - https://unsplash.com/photos/4YNmgh2PERc const ALBEDO0_URL = '//repo.bfw.wiki/bfwrepo/image/636d9d021f5a3.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_600,h_400,/quality,q_90' // credit: Max Ducourneau at unsplash - https://unsplash.com/photos/h_4fe8fmb1E const ALBEDO1_URL = '//repo.bfw.wiki/bfwrepo/image/636d9bc4a435d.png' // credit: mrdoob - three.js/examples/textures/ const ENV_URL = '//repo.bfw.wiki/bfwrepo/image/636d9baf40a77.png' // ---- // main // ---- const renderer = new THREE.WebGLRenderer({ powerPreference: 'high-performance', antialias: false, stencil: false, depth: false }) const scene = new THREE.Scene() const camera = new THREE.PerspectiveCamera(75, 2, 0.1, 100) const controls = new OrbitControls(camera, renderer.domElement) camera.position.set(0, 2, 4) controls.target.set(0, 2, 0) controls.enableDamping = true controls.autoRotate = true renderer.shadowMap.enabled = true renderer.toneMapping = THREE.ACESFilmicToneMapping renderer.toneMappingExposure = 1.0 renderer.outputEncoding = THREE.sRGBEncoding scene.background = new THREE.Color('white') new THREE.TextureLoader().load(ENV_URL, (tex) => { tex.mapping = THREE.EquirectangularReflectionMapping tex.encoding = THREE.sRGBEncoding const rt = new THREE.PMREMGenerator(renderer).fromEquirectangular(tex) scene.environment = rt.texture }) const light = new THREE.DirectionalLight() light.position.set(0, 3, 0) light.castShadow = true scene.add(light) scene.add(new THREE.AmbientLight()) const tk = new TorusKnot(TK_RADIUS) // --- // eel // --- function create_eel(tk, tube_radius, points_count) { const origins = tk.getSpacedPoints(points_count - 1) const curve = new THREE.CurvePath() const points = [] for (let i = 0; i <.........完整代码请登录后点击上方下载按钮下载查看
网友评论0