three实现带反射折射大理石三维材质立方体动画效果代码
代码语言:html
所属分类:三维
代码描述:three实现带反射折射大理石三维材质立方体动画效果代码
代码标签: three 反射 折射 大理石 三维 材质 立方体
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tweakpane.3.02.js"></script> <style> body { margin: 0; } canvas { z-index: -1; top: 0; display: block; width: 100%; height: 100%; position: fixed; } .footer { right: 2rem; bottom: 2rem; position: absolute; } .footer img { width: 2.5rem; transition: opacity 0.5s; } .footer img:hover { opacity: 0.5; } </style> </head> <body > <canvas></canvas> <script type="module"> import * as THREE from "https://cdn.skypack.dev/three@0.140.0/build/three.module"; import { OrbitControls } from "https://threejsfundamentals.org/threejs/resources/threejs/r132/examples/jsm/controls/OrbitControls.js"; import { RoundedBoxGeometry } from "https://threejsfundamentals.org/threejs/resources/threejs/r132/examples/jsm/geometries/RoundedBoxGeometry.js"; import { Reflector } from "https://threejsfundamentals.org/threejs/resources/threejs/r132/examples/jsm/objects/Reflector.js"; const texture = { matcap: "https://images.unsplash.com/photo-1626908013943-df94de54984c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2673&q=80", skin: "https://images.unsplash.com/photo-1560780552-ba54683cb263?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80", env: "https://images.unsplash.com/photo-1536566482680-fca31930a0bd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80" }; const config = { scene: { speed: 0.2 }, object: { speed: 0 } }; class Panel { constructor() { this.init(); } init() { function generatePane() { const pn = new Tweakpane.Pane({ title: "Panel" }); const sn = pn.addFolder({ title: "Scene" }); sn.addInput(config.scene, "speed", { min: 0, max: 1, label: "Speed" }); const ob = pn.addFolder({ title: "Object" }); ob.addInput(config.object, "speed", { m.........完整代码请登录后点击上方下载按钮下载查看
网友评论0