I am having challenges with my three.js shape, instead of having say 12 lines forming 3 rectangles I end up having 13 lines.
Here is the code:
function init() {
var material = new THREE.LineBasicMaterial({ linewidth: 2, color: 0xDF0101,opacity: 0.25 });
var geometry = new THREE.Geometry();
geometry.vertices.push(
/* First Rectangle */
new THREE.Vector3( -17.561942485257, 98.685013457785, 50.448760648027 ),
new THREE.Vector3( -18.901369249844, 100.2812801165, 50.448760648027 ),
new THREE.Vector3( -18.901369249844, 100.2812801165, 50.448760648027 ),
new THREE.Vector3( -18.901369249844, 100.2812801165, -53.161059607598 ),
new THREE.Vector3( -18.901369249844, 100.2812801165, -53.161059607598 ),
new THREE.Vector3( -17.561942485257, 98.685013457785, -53.161059607598 ),
new THREE.Vector3( -17.561942485257, 98.685013457785, -53.161059607598 ),
new THREE.Vector3( -17.561942485257, 98.685013457785, 50.448760648027 ),
/* Second Rectangle */
new THREE.Vector3( -17.561942485257, 98.685013457785, 50.448760648027 ),
new THREE.Vector3( -17.561942485257, 98.685013457785, -53.161059607598 ),
new THREE.Vector3( -17.561942485257, 98.685013457785, -53.161059607598 ),
new THREE.Vector3( -0.81522210995508, 84.63284656744, -53.161059607598 ),
new THREE.Vector3( -0.81522210995508, 84.63284656744, -53.161059607598 ),
new THREE.Vector3( -0.81522210995508, 84.63284656744, 50.448760648027 ),
new THREE.Vector3( -0.81522210995508, 84.63284656744, 50.448760648027 ),
new THREE.Vector3( -17.561942485257, 98.685013457785, 50.448760648027 ),
/* Third Rectangle */
new THREE.Vector3( -16.032964538566, 43.960245911126, 50.448760648027 ),
new THREE.Vector3( -15.664628453558, 48.170346627754, 50.448760648027 ),
new THREE.Vector3( -15.664628453558, 48.170346627754, 50.448760648027 ),
new THREE.Vector3( -15.664628453558, 48.170346627754, -53.161059607598 ),
new THREE.Vector3( -15.664628453558, 48.170346627754, -53.161059607598 ),
new THREE.Vector3( -16.032964538566, 43.960245911126, -53.161059607598 ),
new THREE.Vector3( -16.032964538566, 43.960245911126, -53.161059607598 ),
new THREE.Vector3( -16.032964538566, 43.960245911126, 50.448760648027 ),
);
var line = new THREE.Line( geometry, material );
scene.add( line );
}
Here is the result:
With full code the object looks like this:
All line on the side or that cross (diagonally) the diagram are all unwanted.
The above diagram is the centrally genarated face of the following 3D object, and it must be the same as the front face of the object below:
I would like some help on the best method to resolve this issue and a reason why its happening?
Its because you're using THREE.Line. In this case you should use THREE.LineSegements.
To achieve the desired result, you should just need to change the following line:
var line = new THREE.Line( geometry, material );
to:
var line = new THREE.LineSegments( geometry, material );
Related
Is there something equivalent to CSS's overflow: hidden in aframe? For example, can I constrain an entire to be within a bounding and have everything that is bigger than the box geometry to be hidden/invisible?
There is clipping planes: https://threejs.org/examples/webgl_clipping.html
https://github.com/mrdoob/three.js/blob/master/examples/webgl_clipping.html
// ***** Clipping planes: *****
var localPlane = new THREE.Plane( new THREE.Vector3( 0, - 1, 0 ), 0.8 );
var globalPlane = new THREE.Plane( new THREE.Vector3( - 1, 0, 0 ), 0.1 );
// Geometry
var material = new THREE.MeshPhongMaterial( {
color: 0x80ee10,
shininess: 100,
side: THREE.DoubleSide,
// ***** Clipping setup (material): *****
clippingPlanes: [ localPlane ],
clipShadows: true
} );
var geometry = new THREE.TorusKnotBufferGeometry( 0.4, 0.08, 95, 20 );
object = new THREE.Mesh( geometry, material );
Hey im creating a type go mountain in my scene and want to let the tops of it wiggle to specific values. Now im trying to access the vertices I've set before and specify them again over time trough the update function. How do I access them probably and recalculate the faces?
geom1.vertices = [
new THREE.Vector3( -1000, -300, 0 ),
new THREE.Vector3( -1000, 0, 0 ),
new THREE.Vector3( -20, 120, 0 ),
new THREE.Vector3( 60, 85, 0 ),
new THREE.Vector3( 140, 100, 0 ),
new THREE.Vector3( 1000, 0, 0 ),
new THREE.Vector3( 1000, -300, 0 ),
new THREE.Vector3( 0, -300 , 0 ),
];
geom1.faces = [
new THREE.Face3( 7, 0, 1 ),
new THREE.Face3( 7, 1, 2 ),
new THREE.Face3( 7, 2, 3 ),
new THREE.Face3( 7, 3, 4 ),
new THREE.Face3( 7, 4, 5 ),
new THREE.Face3( 7, 5, 6 ),
];
geom1.computeFaceNormals();
geom1.dynamic = true;
var material1 = new THREE.MeshBasicMaterial( {
color: 0x7dae81,
side: THREE.DoubleSide,
} );
hill1 = new THREE.Mesh( geom1, material1);
in the update function im doing this
geom1.vertices[2].y += 0.1;
geom1.verticesNeedUpdate;
You need to set
geometry.verticesNeedUpdate = true;
For more information, see verticesNeedUpdate in Three.js.
Also, Geometry does not have a dynamic property.
three.js r.85
Update answer for version:
Three.js r.114
let material = new THREE.MeshPhongMaterial ({
color: 0xffa94b,
opacity: 0.30,
side: THREE.DoubleSide,
depthWrite: true,
flatShading: true
});
let geometry = new THREE.BufferGeometry();
const vertices = new Float32Array([
v0.x, v0.y, v0.z,
v1.x, v1.y, v1.z,
v2.x, v2.y, v2.z,
v3.x, v3.y, v3.z,
etc...
]);
geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
geometry.setIndex(
[0, 1, 2,
0, 2, 3,
0, 3, 1,
etc...]);
g_myMesh = new THREE.Mesh(geometry, material);
function update_vertices(mesh){
let numVertices = mesh.geometry.attributes.position.count;
for (let v = 0; v < numVertices; v++) {
let o = mesh.geometry.attributes.position;
// Update vertex position, do whatever:
let p = new THREE.Vector3(o.getX(v), o.getY(v)+25.0, o.getZ(v));
mesh.geometry.attributes.position.setXYZ(v, p.x, p.y, p.z);
}
// set to true each time you modify the positions:
mesh.geometry.attributes.position.needsUpdate = true;
mesh.geometry.computeVertexNormals();
}
function animationLoop(){
...
updateVertices(g_myMesh);
...
}
How can i draw object axes. I am refering at the mesh local axes and not the world axes. I know that using:
function drawlines(){
var material = new THREE.LineBasicMaterial({
color: 0x0000ff
});
var geometry = new THREE.Geometry();
geometry.vertices.push(
new THREE.Vector3( 100, 0, 0 ),
new THREE.Vector3( 0, 0, 0 )
);
var line = new THREE.Line( geometry, material );
scene.add( line );
var material = new THREE.LineBasicMaterial({
color: 0x00ff00
});
var geometry = new THREE.Geometry();
geometry.vertices.push(
new THREE.Vector3( 0, 100, 0 ),
new THREE.Vector3( 0, 0, 0 )
);
var line = new THREE.Line( geometry, material );
scene.add( line );
var material = new THREE.LineBasicMaterial({
color: 0xff0000
});
var geometry = new THREE.Geometry();
geometry.vertices.push(
new THREE.Vector3( 0, 0, 100 ),
new THREE.Vector3( 0, 0, 0 )
);
var line = new THREE.Line( geometry, material );
scene.add( line );
}
draws lines at XYZ respectively. What i need is to draw the XYZ axis of the model. How can i do that. I load the model with this code
var loader = new THREE.JSONLoader();
loader.load( "https://threejs.org/examples/models/animated/horse.js", function ( geometry ) {
var material = new THREE.MeshLambertMaterial( {
vertexColors: THREE.FaceColors,
morphTargets: true,
overdraw: 0.5
} );
mesh = new THREE.Mesh( geometry, material );
mesh.scale.set( 1.5, 1.5, 1.5 );
scene.add( mesh );
mixer = new THREE.AnimationMixer( mesh );
var clip = THREE.AnimationClip.CreateFromMorphTargetSequence( 'gallop', geometry.morphTargets, 30 );
mixer.clipAction( clip ).setDuration( 1 ).play();
} );
If I get you correctly, you can use THREE.AxisHelper(). Just create an instance of it and then add it to your model.
jsfiddle example.
var camera, scene, renderer, controls;
var sphere, cube;
init();
animate();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(0, 5, 1.5).setLength(100);
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
//renderer.setClearColor(0xcccccc);
document.body.appendChild(renderer.domElement);
controls = new THREE.OrbitControls(camera, renderer.domElement);
var plane = new THREE.GridHelper(100, 10);
scene.add(plane);
sphere = new THREE.Mesh(new THREE.SphereGeometry(10, 16, 8), new THREE.MeshBasicMaterial({color: "red", wireframe: true}));
sphere.position.set(-20, 0, 0);
cube = new THREE.Mesh(new THREE.BoxGeometry(10, 10, 10), new THREE.MeshBasicMaterial({color: "green", wireframe: true}));
cube.position.set(20, 0, 0);
var worldAxis = new THREE.AxesHelper(20);
scene.add(worldAxis);
scene.add(sphere);
scene.add(cube);
var sphereAxis = new THREE.AxesHelper(20);
sphere.add(sphereAxis);
var cubeAxis = new THREE.AxesHelper(20);
cube.add(cubeAxis);
}
var delta;
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
renderer.render(scene, camera);
}
I have this code, it works perfectly:
mesh = new THREE.Mesh( new THREE.SphereGeometry( 500, 60, 40 ), new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/texture01.jpg' ) } ) );
mesh.scale.x = -1;
scene.add( mesh );
But when the material change to MeshLambertMaterial, the object is not displayed and no shows errors.
I need it for this type of material to play with the opacity ..
Thanks!!
Im trying to give multiple faces to a cube in Three.js using WebGL. Im sure the key lies in the
var geometry = new THREE.CubeGeometry( 80, 80, 80, 4, 4, 4, materials, true,true,false,true,true,true);
but I dont understand how to use the "sides" variables.
Here is my demo:
http://enriquemorenotent.com/demos/cube/
Easier than I thought!
var materials = [
new THREE.MeshLambertMaterial( { ambient: 0xffffff, map: THREE.ImageUtils.loadTexture( '1.png' ) } ),
new THREE.MeshLambertMaterial( { ambient: 0xffffff, map: THREE.ImageUtils.loadTexture( '2.png' ) } ),
new THREE.MeshLambertMaterial( { ambient: 0xffffff, map: THREE.ImageUtils.loadTexture( '3.png' ) } ),
new THREE.MeshLambertMaterial( { ambient: 0xffffff, map: THREE.ImageUtils.loadTexture( '4.png' ) } ),
new THREE.MeshLambertMaterial( { ambient: 0xffffff, map: THREE.ImageUtils.loadTexture( '5.png' ) } ),
new THREE.MeshLambertMaterial( { ambient: 0xffffff, map: THREE.ImageUtils.loadTexture( '6.png' ) } )
];
var geometry = new THREE.CubeGeometry( 80, 80, 80, 3, 3, 3, materials);
cube = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial());