three实现三维空间跟随鼠标的眼睛效果代码
代码语言:html
所属分类:三维
代码描述:three实现三维空间跟随鼠标的眼睛效果代码,眼睛永远盯着鼠标。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body{ overflow: hidden; margin: 0; } </style> </head> <body translate="no"> <script type="importmap"> { "imports": { "three": "//repo.bfw.wiki/bfwrepo/js/module/three/build/160/three.module.js", "three/addons/": "//repo.bfw.wiki/bfwrepo/js/module/three/examples/160/jsm/" } } </script> <script type="module"> // https://discourse.threejs.org/t/make-only-eyes-move-with-look-at-the-mouse-cursor/61166/2 import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; class EyeBall extends THREE.Mesh { constructor() { let g = new THREE.SphereGeometry(1, 64, 32).rotateX(Math.PI * 0.5); let m = new THREE.MeshLambertMaterial({ onBeforeCompile: shader => { shader.vertexShader = ` varying vec3 vPos; ${shader.vertexShader} `.replace( `#include <begin_vertex>`, `#include <begin_vertex> vPos = position; `); console.log(shader.vertexShader); shader.fragmentShader = ` varying vec3 vPos; ${shader.fragmentShader} `.replace( `vec4 diffuseColor = vec4( diffuse, opacity );`, `vec4 diffuseColor = vec4( diffuse, opacity ); vec3 dir = vec3(0, 0, 1); vec3 nPos = normalize(vPos); float dotProduct = dot(dir, nPos); float iris = smoothstep(0.75, 0.8, dotProduct); diffuseColor.rgb = mix(diffuseColor.rgb, vec3(0, 0, 1), iris); float pupil = smoothstep(0.95, 0.97, dotProduct); diffuseColor.rgb = mix(diffuseColor.rgb, vec3(0), pupil); `); console.log(shader.fragmentShader); } }); super(g, m); }} class Eyes extends THREE.Group { constructor(camera, mouse) { super(); this.camera = camera; this.plane = new THREE.Plane(); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0