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", { min: 0, max: 1, label: "Speed" }); } generatePane(); }} class Control { constructor(props) { this.controls = new OrbitControls(props.camera, props.canvas); this.init(); } init() { this.controls.target.set(0, 0, 0); this.controls.rotateSpeed = 0.9; this.controls.enableZoom = true; this.controls.enableDamping = true; this.controls.dampingFactor = 0.02; //this.controls.minPolarAngle = 1.8; //this.controls.maxPolarAngle = 1.8; this.update(); } update() { this.controls.update(); }} class LightBar { constructor(props) { this.geometry(props.scene, props.uid); } geometry(e, i) { const amp = 1; const c_mat = new THREE.MeshLambertMaterial(); const c_geo = new THREE.CapsuleGeometry(0.02, 0.5 + Math.random(), 5, 16); this.c_mes = new THREE.Mesh(c_geo, c_mat); this.c_mes.position.y = -Math.random() * (amp / 2) + Math.random() * (amp / 2); this.c_mes.position.x = -Math.sin(i * 0.3) * Math.PI; this.c_mes.position.z = -Math.cos(i * 0.3) * Math.PI; e.add(this.c_mes); this.light(e, this.c_mes); } light(e, m) { this.p_light = new THREE.PointLight(); this.p_light.position.set(m.position);.........完整代码请登录后点击上方下载按钮下载查看
网友评论0