I have a model that is created in blender and it looks awesome in blender
Can you share the file here? And also the code you’re using to load it?
import * as THREE from "./three/build/three.module.js";
import { GLTFLoader } from "./three/examples/jsm/loaders/GLTFLoader.js";
import { PointerLockControls } from "./three/examples/jsm/controls/PointerLockControls.js";
import { DRACOLoader } from "./three/examples/jsm/loaders/DRACOLoader.js";
var renderer = new THREE.WebGLRenderer();
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
45,
window.innerWidth / window.innerHeight,
1,
1000
);
camera.rotation.y = 4.7;
camera.position.x = -10;
camera.position.y = 2;
var loader = new GLTFLoader();
var dracoloader = new DRACOLoader();
dracoloader.setDecoderPath("/three/examples/js/libs/draco/");
loader.setDRACOLoader(dracoloader);
loader.load("model/ice stall04.gltf", (gltf) => {
scene.add(gltf.scene);
});
var hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444);
hemiLight.position.set(0, 300, 0);
scene.add(hemiLight);
var dirLight = new THREE.DirectionalLight(0xffffff);
dirLight.position.set(75, 300, -75);
scene.add(dirLight);
const container = document.getElementById("model");
container.appendChild(renderer.domElement);
var controls = new PointerLockControls(camera, container);
container.addEventListener("click", () => {
controls.lock();
});
function animate() {
requestAnimationFrame(animate);
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.render(scene, camera);
}
animate();
This is the code I have used
Check first how the model looks in a viewer like https://gltf-viewer.donmccurdy.com/. If it’s still not looking how you want, then the model itself isn’t exporting correctly, and you’d need to share the .blend to get help with that. If it does look correct in a viewer, then the problem likely has to do with lighting and renderer setup. Using an IBL (scene.environment or material.envMap) helps enormously. Setting renderer.outputEncoding = THREE.sRGBEncoding is also important to getting correct colors.
https://drive.google.com/drive/folders/15f89UFUJ4na4TMvK8vX5-a9qv47VGmto?usp=sharing
This link has the .blend file the gltf file and also the output I need in That was created in blender but Viewed using Verge 3D.
Please do open the Verge 3D file as a server and open the html file for the required output
The size was large that’s why I am unable to upload it here.
I think the model is not getting exported correctly, Because lot of the colours are not getting right. Can some one explain if there is a particular way in which we can export the model in blender which is completely compatible with threejs.
I am not the one who does the blender work it is done by another 3D guy. I do only the ThreeJS part is there anything i can tell him to make it right
There’s extensive documentation here:
I would strongly recommend testing in popular glTF viewers first. Verge3D puts a lot of custom extensions into its glTF files that are not supported by anything outside of Verge3D’s own tools. If Verge3D has an option to export official glTF files, you will want to use that. If not, I think you will need to ask Verge3D customer support for help. Opening this model in my viewer you’ll see a lot of warnings because of unsupported extensions:
S8S_v3d_texture_data
S8S_v3d_data
S8S_v3d_material_data
S8S_v3d_camera_data
S8S_v3d_mesh_data
S8S_v3d_node_data
S8S_v3d_scene_data
Click the ‘source’ button on the viewer.
Thank you sir ill test it as soon as possible
This model i loaded has nothing to do with verge 3d but then too it is missing lot of things
Blender is rendering with global illumination and a path tracing renderer here. You will not get exactly the same lighting from a realtime renderer like three.js. To get the same results as my viewer shows, feel free to copy any of the code here:
The important parts are setting renderer.outputEncoding = THREE.sRGBEncoding; and using material.envMap or scene.environment with a high quality IBL.
If you want to get better results than you’re currently getting from my viewer, you’d need to bake your lighting to an AO map or a lightmap. That takes some work, but there are various Blender tutorials on the subject.
Thank you so very much
