我的 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>
要加载到 saw 中的 glb 文件
将GLB文件放在public（不一定要叫这个）目录下，并使用绝对路径访问该文件。例如：
loader.load( '/public/free_1975_porsche_911_930_turbo.glb', function ( gltf ) {
// setup code
});
最初的
/