Can you make another video tutorial like this but from scratch? I was having a problem on the files parts its just too many steps that is not explained on how did it get there (sorry for my english)
Thank you Wael Do you plan to do a video on imported model animation on a specific part of the model? like for example turning the wheel of this car to the right when clicking on the right arrow
My pleasure! I actually did something similar to what you described here ruclips.net/video/GByT8ActvDk/видео.html So what you need to do is to import the model in Blender, create the different animations you want to achieve, and then export them with the model. Then just add an event listener and play each animation depending on the event captured.
Thank you for this wonderful tutorial. I had someone making a model for me in blender, but when I import to three-js project, I get a blank white model. no textures. When I asked him why, he said he is not familiar with three.js, but the texture are using blender material format.. Which I don't know what that means. How can I import the textures into three.js in that case?
No problem! 1. -Try to add light sources to your scene;- 2. -Make sure you have the right file extension (.glb or .gltf);- 3. Once done with 1 & 2 and you still have the same problem. Tell them to bake the textures of the model.
If you mean load by pack then yes you can do that. You just need to use the FBXLoader instead of the GLTFLoader. So first import it like so: import {FBXLoader} from 'three/examples/jsm/loaders/FBXLoader'; Then create instance: const loader = new FBXLoader(); Then call load on that instance like you'd usually do with the GLTFLoader: loader.load('path/file.fbx', function(object) { scene.add(object); });
@@WaelYasmina thank you for reply. what about the texture? Normally, need to load the texture separately. However, the parcel-reporter-static-files-copy can duplicate the all files to the specific path. And textures will be attached to the model automatically. My question is how to do this with FBX file? right now, I need to call different texture function manually, like: normalMap, aoMap ... thank you
Exactly, the loader will map the textures automatically. If you want to map them manually then you need to change the normalMap (for example) of each geometry that composes the model on its own. Assuming that the architecture of an .fbx file is the same or at least similar architecture to a .gltf file. Check this video out, I think it'll give you a clear explanation of what I'm trying to say: ruclips.net/video/H-LZ90pZ3rY/видео.html
@@WaelYasmina for example, the model from sketchfab. if i put the "scene, scene.bin, texture folder" into three.js editor, the model will be displayed with textures correctly. however, If i put the "fbx file, texture folder" into editor, the model doesn't have textures in it
@@WaelYasmina File is located in src/assetss/cube.gltf my code: const loader = new GLTFLoader(); loader.load('../assetss/cube.gltf', function(gltf) { const model = gltf.scene; scene.add(model);
Ah I thought you have the same setup as me because if you do, anything you have in your static folder will be copied automatically to the dist folder. So since you don't, then just copy it manually.
Can you make another video tutorial like this but from scratch? I was having a problem on the files parts its just too many steps that is not explained on how did it get there (sorry for my english)
Skip the first part by using this boilerplate: github.com/WaelYasmina/ThreeBoilerplate
Thanks alot! Exacly what i needed to go further!
You're welcome!
Your videos have been getting ridiculously simple and easy to follow along, after I saw your solar system tutorial. Why?
Because you're getting better so it becomes easier for you to follow the tutorials 💪
Thanks a lot for this
No problem!
Thank you Wael
Do you plan to do a video on imported model animation on a specific part of the model?
like for example turning the wheel of this car to the right when clicking on the right arrow
My pleasure!
I actually did something similar to what you described here ruclips.net/video/GByT8ActvDk/видео.html
So what you need to do is to import the model in Blender, create the different animations you want to achieve, and then export them with the model. Then just add an event listener and play each animation depending on the event captured.
i am using next app for dev. I added the gltf files in public folder. But loading is very slow. do i have to compress it?
Yeah sure you can do that. And here's a tutorial on this subject: ruclips.net/video/lhftxg7dppo/видео.html
@@WaelYasmina thanks ❤
Thank you for this wonderful tutorial. I had someone making a model for me in blender, but when I import to three-js project, I get a blank white model. no textures. When I asked him why, he said he is not familiar with three.js, but the texture are using blender material format..
Which I don't know what that means. How can I import the textures into three.js in that case?
No problem!
1. -Try to add light sources to your scene;-
2. -Make sure you have the right file extension (.glb or .gltf);-
3. Once done with 1 & 2 and you still have the same problem. Tell them to bake the textures of the model.
I am facing aproblem that parser reads my gltf file as html
Here's the project files, try and see if you'll still get the same problem
github.com/WaelYasmina/modelSketchfab
@@WaelYasmina thank you so much .Finally it worked.You are great
is possible to pack FBX file and texture? thank you
If you mean load by pack then yes you can do that. You just need to use the FBXLoader instead of the GLTFLoader.
So first import it like so:
import {FBXLoader} from 'three/examples/jsm/loaders/FBXLoader';
Then create instance: const loader = new FBXLoader();
Then call load on that instance like you'd usually do with the GLTFLoader:
loader.load('path/file.fbx', function(object) {
scene.add(object);
});
@@WaelYasmina thank you for reply. what about the texture? Normally, need to load the texture separately. However, the parcel-reporter-static-files-copy can duplicate the all files to the specific path. And textures will be attached to the model automatically.
My question is how to do this with FBX file? right now, I need to call different texture function manually, like: normalMap, aoMap ... thank you
Exactly, the loader will map the textures automatically.
If you want to map them manually then you need to change the normalMap (for example) of each geometry that composes the model on its own. Assuming that the architecture of an .fbx file is the same or at least similar architecture to a .gltf file.
Check this video out, I think it'll give you a clear explanation of what I'm trying to say: ruclips.net/video/H-LZ90pZ3rY/видео.html
@@WaelYasminaBut FBX can't map texture automatically, right? Currently, only GLTF file can map automatically.
@@WaelYasmina for example, the model from sketchfab. if i put the "scene, scene.bin, texture folder" into three.js editor, the model will be displayed with textures correctly. however, If i put the "fbx file, texture folder" into editor, the model doesn't have textures in it
Unable to load gltf objects and get this error: SyntaxError: Unexpected token '
Wrong path. Make sure you have the right one and you have the right extension .glb or .gltf
@@WaelYasmina File is located in src/assetss/cube.gltf my code:
const loader = new GLTFLoader();
loader.load('../assetss/cube.gltf', function(gltf) {
const model = gltf.scene;
scene.add(model);
});
Your path should be ./assetss/cube.gltf
Check if your dist folder has an assetss folder
@@WaelYasmina same, dist doesn't have any folders, it just makes files, should I make one manually(folder)?
Ah I thought you have the same setup as me because if you do, anything you have in your static folder will be copied automatically to the dist folder.
So since you don't, then just copy it manually.
i try everything to create shadow for the sphere in SpotLight mode, but it not work :
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import * as dat from 'dat.gui'
const renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
const orbit = new OrbitControls(camera, renderer.domElement);
////// đối tượng mặt phẳng //////
const axesHelper = new THREE.AxesHelper(5)
scene.add(axesHelper);
camera.position.set(-10, 30, 30);
orbit.update();
////// đối tượng khối lập phương //////
const boxGeometry = new THREE.BoxGeometry();
const boxMaterial = new THREE.MeshBasicMaterial({
color: 0x00FF00
});
const box = new THREE.Mesh(boxGeometry, boxMaterial);
scene.add(box);
///////đối tượng mặt phẳng ///////////
const planeGeometry = new THREE.PlaneGeometry(50, 50);
const planMaterial = new THREE.MeshStandardMaterial({
color: 0xFFFFFF,
side: THREE.DoubleSide
});
const plane = new THREE.Mesh(planeGeometry, planMaterial);
scene.add(plane);
plane.rotation.x = -0.5 * Math.PI;
plane.receiveShadow = true;
plane.castShadow = false;
const gridHelper = new THREE.GridHelper(50);
scene.add(gridHelper);
const sphereGeometry = new THREE.SphereGeometry(4, 50, 50);
const sphereMaterial = new THREE.MeshStandardMaterial({
color: 0x0000FF,
wireframe: false
});
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.castShadow = true;
sphere.receiveShadow = false;
scene.add(sphere);
sphere.position.set(-10, 10, 0);
const ambientLight = new THREE.AmbientLight({ color: 0x333333 });
scene.add(ambientLight);
// const directionalLight = new THREE.DirectionalLight(0xFFFFFF, 0.5);
// scene.add(directionalLight);
// directionalLight.position.set(-30, 50, 0)
// directionalLight.castShadow = true ;
// directionalLight.shadow.camera.bottom = -12 ;
// const dLightHelper = new THREE.DirectionalLightHelper(directionalLight, 5);
// scene.add(dLightHelper);
const spotLight = new THREE.SpotLight(0xFFFFFF);
sphere.castShadow = true;
sphere.receiveShadow = false;
scene.add(spotLight);
spotLight.position.set(-100, 100, 0);
const sLightHelper = new THREE.SpotLightHelper(spotLight);
scene.add(sLightHelper);
const gui = new dat.GUI();
const options = {
sphereColor: '#ffea00',
wireframe: false,
speed: 0.01
}
gui.addColor(options, 'sphereColor').onChange(function (e) {
sphere.material.color.set(e);
})
gui.add(options, 'wireframe').onChange(function (e) {
sphere.material.wireframe = e;
})
gui.add(options, 'speed', 0, 0.1);
let step = 0;
function animate(time) {
box.rotation.x = time / 1000;
box.rotation.y = time / 1000;
step += options.speed;
sphere.position.y = 10 * Math.abs(Math.sin(step))
sLightHelper.update();
renderer.render(scene, camera);
}
renderer.setAnimationLoop(animate)
Add these 2 lines to your code:
spotLight.intensity = 100000;
spotLight.castShadow = true;
thank you, i have a question about this series, does it have tutorial how to make background from file . vs and .fs
@@WaelYasmina
I need you help how can I contact you