Menu
My glb file wont show up inside my thee.js world. I have followed all the documentations and tutorals but nothing works. the world loads and evry thing works fine its just that the moddle dose not appear. Plaese help me i am on a jurnay to make a game that is compleatly in html/js and i am decently well exerpienced in js. Please keep the code as original as possible and good luck. I have only used stack overflow once so sorry if this is a bad description. I the file is in the same folder as the code file. I know that it is a long snipbit of code but i wanted to make sure that you could see all the code incase it is more than just my importing. I dont know what else to say so sorry i am just stalling a bit. If you can please explain in vary vary vary simple terms what was wrong and how you fixed it. I have to keep stalling becouse there is too much code. I dont know how much longer i have to keep up this typeing. Once again soo sory for stalling i just cant describe this much. I realy relye on stack overflow and wold love if you helped ne.
<!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>
The glb file to load into the seen
371
asked Oct 26 '25 23:10
Place the GLB file in the public(it does not have to be called this) directory and access the file using the absolute path. eg:
loader.load( '/public/free_1975_porsche_911_930_turbo.glb', function ( gltf ) {
// setup code
});
or in your case:
loader.load( '/free_1975_porsche_911_930_turbo.glb', function ( gltf ) {
// setup code
});
The initial / denotes the root of the website and the path to the asset will start here.
A typical folder structure for a single-page JavaScript website:
project-root/
│
├── assets/
│ ├── js/
│ │ └── script.js
│ │ └── target2.glb <- (this not typical)
│ ├── css/
│ │ └── style.css
│ ├── models/
│ │ └── target.glb
│ ├── images/
│ └── fonts/
│
└── index.html
For the script.js to access the target.glb or targer2.glb, it can be done in two ways: absolute path or relative path.
Relative paths are specified relative to the current location of the file eg.
.. (dot-dot) represent the parent
directory (assets).. (dot) represent the current
directory (js)Absolute paths provide the complete path from the root directory to the file eg.
And first / represent the root directory
(project-root).
if your's is as follow,
project-root/
│
├── style.css
├── script.js
├── target.glb
└── index.html <- (maybe accessing from embedded script)
then '/target.glb' will do, but this is not the recommended way to structure the files.
Hope this help.
98
answered Oct 28 '25 13:10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With