Creating a new object in three.js - javascript

I'm currently working on a project that involves making 3Dobjects in Threejs, based of databases.
I already have the connection etc, but it keeps failing when I try to create a new object.
this.type = 'CustomObject';
let shape = new THREE.Shape();
const maxSize = coords.reduce((prev, current) => (Math.abs(prev.value) > Math.abs(current.value)) ? prev : current); // max Size but Abs
// console.log("Max size before check : "+ maxSize.value);
//Check weither maxSize is positive or negative.
let height = Math.abs(maxSize.value);
shape.moveTo(0, 0);
for (let i = 0; i < coords.length; i++) {
// console.log(coords[i]);
shape.lineTo(coords[i].id, coords[i].value);
}
shape.lineTo(coords[coords.length - 1].id, -height - 3);
shape.lineTo(0, -height - 3);
shape.lineTo(0, 0);
// let geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );
let extrudeSettings = {
steps: 4,
amount: 20,
bevelEnabled: false,
bevelThickness: 1,
bevelSize: 1,
bevelSegments: 1
};
this.geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
this.material = new THREE.MeshBasicMaterial({color: 0xCbcbcb});
let object = new THREE.Mesh( this.geometry, this.material );
this.createdGraph = object;
console.log(this.createdGraph.Object3D);
this.scene.add(this.createdGraph);
}
This is just part of the code, I know it's not the best. But I would like to work it before I clean it.
It's writen with ES6 in mind.
The problem is that if you execute the code, it does create the figure I'd like to have.
A screengrab of the object created by the code.
But if I try to add it to A-Frame ( because I've worked with it before), it keeps giving me the error that I can't add an object without an Object3D to the scene or 'this.updateMorphTargets is not a function ' .
Anyone have any ideas ?
PS I've also tried this https://stackoverflow.com/a/31924233 idea, but that comes back with the ' this.updateMorphTargets is not a function' error.
Thanks :)

I'm not sure which parts give you the error,
I've copied Your code to a fiddle, added 3 coords, and it's working.
Judging from Your code, You've got bad scene references, in a-frame it's
this.el.sceneEl
assuming this is any entity, and this.scene does not refer to the scene.
Furthermore refer to three.js objects as object3D, not Object3D
I've only put the three.js object creation to a aframe component:
AFRAME.registerComponent("foo",{
init:function(){
//Your code here
}
});
and placed an entity:
<a-entity foo> </a-entity>
Also I've placed the object by getting the scene reference, before adding:
this.el.sceneEl.object3D.add(object)

Related

How to extend an existing straight line in Three.js

I have an existing line initiated
// material
const material = new THREE.LineBasicMaterial({ color: 0xffffff });
// array of vertices
vertices.push(new THREE.Vector3(0, 0, 0));
vertices.push(new THREE.Vector3(0, 0, 5));
//
const geometry = new THREE.BufferGeometry().setFromPoints(vertices);
const line = new THREE.Line(geometry, material);
And what I want to do is extend this line following its initiation. I've read this page on how to update things and I don't think it fits this situation because instead of adding vertices to my shape, I want to move them. Then again, it's very likely I misunderstood. I've tried deleting the line and then redrawing it longer, but I can't get it to work without my browser crashing.
The BufferGeometry exposes its vertices through its positions BufferAttribute. To change the positions, you should do something like the following:
//
// Assuming we want to move your line segment (0, 0, 0)-(0, 0, 5) by
// one unit in the direction of positive x, to (1, 0, 0)-(1, 0, 5).
//
// Get a reference to the "position" buffer attribute
const pos = geometry.getAttribute("position");
// Set the new positions
pos.setXYZ(0, vertices[0].x + 1, vertices[0].y, vertices[0].z);
pos.setXYZ(1, vertices[1].x + 1, vertices[1].y, vertices[1].z);
// Update the vertex buffer in graphics memory
pos.needsUpdate = true;
// Update the bounds to support, e.g., frustum culling
geometry.computeBoundingBox();
geometry.computeBoundingSphere();
Other methods exist, such as modifying the attribute's backing array directly and copying in a new array, but the general process will be the same.

Why javascript Cannot read property width of textureImage

I am trying to render image texture dynamically but in console it displays Uncaught TypeError: Cannot read property 'width' of undefined. few suggest to make needsUpdate = true to false. When I am doing so some unpleasing black patch is appearing .But I need it true. how can i do so?
Actual code is very big i am pointing where problem occurs..
var g = new THREE.PlaneGeometry(100,100);
var tx =THREE.ImageUtils.loadTexture(imgUrl,undefined,callback,callbackError);
var m = new THREE.MeshBasicMaterial({
map:tx
});
m.map.needsUpdate = true; //1
tx.needsUpdate = true; //2
////if 1 and 2 is commented then its ok but rendering is not good
var b = THREE.SceneUtils.createMultiMaterialObject(g,[
m
,new THREE.MeshBasicMaterial({wireframeLinewidth:3,color:0x222222,wireframe:true})
]);
There may be a situation when renderer tries to use you texture before it is loaded. When you do
var tx =THREE.ImageUtils.loadTexture(imgUrl,undefined,callback,callbackError);
the texture is returned but image itself is not yet loaded. So renderer tries to take width and height to find out is your texture power of 2 and throws an error in this moment.
You may try to wrap creation of your object and placing it to the scene into the callback function and pass it as the third parameter to the loadTexture method. Something like that:
var geometry = new THREE.PlaneGeometry(100, 100);
var tx =THREE.ImageUtils.loadTexture(imgUrl, undefined, function(texture){
var material = new THREE.MeshBasicMaterial({
map: texture
});
var b = THREE.SceneUtils.createMultiMaterialObject(
geometry,
[
material,
new THREE.MeshBasicMaterial({wireframeLinewidth:3,color:0x222222,wireframe:true})
]
);
}, callbackError);

Updating Terrain Geometry with Three.js

I'm experimenting with Bjørn Sandvik's really great process for importing terrain data into a scene.
Check it out:
http://blog.thematicmapping.org/2013/10/terrain-building-with-threejs.html
var terrainLoader = new THREE.TerrainLoader();
terrainLoader.load('../assets/jotunheimen.bin', function(data) {
var geometry = new THREE.PlaneGeometry(60, 60, 199, 199);
for (var i = 0, l = geometry.vertices.length; i < l; i++) {
geometry.vertices[i].z = data[i] / 65535 * 10;
}
var material = new THREE.MeshPhongMaterial({
color: 0xdddddd,
wireframe: true
});
var plane = new THREE.Mesh(geometry, material);
scene.add(plane);
});
My intent is to use this to display elevation data from a time series, so multiple .bin files will be loaded to provide data representing a period of several years to show change over time.
I am having difficulties updating the geometry with new data. I think that my difficulties stem from the plane and geometry variables being defined inside of a function, meaning that they are undefined in the global context. So later when I call those variables they don't have any value associated with them.
Does anyone have an idea of how I can update this geometry with new data loaded using the TerrainLoader?
anything you .add() to the scene object is visible as an element of the scene.children array -- to you can still reference your plane and the geometry of it as plane.geometry -- the the plane is the only object in the scene, it will probably be scene.children[0].geometry
See this page: https://github.com/mrdoob/three.js/wiki/Updates for hints on how to let THREE know the geometry is changing

how to properly animate/tween a line in THREE.js using TweenLite?

I want to tween a 3D line using THREE.JS and TweenLite. But the approach that works well with e.g. the position of a sphere does not work out here. I do not know why.
// add a line to the scene using THREE.js
var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(0, 0, 0));
geometry.vertices.push(new THREE.Vector3(500, 500, 500));
var line = new THREE.Line(geometry, new THREE.LineBasicMaterial());
scene.add( line );
// using TweenLite to animate
var tl = new TimelineLite();
var target = { x: 0, y: 0, z:0 };
line.geometry.verticesNeedUpdate = true;
tl.add(TweenLite.to(line.geometry.vertices[1] , 1, target));
tl.play();
Result: Nothing happens. Why?
PS. The reason might be explained in this post, but I do not understand it.
Found the solution myself: Above the vertex is flagged as needing an update, which happens once in the line line.geometry.verticesNeedUpdate = true;. But this flag needs to be set after each change in the vertex. This can be achieved by putting the update line in the onUpdate function. Now, the line will be called after each update of the vertex.
target.onUpdate = function () {
line.geometry.verticesNeedUpdate = true;
};

How can I set the position of a mesh before I add it to the scene in three.js

In three.js, I want to add a mesh to a position in the scene
I've tried:
// mesh is an instance of THREE.Mesh
// scene is an instance of THREE.Scene
scene.add(mesh)
scene.updateMatrixWorld(true)
mesh.matrixWorld.setPosition(new THREE.Vector3(100, 100, 100))
scene.updateMatrix()
BUT it didn't affect anything.
What should I do ?
I would recommend you to check the documentation over here:
http://threejs.org/docs/#Reference/Objects/Mesh
As you can see on the top of the docu-page, Mesh inherits from "Object3D". That means that you can use all methods or properties that are provided by Object3D. So click on the "Object3D" link on the docu-page and check the properties list. You will find the property ".position". Click on ".position" to see what data-type it is. Paha..its Vector3.
So try to do the following:
// scene is an instance of THREE.Scene
scene.add(mesh);
mesh.position.set(100, 100, 100);
i saw it on a github earlier. (three.js r71 )
mesh.position.set(100, 100, 100);
and can be done for individuals
mesh.position.setX(200);
mesh.position.setZ(200);
reference: https://threejs.org/docs/#api/math/Vector3
detailed explanation is below:
since mesh.position is "Vector3". Vector3() has setX() setY() and setZ() methods. we can use it like this.
mesh.position = new THREE.Vector3() ; //see position is Vector3()
vector1 = new THREE.Vector3();
mesh.position.setX(100); //or this
vector1.setX(100) // because all of them is Vector3()
camera1.position.setZ(100); // or this
light1.position.setY(100) // applicable to any object.position
I prefer to use Vector3 to set position.
let group = new THREE.Group();
// position of box
let vector = new THREE.Vector3(10, 10, 10);
// add wooden Box
let woodenBox = new THREE.Mesh(boxGeometry, woodMaterial);
//update postion
woodenBox.position.copy(vector);
// add to scene
group.add(woodenBox)
this.scene.add(group);
If some one looking for way to update position from Vector3
const V3 = new THREE.Vector3(0,0,0) // Create variable in zero position
const box = new THREE.Mesh(geometry, material) // Create an object
Object.assign(box.position, V3) // Put the object in zero position
OR
const V3 = new THREE.Vector3(0,0,0) // Create variable in zero position
const box = new THREE.Mesh(geometry, material) // Create an object
box.position.copy(V3)

Categories

Resources