Thanks a lot! Got rid of all my errors inside of the console
Now no errors are showing, I checked my compressed files inside a online gltf viewer, everything seems fine. I console-loged my objects, also everything looks good.
Can’t figure out why I can’t see any object inside of my display in the browser …
I really appreciate you guys helping out, hope you have nice day and that somebody will help me figure this three.js thing out
import * as THREE from 'three';
import { TextureLoader } from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
window.Webflow ||= [];
window.Webflow.push(() => {
init3D();
});
function init3D() {
const viewport = document.querySelector('[data-3d="c"]');
// console.log(viewport);
//renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(viewport.clientWidth, viewport.clientHeight);
viewport.appendChild(renderer.domElement);
//camera
const camera = new THREE.PerspectiveCamera(
20, // fov
viewport.clientWidth / viewport.clientHeight, // aspect ratio
0.1,
100
); // far
camera.position.z = 100;
//scene
const scene = new THREE.Scene();
// object
// const geometry = new THREE.BoxGeometry(2, 2, 2);
// const material = new THREE.MeshNormalMaterial();
// const cube = new THREE.Mesh(geometry, material);
// scene.add(cube);
// add controls
const controls = new OrbitControls(camera, renderer.domElement);
//controls.enableDamping = true;
//controls.dampingFactor = 0.05;
// rendering
function animate() {
window.requestAnimationFrame(animate);
//console.log('loop');
/*--*/
controls.update();
// cube.roration.x += 0.01;
// cube.roration.y += 0.01;
/*--*/
renderer.render(scene, camera);
}
let dirLight;
function addLight() {
const ambLight = new THREE.AmbientLight(0xffffff, 0.3);
scene.add(ambLight);
dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
dirLight.position.set(1, 1, 0.5);
scene.add(dirLight);
}
animate();
// -- load 3d async
const assets = load();
assets.then((data) => {
const tv = data.tv.scene;
const { animations } = data.tv.animations;
// console.log(data, data.tv);
tv.traverse((child) => {
if (child.isMesh) {
child.material = new THREE.MeshStandardMaterial();
child.material.map = data.texture;
}
});
tv.position.y = 1;
tv.position.x = 1;
scene.add(tv);
});
}
/* Loader Functions */
async function load() {
const tv = await loadModel(
'URL'
);
const texture = await loadTexture(
'URL'
);
return { tv, texture };
}
const textureLoader = new TextureLoader();
const modelLoader = new GLTFLoader();
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.5.6/');
dracoLoader.setDecoderConfig({ type: 'js' });
modelLoader.setDRACOLoader(dracoLoader);
function loadTexture(url) {
return new Promise((resolve) => {
textureLoader.load(url, (data) => {
data.needsUpdate = true;
data.flipY = false;
resolve(data);
});
});
}
function loadModel(url, id) {
return new Promise((resolve, reject) => {
modelLoader.load(url, (gltf) => {
console.log(gltf);
const { scene } = gltf;
const { animations } = gltf;
resolve({ scene, animations });
});
});
}
not a valid path. you can’t url-fetch from node_modules because that folder does not exist in production. the bundlers job is to fish all the parts your code relies on, so that it creates a self-contained bundle. that folder will collapse. same for /src, you cannot fetch from that as well.
you put static assets into the /public folder.
as for cdns, this should be enough:
loader = new GLTFLoader()
dracoLoader = new DRACOLoader()
dracoLoader.setDecoderPath("https://www.gstatic.com/draco/versioned/decoders/1.5.5/")
loader.setDRACOLoader(dracoLoader)
if you don’t see anything i’s probably unrelated. model too big, too small, not facing the camera, faces inverted, etc.
but your resolve is resolving( {scene,animations} )
so shouldn’t this be:
const {scene,animations} = data;
const tv = scene;
?
I hiiiighly recommend learning to use the chrome debugger because it makes figuring these things out like… SUPER easy. you stick a “debugger;” statement right inside “load” or inside your assets.then(,
and hover the mouse over the variables and you can see what they contain. You hit F10 to step to the next line, and verify the next thing. It’s such a vital part of my “figuring things out” toolbox that I personally would probably have to stop coding javascript without it.
Also… if you provide an example of your code in something like glitch, or codepen… we can just fix it in like 30 seconds, instead of the incremental back and forth. imo you’re really flying completely blind without it… and once you get into it, you’ll wonder how you ever lived without it.
