three打字啊一个蠕动的圆环三维效果代码
代码语言:html
所属分类:三维
代码描述:three打字啊一个蠕动的圆环三维效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html lang="en"><head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700"); body, html { margin: 0; height: 100vh; } canvas { width: 100%; height: 100%; } h1 { position: absolute; bottom: 1em; left: 0; right: 0; text-align: center; z-index: 1; font-size: 20px; font-family: Raleway, sans-serif; font-weight: normal; } a { color: dodgerblue; } </style> </head> <body> <script type="module"> import * as THREE from "https://unpkg.com/three@0.125.1/build/three.module.js"; import { OrbitControls } from "https://unpkg.com/three@0.125.1/examples/jsm/controls/OrbitControls.js"; import { OutlineEffect } from "https://unpkg.com/three@0.125.1/examples/jsm/effects/OutlineEffect.js"; import { makeNoise4D } from "https://cdn.skypack.dev/open-simplex-noise"; const noise4D = makeNoise4D(Date.now()); class Scene { constructor(sketch, settings) { this.sketch = sketch; this.settings = { ...settings }; this.scene = new THREE.Scene(); this.scene.background = new THREE.Color(0xffffff); // this.scene.fog = new THREE.FogExp2(0x222277, 0.2); return this.scene; }} class Renderer { constructor(sketch, settings) { this.sketch = sketch; this.settings = { ...settings }; this.renderer = new THREE.WebGLRenderer({ antialias: true }); this.renderer.setSize(this.sketch.sizes.width, this.sketch.sizes.height); this.renderer.setPixelRatio(Math.min(2, window.devicePixelRatio)); this.renderer.shadowMap.enabled = true; this.renderer.outputEncoding = THREE.sRGBEncoding; this.renderer.update = this.update.bind(this.sketch); return this.renderer; } update() { this.effect.render(this.scene, this.camera); }} class Camera { constructor(sketch, settings) { this.sketch = sketch; this.settings = { ...settings }; this.camera = new THREE.PerspectiveCamera( 75, this.sketch.sizes.width / this.sketch.sizes.height, 0.01, 500); this.camera.position.x = -0; this.camera.position.y = 0; this.camera.position.z = 3; this.sketch.scene.add(this.camera); return this.camera; }} class Animator { constructor(sketch, settings) { this.sketch = sketch; this.settings = { ...settings }; this.tasks = []; } /** * * @param {function} fn */ add(fn) { this.tasks.push(fn); } animate() { requestAnimationFrame(this.animate.bind(this)); this.tasks.forEach(task => { try { task(); } catch (err) { console.warn(err); } }); this.sketch.renderer.update(); }} class Controls { constructor(sketch, settings) { this.sketch = sketch; this.settings = { ...settings }; this.controls = new OrbitControls( this.sketch.camera, this.sketch.renderer.domElement); return this.controls; }} class Events { constructor(sketch, settings) { this.sketch = sketch; this.settings = { ...settings }; this.addEvents(); } addEvents() { window.addEventListener("resize", this.onWindowResize.bind(this), false); } onWindowResize() { this.sketch.sizes = { width: window.innerWidth, height: window.innerHeight }; this.sketch.camera.aspect = this.sketch.sizes.width / this.sketch.sizes.height; this.sketch.camera.updateProjectionMatrix(); this.sketch.renderer.setSize( this.sketch.sizes.width, this.sketch.sizes.height); this.sketch.renderer.setPixelRatio(Math.min(2, window.devicePixelRatio)); }} class Lights { constructor(sketch, settings) { this.sketch = sketch; this.settings = { ...settings }; this.ambient(); this.directional(3, 5, 3); this.directional(3, 5, -3); } ambient() { let ambLight = new THREE.AmbientLight(0xffffff, 0.2, 100); this.sketch.scene.add(ambLight); } directional(x, y, z) { let dirLight = new THREE.DirectionalLight(0xffffff, 0.6, 100); dirLight.posit.........完整代码请登录后点击上方下载按钮下载查看
网友评论0