Мобильная версияВ настоящее время я скопировал код и вставил его на страницу main.js, и это выдает ошибку.
Неперехваченная ошибка типа: «InfiniteGridHelper» доступна только для чтения
http://127.0.0.1:5000/static/main.js:10
Я также пробовал вставить код на собственную страницу InfiniteGridHelper.js для локального запуска, импортировав код из https://mevedia.com/share/InfiniteGridHelper.js? c, импортировать карты и использовать обычный тег сценария. результаты имеют тенденцию циклически меняться между ошибками, например
Uncaught TypeError: THREE.InfiniteGridHelper не является конструктором
http://127.0.0.1:5000/ static/main.js:142
"Синтаксическая ошибка: объявления импорта могут появляться только на верхнем уровне модуль»
Неперехваченная синтаксическая ошибка: запрошенный модуль «http://127.0.0.1:5000/static/InfiniteGridHelper. js» не предоставляет экспорт с именем: «InfiniteGridHelper»
Uncaught ReferenceError: THREE не определено
http://127.0.0.1:5000/static/InfiniteGridHelper.js:3
Запрос перекрестного происхождения заблокирован: политика одного и того же происхождения запрещает чтение удаленного ресурса по адресу https://mevedia.com/share/InfiniteGridHelper.js?c. (Причина: заголовок CORS «Access-Control-Allow-Origin» отсутствует). Код состояния: 200.
В этой библиотеке есть форум, который, похоже, был заброшен, но похоже, что другим людям удалось заставить его работать. и, похоже, он также работает с Codepen. Я просто не могу найти способ запустить его локально.
Код: Выделить всё
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// Author: Fyrestar https://mevedia.com (https://github.com/Fyrestar/THREE.InfiniteGridHelper)
THREE.InfiniteGridHelper = function InfiniteGridHelper( size1, size2, color, distance, axes = 'xzy' ) {
color = color || new THREE.Color( 'white' );
size1 = size1 || 10;
size2 = size2 || 100;
distance = distance || 8000;
const planeAxes = axes.substr( 0, 2 );
const geometry = new THREE.PlaneBufferGeometry( 2, 2, 1, 1 );
const material = new THREE.ShaderMaterial( {
side: THREE.DoubleSide,
uniforms: {
uSize1: {
value: size1
},
uSize2: {
value: size2
},
uColor: {
value: color
},
uDistance: {
value: distance
}
},
transparent: true,
vertexShader: `
varying vec3 worldPosition;
uniform float uDistance;
void main() {
vec3 pos = position.${axes} * uDistance;
pos.${planeAxes} += cameraPosition.${planeAxes};
worldPosition = pos;
gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
}
`,
fragmentShader: `
varying vec3 worldPosition;
uniform float uSize1;
uniform float uSize2;
uniform vec3 uColor;
uniform float uDistance;
float getGrid(float size) {
vec2 r = worldPosition.${planeAxes} / size;
vec2 grid = abs(fract(r - 0.5) - 0.5) / fwidth(r);
float line = min(grid.x, grid.y);
return 1.0 - min(line, 1.0);
}
void main() {
float d = 1.0 - min(distance(cameraPosition.${planeAxes}, worldPosition.${planeAxes}) / uDistance, 1.0);
float g1 = getGrid(uSize1);
float g2 = getGrid(uSize2);
gl_FragColor = vec4(uColor.rgb, mix(g2, g1, g1) * pow(d, 3.0));
gl_FragColor.a = mix(0.5 * gl_FragColor.a, gl_FragColor.a, g2);
if ( gl_FragColor.a 126 ) {
class InfiniteGridHelper extends THREE.Mesh {
constructor ( size1, size2, color, distance, axes = 'xzy' ) {
color = color || new THREE.Color( 'white' );
size1 = size1 || 10;
size2 = size2 || 100;
distance = distance || 8000;
const planeAxes = axes.substr( 0, 2 );
const geometry = new THREE.PlaneBufferGeometry( 2, 2, 1, 1 );
const material = new THREE.ShaderMaterial( {
side: THREE.DoubleSide,
uniforms: {
uSize1: {
value: size1
},
uSize2: {
value: size2
},
uColor: {
value: color
},
uDistance: {
value: distance
}
},
transparent: true,
vertexShader: `
varying vec3 worldPosition;
uniform float uDistance;
void main() {
vec3 pos = position.${axes} * uDistance;
pos.${planeAxes} += cameraPosition.${planeAxes};
worldPosition = pos;
gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
}
`,
fragmentShader: `
varying vec3 worldPosition;
uniform float uSize1;
uniform float uSize2;
uniform vec3 uColor;
uniform float uDistance;
float getGrid(float size) {
vec2 r = worldPosition.${planeAxes} / size;
vec2 grid = abs(fract(r - 0.5) - 0.5) / fwidth(r);
float line = min(grid.x, grid.y);
return 1.0 - min(line, 1.0);
}
void main() {
float d = 1.0 - min(distance(cameraPosition.${planeAxes}, worldPosition.${planeAxes}) / uDistance, 1.0);
float g1 = getGrid(uSize1);
float g2 = getGrid(uSize2);
gl_FragColor = vec4(uColor.rgb, mix(g2, g1, g1) * pow(d, 3.0));
gl_FragColor.a = mix(0.5 * gl_FragColor.a, gl_FragColor.a, g2);
if ( gl_FragColor.a
Подробнее здесь: [url]https://stackoverflow.com/questions/79146232/how-to-import-three-infinitegridhelper[/url]