three实现三维可调节参数弹性十足的苹果效果代码
代码语言:html
所属分类:三维
代码描述:three实现三维可调节参数弹性十足的苹果效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html, body { padding: 0; margin: 0; } .container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #ffffee; } .page-title { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16vh; width: 100%; text-align: center; user-select: none; pointer-events: none; mix-blend-mode: luminosity; /* color: #DEB887; */ color: lightpink; } .lil-gui { --width: 400px; max-width: 90%; --widget-height: 20px; font-size: 15px; --input-font-size: 15px; --padding: 10px; --spacing: 10px; --slider-knob-width: 5px; --background-color: rgba(5, 0, 15, .8); --widget-color: rgba(255, 255, 255, .3); --focus-color: rgba(255, 255, 255, .4); --hover-color: rgba(255, 255, 255, .5); --font-family: monospace; z-index: 1; } </style> </head> <body translate="no"> <div class="container"> <canvas id="apple-canvas"></canvas> <div class="page-title"> Blobby Apple </div> </div> <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/164/three.module.js", "three/addons/": "//repo.bfw.wiki/bfwrepo/js/module/three/examples/164/jsm/" } } </script> <script type="module"> import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; const containerEl = document.querySelector(".container"); const canvasEl = document.querySelector("#apple-canvas"); let renderer, scene, camera, orbit, lightHolder, mesh; initScene(); window.addEventListener("resize", updateSceneSize); function initScene() { renderer = new THREE.WebGLRenderer({ antialias: true, canvas: canvasEl, alpha: true }); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); renderer.shadowMap.enabled = true; scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(45, containerEl.clientWidth / containerEl.clientHeight, .1, 1000); camera.position.set(0, 1, 2); camera.lookAt(0, 0, 0); updateSceneSize(); const ambientLight = new THREE.AmbientLight(0xffffff, .5); scene.add(ambientLight); const sideLight = new THREE.DirectionalLight(0xffffff, 10); sideLight.position.set(15, 0, 15); lightHolder = new THREE.Group(); lightHolder.add(sideLight); scene.add(lightHolder); orbit = new OrbitControls(camera, canvasEl); orbit.enableZoom = false; orbit.enablePan = false; orbit.enableDamping = true; orbit.autoRotate = true; orbit.autoRotateSpeed = 2; const gltfLoader = new GLTFLoader(); gltfLoader.load( 'https://ksenia-k.com/models/realistic-apple.glb', gltf => { mesh = gltf.scene.children[0]; mesh.castShadow = true; mesh.receiveShadow = true; const material = mesh.material; material.userData.time = { value: 0 }; material.userData.speed = { value: .2 }; material.userData.frequency = { value: .8 }; material.userData.disto.........完整代码请登录后点击上方下载按钮下载查看
网友评论0