Мой файл glb не отображается в моем мире thee.js. Я следовал всей документации и руководствам, но ничего не работает. мир загружается, и все работает нормально, просто мод не появляется. Пожалуйста, помогите мне, я собираюсь создать игру, полностью написанную на html/js, и у меня приличный опыт работы с js. Пожалуйста, сохраняйте код как можно более оригинальным и удачи. Я использовал переполнение стека только один раз, поэтому извините, если это плохое описание. Этот файл находится в той же папке, что и файл кода. Я знаю, что это длинный фрагмент кода, но я хотел убедиться, что вы можете видеть весь код, если это нечто большее, чем просто мой импорт. Я не знаю, что еще сказать, так что извините, я просто немного задержался. Если вы можете, пожалуйста, объясните разными простыми словами, что было не так и как вы это исправили. Мне приходится продолжать тормозить, потому что кода слишком много. Я не знаю, как долго мне придется продолжать это печатать. Еще раз извините за задержку, я просто не могу это подробно описать. Я действительно полагаюсь на переполнение стека и буду рад, если вы мне поможете.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8" />
<title>My first three.js app</title>
<style>
body { margin: 0; }
#info {
position: absolute;
top: 10px;
width: 100%;
text-align: center;
z-index: 100;
display:block;
}
</style>
<script src = "https://threejs.org/build/three.js"></script>
<script type = "importmap">
{
"imports": {
"three": "https://unpkg.com/[email protected]/build/three.module.js",
"three/addons/": "https://unpkg.com/[email protected]/examples/jsm/",
"cannon-es": "https://cdn.jsdelivr.net/npm/[email protected]/dist/cannon-es.min.js"
}
}
</script>
</head>
<body>
<div id = "info">0</div>
<script type = "module">
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { Clock } from "three";
import { PointerLockControls } from "three/addons/controls/PointerLockControls.js";
import * as CANNON from "cannon-es";
import { OBJLoader } from "three/addons/loaders/OBJLoader.js";
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
const score = document.getElementById("info");
let points = 0;
let colide = false;
let checkK = false;
let Name;
let boddy;
const clock = new Clock();
const world = new CANNON.World();
world.gravity.set(0, -9.82, 0);
const loader = new GLTFLoader();
const physicsMaterial = new CANNON.Material();
const physicsContactMaterial = new CANNON.ContactMaterial(
physicsMaterial,
physicsMaterial,
{ friction: 0.4, restitution: 0.0 }
);
world.addContactMaterial(physicsContactMaterial);
function createCannonBox(size, position, masss) {
this.shape = new CANNON.Box(
new CANNON.Vec3(size.x / 2, size.y / 2, size.z / 2)
);
this.body = new CANNON.Body({
mass: masss,
material: physicsMaterial,
});
this.body.addShape(this.shape);
this.body.position.copy(position);
world.addBody(this.body);
return this.body;
}
function createCannonBall(size, positionn, masss) {
this.shape = new CANNON.Sphere(size);
this.body = new CANNON.Body({
mass: masss,
material: physicsMaterial,
shape: this.shape
});
this.body.position.copy(positionn);
world.addBody(this.body);
return this.body;
}
function createCannonKnot(size, position) {
const Sshape = new CANNON.Sphere(size);
const Sbody = new CANNON.Body({ mass: 1, material: physicsMaterial });
Sbody.addShape(Sshape);
Sbody.position.copy(position);
world.addBody(Sbody);
return Sbody;
}
function CreateTrimesh(geometry) {
const vertices = geometry.attributes.position.array;
const indices = Object.keys(vertices).map(Number);
return new CANNON.Trimesh(vertices, indices);
}
const groundShape = new CANNON.Plane();
const groundBody = new CANNON.Body({
mass: 0,
shape: groundShape,
material: physicsMaterial,
});
groundBody.quaternion.setFromAxisAngle(
new CANNON.Vec3(1, 0, 0),
-Math.PI / 2
);
world.addBody(groundBody);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
camera.position.z = 3;
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const Oloader = new OBJLoader();
const concreteTexture = new THREE.TextureLoader().load(
"https://threejsfundamentals.org/threejs/resources/images/wall.jpg"
);
const controls = new PointerLockControls(camera, document.body);
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshPhysicalMaterial({
color: 0x00ff00,
map: concreteTexture,
clearcoat: 0.1,
});
const cube = new THREE.Mesh(geometry, material);
cube.castShadow = true;
scene.add(cube);
// here is my attempt
loader.load( '../free_1975_porsche_911_930_turbo.glb', function ( gltf )
{
const sword = gltf.scene; // sword 3D object is loaded
sword.scale.set(1, 1, 1);
sword.position.y = 1;
scene.add(sword);
} );
const cubeBody = new createCannonBox(
new THREE.Vector3(1, 1, 1),
new CANNON.Vec3(0.5, 4, 0),
1
);
const Sgeometry = new THREE.SphereGeometry(0.5, 40, 20);
const ball = new THREE.Mesh(Sgeometry, material);
ball.castShadow = true;
scene.add(ball);
const ballBody = new createCannonBall(
0.5,
new CANNON.Vec3(0.5, 20, 0),
1
)
const cube2 = new THREE.Mesh(geometry, material);
cube2.castShadow = true;
scene.add(cube2);
const cubeBody2 = new createCannonBox(
new THREE.Vector3(1, 1, 1),
new CANNON.Vec3(0, 2, 0),
0
);
const groundMaterial = new THREE.MeshPhysicalMaterial({
map: concreteTexture,
clearcoat: 1,
clearcoatRoughness: 1,
metalness: 0.9,
});
const groundGeometry = new THREE.PlaneGeometry(20, 20, 100, 100);
const ground = new THREE.Mesh(groundGeometry, groundMaterial);
ground.rotation.x = -Math.PI / 2;
scene.add(ground);
scene.background = new THREE.Color(0x87ceeb);
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(0, 15, 5);
light.castShadow = true;
scene.add(light);
const light2 = new THREE.AmbientLight(0x404040);
scene.add(light2);
light.shadow.camera.near = 0.1;
light.shadow.camera.far = 40;
light.shadow.mapSize.width = 1025;
light.shadow.mapSize.height = 1025;
light.shadow.radius = 4;
renderer.shadowMap.enabled = true;
light.shadow.camera.left = -10;
light.shadow.camera.right = 10;
light.shadow.camera.top = 10;
light.shadow.camera.bottom = -10;
light.shadow.bias = -0.002;
camera.position.y = 1;
var keys = {};
window.addEventListener("keydown", function (ev) {
keys[ev.key] = true;
});
window.addEventListener("keyup", function (ev) {
keys[ev.key] = false;
});
window.addEventListener("keydown", function (ev) {
if (ev.code == "KeyE") {
checkK = !checkK;
}
});
const moveVector = new THREE.Vector3();
const setVector = new CANNON.Vec3();
camera.rotation.order = "YXZ";
const initialCubePosition = cube.position.clone();
const initialCubePosition2 = cube2.position.clone();
const initialBallPosition = ball.position.clone();
const resetInterval = 2.0;
let lastResetTime = clock.elapsedTime;
function check() {
cubeBody2.addEventListener("collide", function (e) {
colide = true;
// name = cube;
//boddy = cubeBody;
});
cubeBody.addEventListener("collide", function (e) {
Name = cube;
boddy = cubeBody;
});
ballBody.addEventListener("collide", function (e) {
Name = ball;
boddy = ballBody;
});
}
function go() {
if (keys.w) moveVector.z -= 0.1;
if (keys.s) moveVector.z += 0.1;
if (keys.a) moveVector.x -= 0.1;
if (keys.d) moveVector.x += 0.1;
if (keys.c) moveVector.y -= 0.1;
if (keys.v) moveVector.y += 0.1;
if (checkK && colide && keys.e) (checkK = false), (colide = false), (boddy.mass = 1);
if (keys.m) controls.lock();
moveVector.multiplyScalar(0.6);
camera.translateX(moveVector.x);
camera.translateZ(moveVector.z);
camera.translateY(moveVector.y);
if (colide && checkK) {
boddy.mass = 1;
boddy.quaternion.copy(camera.quaternion);
Name.position.copy(camera.position);
Name.translateX(moveVector.x);
Name.translateY(moveVector.y);
Name.translateZ(moveVector.z - 3);
boddy.position.copy(Name.position);
}
score.innerText = checkK;
cube.position.copy(cubeBody.position);
cube.quaternion.copy(cubeBody.quaternion);
ball.position.copy(ballBody.position);
ball.quaternion.copy(ballBody.quaternion);
cube2.position.copy(cubeBody2.position);
cube2.quaternion.copy(cubeBody2.quaternion);
cubeBody2.position.copy(camera.position);
if (clock.elapsedTime - lastResetTime >= resetInterval) {
lastResetTime = clock.elapsedTime;
}
}
function animate() {
const delta = clock.getDelta();
world.step(delta);
check();
go();
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
Файл glb для загрузки в видимый
Поместите файл GLB в общедоступный каталог (он не обязательно должен называться так) и получите доступ к файлу, используя абсолютный путь. например:
loader.load( '/public/free_1975_porsche_911_930_turbo.glb', function ( gltf ) {
// setup code
});
или в вашем случае:
loader.load( '/free_1975_porsche_911_930_turbo.glb', function ( gltf ) {
// setup code
});
Начальная буква /
обозначает корень веб-сайта, и путь к ресурсу начинается здесь.
Типичная структура папок одностраничного веб-сайта JavaScript:
project-root/
│
├── assets/
│ ├── js/
│ │ └── script.js
│ │ └── target2.glb <- (this not typical)
│ ├── css/
│ │ └── style.css
│ ├── models/
│ │ └── target.glb
│ ├── images/
│ └── fonts/
│
└── index.html
Чтобы script.js
получил доступ к target.glb
или targer2.glb
, это можно сделать двумя способами: путь absolute
или путь relative
.
Относительные пути указываются относительно текущего местоположения файла, например.
..
(точка-точка) обозначают родительский элемент.
каталог (assets
)..
(точка) обозначают текущий
каталог (js
)Абсолютные пути предоставляют полный путь от корневого каталога к файлу, например.
И сначала /
представим каталог root
(project-root
).
если у вас следующее,
project-root/
│
├── style.css
├── script.js
├── target.glb
└── index.html <- (maybe accessing from embedded script)
тогда подойдет /target.glb, но это не рекомендуемый способ структурирования файлов.
Надеюсь, это поможет.
@BlazeBranham Я добавил некоторые пояснения к своему ответу.
Я на 100% уверен, что это исправление, и ваше объяснение было отличным, и теперь я понимаю, что вы имеете в виду. Я думаю, что причина, по которой оно не работает, заключается в том, что мой Chromebook настроен так, что школа может его контролировать, и это предотвращает некоторый код. от работы. Огромное спасибо за вашу помощь, я буду использовать эту информацию в будущих проектах!
ЭТО РАБОТАЛО, Я СДЕЛАЛ ТО, ЧТО ВЫ СКАЗАЛ, И ЗАпустил ЭТО НА REPLIT ВМЕСТО ПРОСТО ЗАПУСКА В БРАУЗЕРЕ, И ЭТО СРАБОТАЛО. СПАСИБОУУУ
@Блейз Бранхам Отлично. Рад, что вы добились успеха.
Этот код выполняется на школьном Chromebook и представляет собой папку со сценарием и файлом GLB. Что такое общедоступный каталог и как поместить в него файл?