Call Variables to another function in Octave GUI - user-interface
I want to make a gui, which imports the excel data and plot three y axis and one x axis like this. But in contrast to this answer from cem, my axis didn't change when the data changed.
I'm not successful with scale the y axis because I don't know how I can call the Y data from popup callback functions. In my code I marked the problem's section as %%PROBLEM%% . Therefore if you have any tipps for that, please share me about that.
clear all
clc
pkg load io
% Create the Gui Window which will hold all controls and relevant data.
GuiWindow = figure()
% Static text element used as a title
uicontrol ("style", "text", "units", "normalized", "string", "Results of Experiments",'ForegroundColor','w','BackgroundColor',[0 0.4470 0.7410],'Fontweight','bold', "horizontalalignment", "center", "position", [0.03 0.9 0.35 0.08] );
% A button for importing (excel) data
uicontrol ("style", "pushbutton", "units", "normalized", "string", "Datei (.xlsx) mitbringen", "callback", { #pushbutton_Callback, GuiWindow }, "position", [0.03 0.8 0.35 0.08], 'tag', 'button' );
% Popupmenus for selecting appropriate X and Y axis to display in plots
uicontrol("Style","popupmenu", "units", "normalized", "string","X", "callback", { #popupmenuX_Callback, GuiWindow }, "Position",[0.7 0.04 0.2 0.05], 'tag', 'XAxisMenu' );
uicontrol("Style","popupmenu", "units", "normalized", "string","Y", "callback", { #popupmenuY_Callback, GuiWindow }, "Position",[0.03 0.5 0.2 0.05], 'tag', 'YAxisMenu' );
uicontrol("Style","popupmenu", "units", "normalized", "string","Y", "callback", { #popupmenuY_1_Callback, GuiWindow }, "Position",[0.03 0.6 0.2 0.05], 'tag', 'YAxisMenu' );
uicontrol("Style","popupmenu", "units", "normalized", "string","Y Achse", "callback", { #popupmenuY_2_Callback, GuiWindow }, "Position",[0.03 0.7 0.2 0.05], 'tag', 'YAxisMenu_2' );
%%=============================================================================
%% Functions
%%=============================================================================
function pushbutton_Callback(hObject, eventdata, GuiWindow)
% Read in data from file, graphically selected by user
fileName = uigetfile('*.xlsx');
[num,txt,raw] = xlsread(fileName);
header = raw(1,:);
Data = xlsread(fileName);
% Show fileName
button = findobj('tag', 'button');
set( button, 'string', fileName)
% Populate the menu items for the X and Y Axis from the excel header
XAxisMenu = findobj( 'tag', 'XAxisMenu' );
set( XAxisMenu, 'string', header );
YAxisMenu = findobj( 'tag', 'YAxisMenu' );
set( YAxisMenu, 'string', header );
% Populate the menu items for the X and Y Axis from the excel header
YAxisMenu_1 = findobj( 'tag', 'YAxisMenu_1' );
set( YAxisMenu_1, 'string', header );
YAxisMenu_2 = findobj( 'tag', 'YAxisMenu_2' );
set( YAxisMenu_2, 'string', header );
% Also store headers and data as GuiWindow app data, in case we need them again later.
setappdata( GuiWindow, 'header', header );
setappdata( GuiWindow, 'Data' , Data );
% Plot a preliminary plot in the plot area
XData = Data(:, 1);
YData = Data(:, 1);
Y_1Data = Data(:, 1);
Y_2Data = Data(:, 1);
% An 'axes' object for displaying plots in the Gui Window
axes ('position', [0.45 0.25 0.5 0.5], 'tag', 'plotarea','ycolor','r');
% Normalisierung for axes
yoff = YData - min(YData);
ynor = yoff / max(yoff);
y1off = Y_1Data - min(Y_1Data);
y1nor = y1off / max(y1off);
y2off = Y_2Data - min(Y_2Data);
y2nor = y2off / max(y2off);
%% Plot the data
plot(XData, ynor, 'r','tag', 'plotobject',...
XData, y1nor, 'g','tag','plotobject_1', ...
XData, y2nor, 'b','tag','plotobject_2');
grid on
%% Axis inforation
%%%%%%%%%%PROBLEM%%%%%%%
##How can I import YData, Y_1Data and Y_2Data from popupmenu Y Callbacks##
nticks = 5; #Number of ticks
yticks(linspace(0, 1, nticks));
yticklabels(arrayfun(#(a, b, c) sprintf('\\color{red}%6.2f \\color{green}%6.2f \\color{blue}%6.2f', a, b, c), ...
linspace(min(YData), max(YData), nticks), ...
linspace(min(Y_1Data), max(Y_1Data), nticks), ...
linspace(min(Y_2Data), max(Y_2Data), nticks), ...
'UniformOutput', false));
endfunction
%% 2. X Axis Information from excel data import
function popupmenuX_Callback( hObject, eventdata, GuiWindow )
Axes = findobj( 'tag', 'plotarea','-or','tag','plotobject_1' );
Selection = get( hObject, 'value' );
XData = [ getappdata( GuiWindow, 'Data' )( :, Selection ) ];
PlotObj = findobj( 'tag', 'plotobject','-or','tag','plotobject_1','-or','tag','plotobject_2');
set( PlotObj, 'xdata', XData )
endfunction
%% 3. Y Axis Information from excel data import
function popupmenuY_Callback( hObject, eventdata, GuiWindow )
Axes = findobj( 'tag', 'plotarea' );
Selection = get( hObject, 'value' );
YData = [ getappdata( GuiWindow, 'Data' )( :, Selection ) ];
PlotObj = findobj( 'tag', 'plotobject' );
set( PlotObj, 'ydata', YData )
endfunction
function popupmenuY_1_Callback( hObject, eventdata, GuiWindow )
Axes = findobj( 'tag', 'plotarea' );
Selection = get( hObject, 'value' );
Y_1Data = [ getappdata( GuiWindow, 'Data' )( :, Selection ) ];
PlotObj = findobj( 'tag', 'plotobject_1' );
set( PlotObj, 'ydata', Y_1Data )
endfunction
function popupmenuY_2_Callback( hObject, eventdata, GuiWindow )
Axes = findobj( 'tag', 'plotarea' );
Selection = get( hObject, 'value' );
Y_2Data = [ getappdata( GuiWindow, 'Data' )( :, Selection ) ];
PlotObj = findobj( 'tag', 'plotobject_2' );
set( PlotObj, 'ydata', Y_2Data )
endfunction
Related
ThreeJS: Rotate subcomponent of Object3D
I've adapted a custom THREE.Object3D from this SO question. The object is comprised of a line and a ring. I want the ring to be embedded in the plane tangent to the line. However, the code currently does not do that. Instead, the ring is "parallel" to the line in that the line passes through the ring. My attempts to change the ring's direction have been unsuccessful. How do I alter the ring such that it lies in the plane tangent to the line? class KoenderinkCircle extends THREE.Object3D { constructor( dir, origin, length, color, edgeColor, outerRadius, innerRadius ) { super(); this.type = 'KoenderinkCircle'; if ( dir === undefined ) dir = new THREE.Vector3( 0, 0, 1 ); if ( origin === undefined ) origin = new THREE.Vector3( 0, 0, 0 ); if ( length === undefined ) length = 1; if ( color === undefined ) color = 0xffff00; // if ( outerRadius === undefined ) outerRadius = length; // if ( innerRadius === undefined ) innerRadius = 0.5 * outerRadius; // outerRadius = 0.5 * length; outerRadius = length; // innerRadius = 0.9 * outerRadius; innerRadius = 0.3 * outerRadius; this._lineGeometry = new THREE.BufferGeometry(); this._lineGeometry.setAttribute( 'position', new THREE.Float32BufferAttribute( [ 0, 0, 0, 0, 1, 0 ], 3 ) ); // The last argument is the number of segments. this._ringGeometry = new THREE.RingGeometry(innerRadius, outerRadius, 37); // this._ringGeometry.translate( 0, - 0.5, 0 ); this._axis = new THREE.Vector3(); this.line = new THREE.Line( this._lineGeometry, new THREE.LineBasicMaterial( { color: color, toneMapped: false, linewidth: 4 } ) ); this.add( this.line ) this.ring = new THREE.Mesh( this._ringGeometry, new THREE.MeshBasicMaterial( { color: color, toneMapped: false } ) ); // TODO Rotate the ring such that line is normal to plane the ring lies on. this.position.copy( origin ); this.setLength( length, outerRadius, innerRadius ); this.setDirection( dir ); } setDirection( dir ) { // dir is assumed to be normalized if ( dir.y > 0.99999 ) { this.quaternion.set( 0, 0, 0, 1 ); } else if ( dir.y < - 0.99999 ) { this.quaternion.set( 1, 0, 0, 0 ); } else { this._axis.set( dir.z, 0, - dir.x ).normalize(); const radians = Math.acos( dir.y ); this.quaternion.setFromAxisAngle( this._axis, radians ); } } setLength( length, headLength, headWidth ) { if ( headLength === undefined ) headLength = 0.2 * length; if ( headWidth === undefined ) headWidth = 0.2 * headLength; this.line.scale.set( 1, Math.max( 0.0001, length - headLength ), 1 ); // see #17458 this.line.updateMatrix(); this.ring.scale.set( headWidth, headLength, headWidth ); // This gives the ring an offset from the base position // this.ring.position.y = length; this.ring.updateMatrix(); } setColor( color ) { this.line.material.color.set( color ); this.ring.material.color.set( color ); } copy( source ) { super.copy( source, false ); this.line.copy( source.line ); this.ring.copy( source.ring ); return this; } } Edit: Using an answer from How to derive "standard" rotations from three.js when using quaternions?, I used the following and it almost works. But the line still doesn't look quite perpendicular to the ring: // For some reason, the only way to get a direction is by applying a quaternion to (0, 0, 1) const ringDirection = new THREE.Vector3( 0, 0, 1 ); ringDirection.applyQuaternion( this.quaternion ); const perpDirection = new THREE.Vector3(1., 1., -(ringDirection.x + ringDirection.y) / ringDirection.z) //.normalize() this.ring.lookAt(perpDirection); 2 example objects (one in pink, one in teal):
How do I set colors for three js instanced objects?
I have an a-frame component that leverages three js instancing to render a large number of spheres efficiently. Based on examples from the three js library such as https://github.com/mrdoob/three.js/blob/master/examples/webgl_instancing_scatter.html, I should be able to set the colors for each of the instanced renderings individually. I thought I had followed the example but my per instance colors are not taking effect. AFRAME.registerComponent('spheres', { schema: { count: {type: 'number'}, radius: {type: 'number'}, scale: {type: 'number'}, colors: {type: 'array'}, positions: {type: 'array'} }, init: function() { const {count, radius, scale, colors, positions} = this.data; const material = new THREE.MeshNormalMaterial(); const geometry = new THREE.SphereBufferGeometry( radius, 3, 2 ); const instancedGeometry = new THREE.InstancedBufferGeometry().copy(geometry); var instanceColors = []; for ( var i = 0; i < count; i ++ ) { instanceColors.push( Math.random() ); instanceColors.push( Math.random() ); instanceColors.push( Math.random() ); } instancedGeometry.setAttribute("instanceColor", new THREE.InstancedBufferAttribute( new Float32Array( instanceColors ), 3 )) instancedGeometry.computeVertexNormals(); material.vertexColors = true; const matrix = new THREE.Matrix4(); const mesh = new THREE.InstancedMesh( instancedGeometry, material, count ); for ( var i = 0; i < count; i ++ ) { this.setMatrix(positions[i], scale)( matrix ); mesh.setMatrixAt( i, matrix ); } this.el.object3D.add( mesh ); }, What am I doing wrong?
Got it to work with the following based on #prisoner849 example. I had to use MeshPhongMaterial rather than MeshNormalMaterial. Not quite sure why. Also not sure why I need to use an InstancedBufferAttribute and a BufferAttribute for the colors. maybe #prisoner849 can follow up with details. This solution is a bit ugly, hopefully three will provide a cleaner way to tweak instanced colors soon, or maybe there is a better way already and I just dont know about it AFRAME.registerComponent('spheres', { schema: { count: {type: 'number'}, radius: {type: 'number'}, scale: {type: 'number'}, colors: {type: 'array'}, positions: {type: 'array'} }, init: function() { const {count, radius, scale, colors, positions} = this.data; var geometry = new THREE.SphereBufferGeometry(radius); var material = new THREE.MeshPhongMaterial({ flatShading: true }); var colorParsChunk = [ 'attribute vec3 instanceColor;', 'varying vec3 vInstanceColor;', '#include <common>' ].join( '\n' ); var instanceColorChunk = [ '#include <begin_vertex>', '\tvInstanceColor = instanceColor;' ].join( '\n' ); var fragmentParsChunk = [ 'varying vec3 vInstanceColor;', '#include <common>' ].join( '\n' ); var colorChunk = [ 'vec4 diffuseColor = vec4( diffuse * vInstanceColor, opacity );' ].join( '\n' ); material.onBeforeCompile = function ( shader ) { shader.vertexShader = shader.vertexShader .replace( '#include <common>', colorParsChunk ) .replace( '#include <begin_vertex>', instanceColorChunk ); shader.fragmentShader = shader.fragmentShader .replace( '#include <common>', fragmentParsChunk ) .replace( 'vec4 diffuseColor = vec4( diffuse, opacity );', colorChunk ); }; var instanceColors = []; for ( var i = 0; i < count; i ++ ) { instanceColors.push( Math.random() ); instanceColors.push( Math.random() ); instanceColors.push( Math.random() ); } const matrix = new THREE.Matrix4(); const mesh = new THREE.InstancedMesh( geometry, material, count ); var instanceColorsBase = new Float32Array(instanceColors.length); instanceColorsBase.set(instanceColors); geometry.setAttribute( 'instanceColor', new THREE.InstancedBufferAttribute( new Float32Array( instanceColors ), 3 ) ); geometry.setAttribute( 'instanceColorBase', new THREE.BufferAttribute(new Float32Array( instanceColorsBase ), 3 ) ); for ( var i = 0; i < count; i ++ ) { this.setMatrix(positions[i], scale)( matrix ); mesh.setMatrixAt( i, matrix ); } this.el.object3D.add( mesh ); }, setMatrix: function( pos, scaler ) { var position = new THREE.Vector3(); var rotation = new THREE.Euler(); var quaternion = new THREE.Quaternion(); var scale = new THREE.Vector3(); return function ( matrix ) { position.x = pos[0]; position.y = pos[1]; position.z = pos[2]; rotation.x = 0; rotation.y = 0; rotation.z = 0; quaternion.setFromEuler( rotation ); scale.x = scale.y = scale.z = scaler; matrix.compose( position, quaternion, scale ); }; } });
Did you try with the actual same attribute 'color', like in the example (which is blossomGeometry.setAttribute( 'color', new THREE.InstancedBufferAttribute( color, 3 ) ); Because I think it's quite important that the name of the attribute is 'color'.
THREE.JS import a blender OBJ - add material
I have a simple square plate made in Blender. I'm trying to add a simple texture to this object. I tried so many tutorials and code I found on the net, I just cant make it happen my code is <html> <style> body{ margin: 0; overflow: hidden; } </style> <canvas id="myCanvas"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/93/three.min.js"></script> <script src="http://threejs.org/examples/js/loaders/MTLLoader.js"></script> <script src="http://threejs.org/examples/js/loaders/OBJLoader.js"></script> <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script> <script src="UnpackDepthRGBAShader.js"></script> <script src="ShadowMapViewer.js"></script> <script> var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(45 ,window.innerWidth / window.innerHeight, 1, 1000); camera.position.set(0, 5, 14); var renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setClearColor(0xededed); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); var loader = new THREE.TextureLoader(); var texture = loader.load( "./2.jpg" ); // it's necessary to apply these settings in order to correctly display the texture on a shape geometry //texture.wrapS = texture.wrapT = THREE.RepeatWrapping; texture.repeat.set( 0.05, 0.05 ); var controls = new THREE.OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.25; controls.enableZoom = true; var keyLight = new THREE.DirectionalLight(new THREE.Color('hsl(30, 100%, 75%)'), 1.0); keyLight.position.set(-100, 0, 100); var fillLight = new THREE.DirectionalLight(new THREE.Color('hsl(240, 100%, 75%)'), 0.75); fillLight.position.set(100, 0, 100); var backLight = new THREE.DirectionalLight(0xffffff, 1.0); backLight.position.set(100, 0, -100).normalize(); var manager = new THREE.LoadingManager(); manager.onProgress = function ( item, loaded, total ) { console.log( item, loaded, total ); }; var textureLoader = new THREE.TextureLoader( manager ); var textureOBJ = textureLoader.load( './1.jpg' ); var onProgress = function ( xhr ) { if ( xhr.lengthComputable ) { var percentComplete = xhr.loaded / xhr.total * 100; console.log( Math.round(percentComplete, 2) + '% downloaded' ); } }; var onError = function ( xhr ) { console.log(xhr); }; var roundedRectShape = new THREE.Shape(); ( function roundedRect( ctx, x, y, width, height, radius ) { ctx.moveTo( x, y + radius ); ctx.lineTo( x, y + height - radius ); ctx.quadraticCurveTo( x, y + height, x + radius, y + height ); ctx.lineTo( x + width - radius, y + height ); ctx.quadraticCurveTo( x + width, y + height, x + width, y + height - radius ); ctx.lineTo( x + width, y + radius ); ctx.quadraticCurveTo( x + width, y, x + width - radius, y ); ctx.lineTo( x + radius, y ); ctx.quadraticCurveTo( x, y, x, y + radius ); } )( roundedRectShape, 0, 0, 18.5, 18.5, 2 ); addShape( roundedRectShape, 0x008000, -1.41, 0.5, 1, Math.PI / -2, 0, 0, 0.1 ); scene.add(keyLight); scene.add(fillLight); scene.add(backLight); var loader = new THREE.OBJLoader( manager ); loader.load( './3.obj', function ( object ) { object.traverse( function ( child ) { if ( child instanceof THREE.Mesh ) { child.material.map = textureOBJ; } } ); object.position.y = -0.01; object.position.x = 0; object.position.z = 0; scene.add( object ); }, onProgress, onError ); controls.update(); var animate = function () { requestAnimationFrame( animate ); renderer.render(scene, camera); }; animate(); function addShape( shape, color, x, y, z, rx, ry, rz, s ) { var geometry = new THREE.ShapeBufferGeometry( shape ); var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { side: THREE.DoubleSide, map: texture } ) ); mesh.position.set( x, y, z ); mesh.rotation.set( rx, ry, rz ); mesh.scale.set( s, s, s ); scene.add( mesh ); } </script> I'm trying to add this simple png as the texture. anyone can help? plate - example -> http://37.59.53.90:8080/test1.html I've managed to create a cup with texture -> http://37.59.53.90:8080/test.html
It looks like you're using THREE.TextureLoader incorrectly. The texture loader's load() method takes two arguments; - the URL of the image to be loaded, and - a callback The callback is invoked when the texture has loaded and is ready for use. You should restructure your code so that the texture returned in the load() methods callback can be applied to your object. To illustrate this, a quick solution to get textures loading and displaying on your object might look like this: var loader = new THREE.OBJLoader( manager ); // Use a callback, in a similar way to your THREE.OBJLoader new THREE.TextureLoader( manager ).load( './1.jpg' , function(texture) { loader.load( './3.obj', function ( object ) { object.traverse( function ( child ) { if ( child instanceof THREE.Mesh ) { // Assign the loaded texture from the enclosing THREE.TextureLoader to the child material child.material.map = texture; } }); object.position.y = -0.01; object.position.x = 0; object.position.z = 0; scene.add( object ); }, onProgress, onError ); })
how to use three.js sky in forge
I want to build sky scene in forge viewer,I learn the way How can you add text to the Forge Viewer with three.js?So I use threejs-full-es6 to import Sky,and then new sky,but when I add sky object in scene.It report errors: (THREE.Object3D.add: object not an instance of THREE.Object3D). I found new sky by this way the object is different from commen three.js. Through import sky from threejs-full-es6,the obj is only mesh message.But commen three.js sky obj include mesh and uniforms.forge error: three.js: import { Sky,SphereBufferGeometry} from './Three.es.min'; initSky() { var sky, sunSphere; var scene = viewer.impl.scene; sky = new Sky(); scene.add( sky ); // Add Sun Helper sunSphere = new THREE.Mesh( new SphereBufferGeometry( 20000, 16, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) ); sunSphere.position.y = - 700000; sunSphere.visible = false; scene.add( sunSphere ); /// GUI var effectController = { turbidity: 10, rayleigh: 2, mieCoefficient: 0.005, mieDirectionalG: 0.8, luminance: 1, inclination: 0.49, // elevation / inclination azimuth: 0.25, // Facing front, sun: ! true }; var distance = 400000; function guiChanged() { var uniforms = sky.uniforms; uniforms.turbidity.value = effectController.turbidity; uniforms.rayleigh.value = effectController.rayleigh; uniforms.luminance.value = effectController.luminance; uniforms.mieCoefficient.value = effectController.mieCoefficient; uniforms.mieDirectionalG.value = effectController.mieDirectionalG; var theta = Math.PI * ( effectController.inclination - 0.5 ); var phi = 2 * Math.PI * ( effectController.azimuth - 0.5 ); sunSphere.position.x = distance * Math.cos( phi ); sunSphere.position.y = distance * Math.sin( phi ) * Math.sin( theta ); sunSphere.position.z = distance * Math.sin( phi ) * Math.cos( theta ); sunSphere.visible = effectController.sun; sky.uniforms.sunPosition.value.copy( sunSphere.position ); renderer.render( scene, camera ); } guiChanged(); }
Three JS animesh rewrite or fix. It won't play in the new version even if MorphAnimMesh.js is included
Here it is the code, it is the "webgl_terrain_dynamic" example rewriten to include the birds. This is the new example, without the birds: https://threejs.org/examples/webgl_terrain_dynamic.html This is the old example that works with birds - and the old version of three.js: http://alteredqualia.com/three/examples/webgl_terrain_dynamic.html This is the code I've made. It all works but the birds do not move and they also look a bit pixelated on textures (especially the parrot). // MORPHS function addMorph( geometry, speed, duration, x, y, z ) { var material = new THREE.MeshLambertMaterial( { color: 0xffaa55, morphTargets: true, vertexColors: THREE.FaceColors } ); var meshAnim = new THREE.MorphAnimMesh( geometry, material ); meshAnim.speed = speed; meshAnim.duration = duration; meshAnim.time = 600 * Math.random(); meshAnim.position.set( x, y, z ); meshAnim.rotation.y = Math.PI/2; meshAnim.castShadow = true; meshAnim.receiveShadow = false; scene.add( meshAnim ); morphs.push( meshAnim ); //renderer.initWebGLObjects( scene ); } function morphColorsToFaceColors( geometry ) { if ( geometry.morphColors && geometry.morphColors.length ) { var colorMap = geometry.morphColors[ 0 ]; for ( var i = 0; i < colorMap.colors.length; i ++ ) { geometry.faces[ i ].color = colorMap.colors[ i ]; } } } var loader = new THREE.JSONLoader(); var startX = -3000; loader.load( "models/animated/parrot.js", function( geometry ) { morphColorsToFaceColors( geometry ); addMorph( geometry, 250, 500, startX -500, 500, 700 ); addMorph( geometry, 250, 500, startX - Math.random() * 500, 500, -200 ); addMorph( geometry, 250, 500, startX - Math.random() * 500, 500, 200 ); addMorph( geometry, 250, 500, startX - Math.random() * 500, 500, 1000 ); } ); loader.load( "models/animated/flamingo.js", function( geometry ) { morphColorsToFaceColors( geometry ); addMorph( geometry, 500, 1000, startX - Math.random() * 500, 350, 40 ); } ); loader.load( "models/animated/stork.js", function( geometry ) { morphColorsToFaceColors( geometry ); addMorph( geometry, 350, 1000, startX - Math.random() * 500, 350, 340 ); } ); // PRE-INIT // renderer.initWebGLObjects( scene ); ... in function render() I also added this: for ( var i = 0; i < morphs.length; i ++ ) { morph = morphs[ i ]; morph.updateAnimation( 1000 * delta ); morph.position.x += morph.speed * delta; if ( morph.position.x > 2000 ) { morph.position.x = -1500 - Math.random() * 500; } I als found this post that doesn't really help me: https://github.com/mrdoob/three.js/pull/8488 We need this code to export VR movies to help children in foster homes learn about emotions (the solution is more complex but the birds are really nice, we know - from experience - they'll love them). I am no expert in Three.js and I do what I can. Thank you for your help and a respectful answer. :) You guys really helped me, I searched a lot to make the code so far. :)
:) I just solved it this way: In MorphAnimMesh.js I defined the variable clip like this: var clip = this.geometry.animations[ 0 ]; instead of var clip = THREE.AnimationClip.findByName( this, label ); and then called mesh.playAnimation(0.0003); in the function where I add the morph. I hope it helps somebody. :)