Assigning PointsMaterial to loaded (animated) FBX - three.js

Using this answer I've been able to assign a points material to a loaded GLTF model.
If I apply the same technique to an animated FBX model, the model loads and points material is assigned but the animation no longer works. Presumably because the technique works by duplicating the mesh.
How can I adapt this technique to include the animation?
Using PointsMaterial for loaded GLTF: (working)
const gltfLoader = new GLTFLoader();
gltfLoader.load( 'models/model.gltf', function ( gltf ) {
model = gltf.scene;
let pointsArray = [];
let v3 = new THREE.Vector3();
model.traverse(child => {
if (child.isMesh){
let pos = child.geometry.attributes.position;
for (let i = 0; i < pos.count; i++){
v3.fromBufferAttribute(pos, i);
pointsArray.push(v3.clone());
}
}
});
let particle_model_geometry = new THREE.BufferGeometry().setFromPoints( pointsArray );
particle_model_geometry.center();
particle_model = new THREE.Points( particle_model_geometry, points_material );
scene.add( particle_model );
render();
} );
Usings PointsMaterial for loaded FBX: (not working)
const loader = new FBXLoader();
loader.load( 'models/model.fbx', function ( object ) {
mixer = new THREE.AnimationMixer( object );
const action = mixer.clipAction( object.animations[ 1 ] );
action.play();
let pointsArray = [];
let v3 = new THREE.Vector3();
object.traverse(child => {
if ( child.isMesh ){
let pos = child.geometry.attributes.position;
for (let i = 0; i < pos.count; i++){
v3.fromBufferAttribute( pos, i );
pointsArray.push( v3.clone() );
}
}
});
let particle_model_geometry = new THREE.BufferGeometry().setFromPoints( pointsArray );
particle_model_geometry.center();
particle_model = new THREE.Points( particle_model_geometry, points_material );
scene.add( particle_model );
} );

Related

GLB animation in three.js is too fast

I have uploaded a glb file with an animation, and the animation is moving extremely fast, and I do not know why.
This is my character's animation code:
class MainChar extends THREE.Object3D {
constructor() {
super();
this.object = new THREE.Object3D();
this.object.position.set(0, 1, 50);
this.object.scale.x=20;
this.object.scale.y=20;
this.object.scale.z=20;
//load house model form blender file
/*
loader.setPath('../../models/characters/');
const gltf = loader.load('Douglas.glb', (gltf) => {
gltf.scene.traverse(c => {
c.castShadow = true;
});
this.object.add( gltf.scene);
});
*/
const loader = new THREE.GLTFLoader();
loader.setPath('../../models/characters/');
const gltf = loader.load('walk.glb', (gltf) => {
gltf.scene.traverse(c => {
c.castShadow = true;
});
this.mixer = new THREE.AnimationMixer( gltf.scene );
this.mixer.timeScale=1/5;
var action = this.mixer.clipAction( gltf.animations[ 0 ] );
action.play();
this.object.add( gltf.scene );
});
//save keyboard bindings
this.keyboard = new THREEx.KeyboardState();
/*
//creating a box (need to change it to a character with animations)
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
this.object = new THREE.Mesh( geometry, material );
this.object.scale.x=5;
this.object.scale.y=10;
this.object.scale.z=5;
//starting position for character
this.object.position.set(0, 10, 50);
*/
this.update = function (time) {
if ( this.mixer ){
this.mixer.update( time );
console.log(time);
}
//MOVEMENT OF BOX
//speed
var moveDistance = 0.5 ;
// var rotateAngle = Math.PI / 2 * 0.05;
// move forwards/backwards/left/right
if ( this.keyboard.pressed("W") ){
this.object.translateZ( -moveDistance );
}
if ( this.keyboard.pressed("S") ){
this.object.translateZ( moveDistance );
}
if ( this.keyboard.pressed("A") ){
this.object.translateX( -moveDistance );
}
if ( this.keyboard.pressed("D") ){
this.object.translateX( moveDistance );
}
// move forwards/backwards/left/right
if ( this.keyboard.pressed("up") ){
this.object.translateZ( -moveDistance );
}
if ( this.keyboard.pressed("down") ){
this.object.translateZ( moveDistance );
}
if ( this.keyboard.pressed("left") ){
this.object.translateX( -moveDistance );
}
if ( this.keyboard.pressed("right") ){
this.object.translateX( moveDistance );
}
// FOR CAMERA ROTATIONS
//this.object.rotateOnAxis( new THREE.Vector3(0,1,0), -rotateAngle);
//this.object.rotateOnAxis( new THREE.Vector3(0,1,0), rotateAngle);
//var rotation_matrix = new THREE.Matrix4().identity();
if ( this.keyboard.pressed("Z") )
{
this.object.position.set(0, 1, 50);
this.object.rotation.set(0,0,0);
}
/*
// global coordinates
if ( this.keyboard.pressed("left") )
this.object.position.x -= moveDistance;
if ( this.keyboard.pressed("right") )
this.object.position.x += moveDistance;
if ( this.keyboard.pressed("up") )
this.object.position.z -= moveDistance;
if ( this.keyboard.pressed("down") )
this.object.position.z += moveDistance;
*/
};
}
}
This is the time class that allows the game to be paused, as well as returns the delta time:
class Time {
constructor(){
this.is_pause = false;
this.accumalated_run_time = 0;
this.clock = new THREE.Clock();
this.pause_clock = new THREE.Clock();
}
getRunTime()
{
this.accumalated_run_time += this.clock.getDelta();
return this.accumalated_run_time
}
pause()
{
this.is_pause = true;
}
unpause()
{
this.is_pause = false;
this.clock.getDelta();
}
}
This is the sceneManager that calls up my character for updating animations:
class SceneManager {
constructor(canvas) {
//this entire function renders a scene where you can add as many items as you want to it (e.g. we can create the house and add as
//many items as we want to the house). It renders objects from other javascript files
//------------------------------------------------------------------------------------------------------------------------------------------
//These are supposed to act like constants. DO NOT CHANGE
this.GAME_PAUSE = "pause";
this.GAME_RUN = "run";
//------------------------------------------------------------------------------------------------------------------------------------------
//we use (this) to make variables accessible in other classes
this.time = new Time();
this.game_state = this.GAME_RUN;
this.screenDimensions = {
width: canvas.width,
height: canvas.height
};
//the essentials for rendering a scene
this.scene = this.buildScene();
this.renderer = this.buildRender(this.screenDimensions);
this.camera = this.buildCamera(this.screenDimensions);
this.managers = this.createManagers();
this.loadToScene(this.managers[0].entities);
//allow camera to orbit target (player)
this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
this.controls.target.set(0, 20, 0);
this.controls.update();
}
loadToScene(entities)
{
for (let i = 0 ; i < entities.length ; i++)
{
console.log("before" +i.toString());
this.scene.add(entities[i].object);
console.log("after");
}
}
//this function creates our scene
buildScene() {
//create a new scene
const scene = new THREE.Scene();
//set the scene's background-> in this case it is our skybox
const loader = new THREE.CubeTextureLoader();
//it uses different textures per face of cube
const texture = loader.load([
'../skybox/House/posx.jpg',
'../skybox/House/negx.jpg',
'../skybox/House/posy.jpg',
'../skybox/House/negy.jpg',
'../skybox/House/posz.jpg',
'../skybox/House/negz.jpg'
]);
scene.background = texture;
//if we wanted it to be a colour, it would have been this commented code:
//scene.background = new THREE.Color("#000");
return scene;
}
//this creates a renderer for us
buildRender({ width, height }) {
const renderer = new THREE.WebGLRenderer({
canvas: canvas,
antialias: true, alpha: true
});
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
return renderer;
}
//create a camera for the screen
buildCamera({ width, height }) {
//SETTING FIELD OF VIEW, ASPECT RATIO (which should generally be width/ height), NEAR AND FAR (anything outside near/ far is clipped)
const aspectRatio = width / height;
const fieldOfView = 60;
const nearPlane = 1;
const farPlane = 1000;
//there are 2 types of cameras: orthographic and perspective- we will use perspective (more realistic)
const camera = new THREE.PerspectiveCamera(fieldOfView, aspectRatio, nearPlane, farPlane);
//set where the camera is
camera.position.set(-50, 50, 70);
return camera;
}
//add subjects to the scene
createManagers() {
const managers=[new EntityManager()];
//can be altered so we can add multiple entities, and depending on which position
//it is, certain ones won't be paused, and some will be
managers[0].register(new GeneralLights());
managers[0].register(new House());
managers[0].register(new MainChar());
managers[0].register(new SceneSubject())
return managers;
}
//this updates the subject/model every frame
update() {
//won't call this loop if it's paused-> only for objects that need to be paused (managers that need to be paused)
if (this.game_state == this.GAME_RUN)
{
const runTime = this.time.getRunTime();
this.managers[0].update(runTime);
}
//update orbit controls
this.controls.update();
this.renderer.render(this.scene, this.camera);
}
//this resizes our game when screen size changed
onWindowResize() {
this.camera.aspect = window.innerWidth / window.innerHeight;
this.camera.updateProjectionMatrix();
this.renderer.setSize(window.innerWidth, window.innerHeight);
}
pause(){ //when pause mode is entered. The pause menu needs to be rendered.
this.game_state = this.GAME_PAUSE;
this.time.pause();
}
unpause(){
this.game_state = this.GAME_RUN;
this.time.unpause();
}
}
I think the issue is with your AnimationMixer.update() call. If you look at the docs, update is expecting a time-delta in seconds, but it looks like you're passing the total running time. This means it should receive the time passed since the last frame. You can fix this by using clock.getDelta(); as the argument:
this.update = function (time) {
if ( this.mixer ){
const delta = this.clock.getDelta();
this.mixer.update(delta);
}
// ...
}

Three.js placing a particle on each vertex (attribute) of an OBJ (buffer geometry)

I am trying to place particles on each vertex of my OBJ model in Three.js.
The desired result should look something like this
https://codepen.io/consolacao/pen/Cdjmi
The console shows that my OBJ has loaded fine, it can access the attributes of the OBJ model... but nothing shows on the screen
I have tried changing the model, changing from buffer geometry to geometry... with no luck
Can anybody help me?
var manager = new THREE.LoadingManager();
manager.onProgress = function ( item, loaded, total ) {
console.log('webgl, twice??');
console.log( item, loaded, total );
};
var p_geom = new THREE.BufferGeometry();
var p_material = new THREE.PointsMaterial({
color: 0xd48908
});
function loadModel() {
const loader = new OBJLoader(manager);
loader.load ('src/models/faceyface.obj', function (face) {
face.position.y = 10;
face.traverse( function ( child ) {
if (child.isMesh) {
var position = child.geometry.getAttribute('position');
var normal = child.geometry.getAttribute('normal');
for (let i=0; i< position.array.length; i+=3) {
const pos = new THREE.Vector3(position.array[i],
position.array[i+1],
position.array[i+2]);
const norm = new THREE.Vector3(normal.array[i],
normal.array[i+1],
normal.array[i+2]);
p_geom.position.copy(pos);
var particles = new THREE.Points(p_geom,
p_material);
const target =
pos.clone().add(norm.multiplyScalar(10.0));
particles.lookAt(target);
}
scene.add(particles)
}
})
});
}
Here is an example of how you can achieve the desired result:
body{
overflow: hidden;
margin: 0;
}
<script type="module">
import * as THREE from "https://threejs.org/build/three.module.js";
import { OBJLoader } from 'https://threejs.org/examples/jsm/loaders/OBJLoader.js';
import {OrbitControls} from "https://threejs.org/examples/jsm/controls/OrbitControls.js";
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 0, 35);
let renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x222222);
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
let controls = new OrbitControls(camera, renderer.domElement);
const loader = new OBJLoader();
loader.load( "https://threejs.org/examples/models/obj/ninja/ninjaHead_Low.obj", function ( group ) {
//console.log(group);
let pts = [];
let v3 = new THREE.Vector3();
group.traverse(child => {
if (child.isMesh){
let pos = child.geometry.attributes.position;
for (let i = 0; i < pos.count; i++){
v3.fromBufferAttribute(pos, i);
pts.push(v3.clone());
}
}
});
let g = new THREE.BufferGeometry().setFromPoints(pts);
g.center();
let m = new THREE.PointsMaterial({color: "aqua", size: 0.25});
let p = new THREE.Points(g, m);
scene.add(p);
} );
renderer.setAnimationLoop(()=>{
renderer.render(scene, camera);
});
</script>

Can Not See 3d Obj. Model When Loaded With THREE.js

I load an obj file from an external resource with three.js. From onProgress callback function I can see that object is loaded without any error. However I can not see object on the screen.
I tried diffrent textures and different camera postion but still can not see the object.
Interestingly, obj file can be easily seen with Windows Object VÄ°ewer without any settings.
Here the boj file I used and CAD program settings while exporting obj:
Obj files and related files with obj file: https://ufile.io/e3oplk29
Obj File export options on the CAD program: https://pasteboard.co/Ieu9226.jpg
Here the code I use:
////************HERE LIGHT AND SCENE AND CAMERA****************////
var directionalLightIntensity = 1;
var ambientLightIntensity = 0.05;
var ambiColor = "#ffffff";
var metalValue = 0;
var roughValue = 1;
var kumas = "<?php echo CUSTOMSHIRT_PLUGIN_DIR_URL.'customshirt/';?>"+"kumas/kumas9.jpg";
var kumasNormal = "<?php echo CUSTOMSHIRT_PLUGIN_DIR_URL.'customshirt/';?>"+"kumas/kumas9_NORMAL.jpg";
var container = document.getElementById('cloth-container');
if(window.innerWidth > 767 ){
var render_height = document.documentElement.clientHeight - 8;
var render_width = document.documentElement.clientWidth - 130;
}else{
var render_height = document.documentElement.clientHeight - 95;
var render_width = document.documentElement.clientWidth;
}
const scene = new THREE.Scene();
var light = new THREE.DirectionalLight('#ffffff', directionalLightIntensity);
var ambientLight = new THREE.AmbientLight(ambiColor, ambientLightIntensity);
light.position.set(0,0,1);
scene.add(light);
scene.add(ambientLight);
const camera = new THREE.PerspectiveCamera(75, render_width/render_height,0.1,1000);
camera.position.z = 1.8 ;
camera.position.y = 1.2;
camera.position.x = 0;
camera.lookAt( 0,1.2,0);
const renderer = new THREE.WebGLRenderer({ alpha: true , antialias:true });
renderer.setSize(render_width, render_height);
renderer.setClearColor( 0xffffff, 0);
container.appendChild(renderer.domElement);
const objLoader = new THREE.OBJLoader();
const mtlLoader = new THREE.MTLLoader();
mtlLoader.setMaterialOptions({side:THREE.DoubleSide});
////************HERE OBJ LOAD WITH THREE.JS****************////
mtlLoader.load( "<?php echo CUSTOMSHIRT_PLUGIN_DIR_URL.'customshirt/yaka6-n4/';?>"+'yaka6-n4.mtl', function( materials ) {
materials.preload();
objLoader.setMaterials( materials );
objLoader.load( "<?php echo CUSTOMSHIRT_PLUGIN_DIR_URL.'customshirt/yaka6-n4/';?>"+'yaka6-n4.obj', function ( obj ) {
collar_obj = obj;
obj.position.set( obj_pos_x, obj_pos_y, obj_pos_z );
obj.rotation.y = 0;
// texture
texture = textureLoader.load(kumas);
textureNormal= textureLoader.load(kumasNormal);
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
textureNormal.wrapS = textureNormal.wrapT = THREE.RepeatWrapping;
texture.repeat.x = textureXRepeat;
texture.repeat.y = textureYRepeat;
textureNormal.repeat.x = textureXRepeat;
textureNormal.repeat.y = textureYRepeat;
obj.traverse( function ( child ) {
//if ( child.isMesh ) child.material.map = texture;
if ( child.isMesh ) child.material = new THREE.MeshStandardMaterial({
//color: 0x996633,
//specular: 0x050505,
//shininess: my_shine_value,
metalness: metalValue,
roughness: roughValue,
map: texture,
normalMap: textureNormal,
//side: THREE.DoubleSide
});
});
scene.add( obj );
},
// onProgress callback
function ( xhr ) {
console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
},
// onError callback
function ( err ) {
console.log( 'An error happened' );
});
});
////************HERE RENDERER****************////
function render(){
requestAnimationFrame(render);
renderer.render(scene,camera);
}
render();
Any idea is appreciated.
Thanks
It seems your object's geometry is translated. Since the asset is composed of multiple meshes, I suggest the following code to center your OBJ.
const box = new THREE.Box3().setFromObject( object );
const center = box.getCenter( new THREE.Vector3() );
object.position.x += ( object.position.x - center.x );
object.position.y += ( object.position.y - center.y );
object.position.z += ( object.position.z - center.z );
I've added this code in the onLoad() callback of OBJLoader in the following official example and was able to see the object (a shirt collar).
https://threejs.org/examples/webgl_loader_obj_mtl
three.js R 104

Apply Face material(image texture) to IcosahedronGeometry thee.js

i am not able to apply different material on each face of IcosahedronGeometry.
here is my code.below code is working fine for boxgeometry.
var textureLoader = new THREE.TextureLoader();
var texture0 = textureLoader.load( 'google.png' );
...
var texture19 = textureLoader.load( 'google.png' );
var materials = [
new THREE.MeshBasicMaterial( { map: texture0 } ),
...
new THREE.MeshBasicMaterial( { map: texture19 } )
];
var faceMaterial = new THREE.MeshFaceMaterial( materials );
var globe = new THREE.IcosahedronGeometry(75,0);
var Ico = new THREE.Mesh(globe, faceMaterial);
Ico.rotation.z = 0.5;
scene.add(Ico);
also tried to set material index for each face with no luck.See below code.
var globe = new THREE.IcosahedronGeometry(75,0);
globe.materials =materials;
for( var i = 0; i < globe.faces.length; i ++ ) {
globe.faces[i].materialIndex = i;
}
var Ico = new THREE.Mesh(globe, globe.materials);
can anybody point me to related example or any solution?
Thanks

THREE.OBJLoader Multiple objects

I'm trying to load an object with OBJLoader and then I want to place it multiple times (without clone() ).
I tried:
var oLoader = new THREE.OBJLoader();
oLoader.load('cube.obj', function(object, materials) {
var material2 = new THREE.MeshLambertMaterial({ color: 0x00B74F });
for (var i = 0; i < 5; i++) {
object.traverse( function(child) {
if (child instanceof THREE.Mesh) {
// apply custom material
child.material = material2;
// enable casting shadows
// child.castShadow = true;
// child.receiveShadow = true;
}
});
object.position.x = i * 1;
object.position.y = i * 80;
object.position.z = i * 100;
object.scale.set(1, 1, 1);
three.scene.add(object);
console.log(object);
}
});
I probably need to create a new Mesh inside the for but I don't know what exactly I have to use.
Any help would be nice.
Thank you

Resources