我创建了一个script.s文件,用来创建一个自定义鼠标轨迹。在普通的HTML项目中,我会在标签的末尾输入这个。
<script src="./mouseTrail.js" type="module"></script>
如何在Vue项目中实现相同的结果而不出现错误?
The target environment doesn't support dynamic import() syntax so it's not possible to use external type 'module' within a script
js的内容,内容文件还没有完成,但我认为最重要的是
import {
Polyline,
Renderer,
Transform,
Geometry,
Program,
Mesh,
Vec3,
Vec2,
Color
} from 'https://cdn.jsdelivr.net/npm/ogl@0.0.25/dist/ogl.mjs';
const vertex = `
attribute vec3 position;
attribute vec3 next;
attribute vec3 prev;
attribute vec2 uv;
attribute float side;
uniform vec2 uResolution;
uniform float uDPR;
uniform float uThickness;
vec4 getPosition() {
vec2 aspect = vec2(uResolution.x / uResolution.y, 1);
vec2 nextScreen = next.xy * aspect;
vec2 prevScreen = prev.xy * aspect;
vec2 tangent = normalize(nextScreen - prevScreen);
vec2 normal = vec2(-tangent.y, tangent.x);
normal /= aspect;
normal *= 1.0 - pow(abs(uv.y - 0.5) * 1.9, 2.0);
float pixelWidth = 1.0 / (uResolution.y / uDPR);
normal *= pixelWidth * uThickness;
float dist = length(nextScreen - prevScreen);
normal *= smoothstep(0.0, 0.02, dist);
vec4 current = vec4(position, 1);
current.xy -= normal * side;
return current;
}
void main() {
gl_Position = getPosition();
}
`
1条答案
按热度按时间zdwk9cvp1#
尝试通过npm安装ogl模块,而不是通过http链接获取模块: