brakebein / node-three-gltf Goto Github PK
View Code? Open in Web Editor NEWUse three.js GLTFLoader in a Node.js environment
License: MIT License
Use three.js GLTFLoader in a Node.js environment
License: MIT License
I load a png image with transparent pixel
threejs is 0,0,0,0
// three_r148/src/extras/ImageUtils.js after line 49
const context = canvas.getContext('2d')
const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
console.log(imageData)
for (let i = 0; i < imageData.width * imageData.height; i++) {
const r = imageData.data[i * 4]
const g = imageData.data[i * 4 + 1]
const b = imageData.data[i * 4 + 2]
const a = imageData.data[i * 4 + 3]
console.log(i, '--', r, g, b, a)
}
node-three-gltf is 255,255,255,0
const textureLoader = new TextureLoader()
const metalnessMap = await textureLoader.loadAsync('./assets/textures/metalness.png')
// metalnessMap.encoding = sRGBEncoding
if (metalnessMap?.source?.data) {
const imageData = metalnessMap.source.data
for (let i = 0; i < imageData.width * imageData.height; i++) {
const r = imageData.data[i * 4]
const g = imageData.data[i * 4 + 1]
const b = imageData.data[i * 4 + 2]
const a = imageData.data[i * 4 + 3]
console.log(i, '--', r, g, b, a)
}
}
Hi there. I tried to replicate your example. My draco-compressed gltf file was not processed and console.logs were not generated. Was there something missing?
TypeError: Cannot read properties of undefined (reading 'extensions')
at GLTFTextureBasisUExtension.loadTexture (file:///C:/Users/Node-Three-GLTF-Test/node_modules/node-three-gltf/build/index.js:792:25)
at file:///C:/Users/Node-Three-GLTF-Test/node_modules/node-three-gltf/build/index.js:1634:80
at GLTFParser._invokeOne (file:///C:/Users/Node-Three-GLTF-Test/node_modules/node-three-gltf/build/index.js:1590:28)
at GLTFParser.getDependency (file:///C:/Users/Node-Three-GLTF-Test/node_modules/node-three-gltf/build/index.js:1634:39)
at GLTFParser.assignTexture (file:///C:/Users/Node-Three-GLTF-Test/node_modules/node-three-gltf/build/index.js:1825:21)
at GLTFMaterialsSpecularExtension.extendMaterialParams (file:///C:/Users/Node-Three-GLTF-Test/node_modules/node-three-gltf/build/index.js:776:33)
at file:///C:/Users/Node-Three-GLTF-Test/node_modules/node-three-gltf/build/index.js:1948:56
at GLTFParser._invokeAll (file:///C:/Users/Node-Three-GLTF-Test/node_modules/node-three-gltf/build/index.js:1601:28)
at GLTFParser.loadMaterial (file:///C:/Users/Node-Three-GLTF-Test/node_modules/node-three-gltf/build/index.js:1947:43)
at file:///C:/Users/Node-Three-GLTF-Test/node_modules/node-three-gltf/build/index.js:1631:81
file:///C:/Users/Node-Three-GLTF-Test/node_modules/node-three-gltf/build/index.js:792
if (!textureDef.extensions || !textureDef.extensions[this.name]) {
^
TypeError: Cannot read properties of undefined (reading 'extensions')
at GLTFTextureBasisUExtension.loadTexture (file:///C:/Users/Node-Three-GLTF-Test/node_modules/node-three-gltf/build/index.js:792:25)
at file:///C:/Users/Node-Three-GLTF-Test/node_modules/node-three-gltf/build/index.js:1634:80
at GLTFParser._invokeOne (file:///C:/Users/Node-Three-GLTF-Test/node_modules/node-three-gltf/build/index.js:1590:28)
at GLTFParser.getDependency (file:///C:/Users/Node-Three-GLTF-Test/node_modules/node-three-gltf/build/index.js:1634:39)
at GLTFParser.assignTexture (file:///C:/Users/Node-Three-GLTF-Test/node_modules/node-three-gltf/build/index.js:1825:21)
at GLTFMaterialsSpecularExtension.extendMaterialParams (file:///C:/Users/Node-Three-GLTF-Test/node_modules/node-three-gltf/build/index.js:776:33)
at file:///C:/Users/Node-Three-GLTF-Test/node_modules/node-three-gltf/build/index.js:1948:56
at GLTFParser._invokeAll (file:///C:/Users/Node-Three-GLTF-Test/node_modules/node-three-gltf/build/index.js:1601:28)
at GLTFParser.loadMaterial (file:///C:/Users/Node-Three-GLTF-Test/node_modules/node-three-gltf/build/index.js:1947:43)
at file:///C:/Users/Node-Three-GLTF-Test/node_modules/node-three-gltf/build/index.js:1631:81
Node.js v18.14.0
// Import Express, set up the homepage route, and use only ES modules
import express from 'express';
import loadModel from './src/js/loadModel.js';
const app = express();
const port = 3000;
app.get('/', async (req, res) => {
const fileData = await loadModel();
console.log('What is this?', fileData);
}
);
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`);
}
);
import { DRACOLoader, GLTFLoader, loadGltf } from 'node-three-gltf';
import fs from 'fs';
const loadModel = async () => {
const filePath = './src/assets/dracoModel.gltf';
if (!fs.existsSync(filePath)) {
console.log('File not found');
return;
};
// init GLTFLoader and pass a path to a local file or a url to a web resource
const loader = new GLTFLoader();
loader.setDRACOLoader(new DRACOLoader());
loader.load(filePath, gltf => {
console.log(gltf.scene.children);
});
// there is also a small utility function that instantiates GLTFLoader and DRACOLoader
// and returns a Promise with the loaded content
const gltf = await loadGltf(filePath);
console.log(gltf.scene.children);
};
export default loadModel;
const gltf = await loadGltf('./temp/shoes.glb');
error: loader.setRequestHeader is not a function
[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "#<Object>".] {
code: 'ERR_UNHANDLED_REJECTION'
}
An error occurs when trying to load this model.
The model shows normally when using GLTFLoader and useGLTF on the Frontend.
This loader works very well, I think the Three.GLTFExporter for node should be supported as well;
Especially when exporting GLTF models with images
Hi,
Thank you for sharing a great library.
I am new to ThreeJS. And I was having trouble using GLTFLoader.
I used useGLTF
(@react-three/drei). But it seems that the useGLTF scene
and the GLTFLoader scene
are different.
I can't use GLTFLoader's scene to render with <primitive object={model.scene} />
.
Where did I go wrong? Or is it wrong to use primitive in this case?
Thank you so much.
import {
DRACOLoader,
GLTFLoader,
loadGltf as loadAsync,
} from "node-three-gltf";
import { MeshoptDecoder } from "three-stdlib";
export const loadGltf = async (url: string) => {
const gltf = new GLTFLoader();
const draco = new DRACOLoader();
gltf.setDRACOLoader(draco);
gltf.setMeshoptDecoder(MeshoptDecoder);
return await loadAsync(url);
};
results in
Error: THREE.GLTFLoader: setMeshoptDecoder must be called before loading compressed files
How can I load compressed gltfs?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.