var ShipGeometry = new THREE.Geometry();
var ShipModule1geo = new THREE.SphereGeometry( 150.0, 40, 30 );
ShipGeometry.merge(ShipModule1geo); // this works
var ShipModule2geo = new THREE.BoxGeometry( 5.0, 5.0, 600, 1, 1, 1 );
var matrix = new THREE.Matrix4().makeTranslation(0,0,450);
ShipGeometry.merge(ShipModule2geo,matrix); // this works too
var ShipModule3geo = new THREE.CylinderGeometry( 150, 150, 20, 32 );
var matrix = new THREE.Matrix4().makeTranslation(0, 0, 850).makeRotationZ(Math.PI/2);
ShipGeometry.merge(ShipModule3geo,matrix); // only rotation is applyed
shipMesh = new THREE.Mesh( ShipGeometry, ShipMaterial );
....
My question, why is applyed only makeTranslation(0, 0, 850), not makeRotationZ(Math.PI/2) in last case?
How to apply both before merging?
You can apply both matrices like this:
var matrix = new THREE.Matrix4();
matrix.multiply( new THREE.Matrix4().makeTranslation(0, 0, 850) );
matrix.multiply( new THREE.Matrix4().makeRotationZ(Math.PI/2) );
Related
I wondering is it posssible to add group of model group from scenebuilder. Initially I used a overlay.addMesh but I wanted to interact with a custom object that I created. Unfortunately the object must be a grouping. This is my code. Nothing appear on my Viewer.
this.sceneBuilder = await this.viewer.loadExtension(
"Autodesk.Viewing.SceneBuilder"
);
this.modelBuilder = await this.sceneBuilder.addNewModel({
modelNameOverride: "Beacon",
conserveMemory: false,
});
const sphereGeometry = new THREE.BufferGeometry().fromGeometry(
new THREE.SphereGeometry(5, 8, 8)
);
const sphereMaterial = new THREE.MeshPhongMaterial({
color: new THREE.Color(0.647, 0.165, 0.165),
});
this.meshBeacon = new THREE.Mesh(sphereGeometry, sphereMaterial);
this.meshBeacon2 = new THREE.Mesh(sphereGeometry, sphereMaterial);
this.meshBeacon.matrix = new THREE.Matrix4().compose(
position1,
quaternion,
scale
);
this.meshBeacon2.matrix = new THREE.Matrix4().compose(
position2,
quaternion,
scale
);
this.group = new THREE.Group();
this.group.add(this.meshBeacon);
this.group.add(this.meshBeacon2);
console.log(this.group);
this.group.dbId = 666666;
this.modelBuilder.addMesh(this.group);
We need to create single Geometry first. All done by this code.
let modelGeometry = new THREE.Geometry();
const globalMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const head = new THREE.SphereGeometry(0.5, 32, 16);
const body = new THREE.SphereGeometry(0.5, 32, 16);
const textGeometry = new THREE.TextGeometry("text ID", {
font: "monaco",
size: 1,
height: 0,
curveSegments: 3,
});
textGeometry.computeBoundingBox();
const textMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const workerId = new THREE.Mesh(textGeometry, textMaterial);
const headMesh = new THREE.Mesh(head, globalMaterial);
const bodyMesh = new THREE.Mesh(body, globalMaterial);
headMesh.matrix.setPosition(new THREE.Vector3(0, 0, 3));
bodyMesh.matrix.scale(new THREE.Vector3(1, 1, 4));
// bodyMesh.matrix.scale(new THREE.Vector3(0.1, 0.1, 0.1));
modelGeometry.merge(headMesh.geometry, headMesh.matrix);
modelGeometry.merge(bodyMesh.geometry, bodyMesh.matrix);
modelGeometry.merge(workerId.geometry, workerId.matrix);
I want to find point of intersection curve and line. Created raycast, but it doesn't work well. The point of the ray is far from the actual intersection.
Webgl 1, threejs 0.109
var sartPoint = new THREE.Vector3( -30, -50, 0 );
var endPoint = new THREE.Vector3( 50, 80, 0 );
var geometry = new THREE.Geometry();
geometry.vertices.push(sartPoint);
geometry.vertices.push(endPoint);
var materialTmp = new THREE.LineBasicMaterial( { color: 0xffffff, linewidth: 5 } );
var itemTmp = new THREE.Line( geometry, materialTmp );
_this.add( itemTmp, 'lines' );
scene.updateMatrixWorld()
var curve = new THREE.EllipseCurve(
0, 0, // ax, aY
10, 10, // xRadius, yRadius
0, 2 * Math.PI, // aStartAngle, aEndAngle
false, // aClockwise
0 // aRotation
);
var points = curve.getPoints( 10 );
var geometry = new THREE.BufferGeometry().setFromPoints( points );
var material = new THREE.LineBasicMaterial( { color : 0xff00ff } );
var ellipse = new THREE.Line( geometry, material );
scene.add( ellipse );
var raycaster = new THREE.Raycaster(sartPoint, endPoint.clone().normalize());
var intersects = raycaster.intersectObject( ellipse );
console.log(intersects);
if(intersects.length > 0){
// FIRST dot of intersect
var dotGeometry2 = new THREE.Geometry();
dotGeometry2.vertices.push(intersects[0].point);
var dotMaterial2 = new THREE.PointsMaterial( { size: 5, color: 0x00ff00 } );
var dot2 = new THREE.Points( dotGeometry2, dotMaterial2 );
_this.add( dot2, 'points' );
}
The second argument to the Raycaster constructor is a direction vector. Instead of:
endPoint.clone().normalize()
I think you want:
endPoint.clone().sub(startPoint).normalize()
It is work if
curve.getPoints( 10 );
When
curve.getPoints( 100 );
That doesn't work.
I want to draw a ring with the help of ExtrudeGeometry.
Ring3D = function(innerRadius, outerRadius, heigth, Segments) {
var extrudeSettings = {
amount: heigth,
bevelEnabled: false,
curveSegments: Segments
};
var arcShape = new THREE.Shape();
arcShape.moveTo(outerRadius, 0);
arcShape.absarc(0, 0, outerRadius, 0, Math.PI * 2, false);
var holePath = new THREE.Path();
holePath.moveTo(innerRadius, 0);
holePath.absarc(0, 0, innerRadius, 0, Math.PI * 2, true);
arcShape.holes.push(holePath);
var geometry = new THREE.ExtrudeGeometry(arcShape, extrudeSettings);
var material = new THREE.MeshPhongMaterial({
color: 0x00ffff
});
var mesh = new THREE.Mesh(geometry, material);
mesh.rotation.x = Math.PI / 2;
mesh.position.y = heigth / 2;
var object = new THREE.Object3D;
object.add(mesh);
return object;
}
The resulting figure has visible scars. And the cylinder and torus such scars not. How to get rid of them? Example here.
with geometry.computeVertexNormals();
var shape = new THREE.Shape();
shape.moveTo(0, 0);
shape.lineTo(0, 10);
shape.quadraticCurveTo(35, 30, 0, 50);
shape.lineTo(0, 60);
shape.quadraticCurveTo(48, 30, 0, 0);
var extrudeSettings = {
amount : 20,
steps : 10,
bevelEnabled: false,
curveSegments: 8
};
var geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );
var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { color: '0x804000' ,transparent: true,opacity: 0.2} ) );
scene.add( mesh );
You need to .computeVertexNormals() from your geometry. But it seems there is some issue (with a solution) explained here: https://github.com/mrdoob/three.js/issues/323. I am not sure if it will work in your case.
I have found a comment in the code of ExtrudeGeometry:
this.computeFaceNormals();
// can't really use automatic vertex normals
// as then front and back sides get smoothed too
// should do separate smoothing just for sides
//this.computeVertexNormals();
So it seems it is not supported now :(
I'm having an issue where it looks like the cube and sphere are clipping with the plane. It seems to happen when I move the cube (using the keyboard) toward the back of the scene. It also happens when I use the trackball controls to move around the scene. Sometimes the cube and sphere are visible even when I turn the camera so I am looking at the bottom of the plane.
Some code that might be of use, contains camera variables, creation of plane, sphere, and cube. I have images too: http://imgur.com/0VlZLmP
//CAMERA
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var VIEW_ANGLE = 45;
var ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT;
var NEAR = 0.1;
var FAR = 20000;
//Renderer
ShapeShifter.renderer = new THREE.CanvasRenderer();
//Sphere
var sphereGeometry = new THREE.SphereGeometry( 50, 32, 16 );
var sphereMaterial = new THREE.MeshLambertMaterial( { color: 0x8888FF, overdraw: true } );
ShapeShifter.sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
ShapeShifter.sphere.position.set( 100, 50, -10 );
ShapeShifter.scene.add( ShapeShifter.sphere );
//Cube
var cubeGeometry = new THREE.CubeGeometry( 50, 50, 50 );
var cubeMaterial = new THREE.MeshBasicMaterial( { color: 0xFF4422 } );
ShapeShifter.cube = new THREE.Mesh( cubeGeometry, cubeMaterial );
ShapeShifter.scene.add( ShapeShifter.cube );
ShapeShifter.cube.position.set( -40, 50, 200 );
//Floor
var floorGeometry = new THREE.PlaneGeometry( 1000, 1000 );
var floorMaterial = new THREE.MeshBasicMaterial( { color: 0x4DBD33, overdraw: true } );
ShapeShifter.floor = new THREE.Mesh( floorGeometry, floorMaterial );
ShapeShifter.floor.material.side = THREE.DoubleSide;
ShapeShifter.floor.position.y = 0;
ShapeShifter.floor.rotation.x = Math.PI / 2;
ShapeShifter.scene.add( ShapeShifter.floor );
This is a known limitation of CanvasRenderer.
You can reduce these artifacts by increasing the tessellation of your geometry -- particularly the plane.
var floorGeometry = new THREE.PlaneGeometry( 1000, 1000, 10, 10 ); // will help
var cubeGeometry = new THREE.CubeGeometry( 50, 50, 50, 2, 2, 2 ); // may help
I'm having difficulties constructing a hollow cylinder in Three.js.
Should I go and construct it using CSG or by stitching the vertices together?
var extrudeSettings = {
amount : 2,
steps : 1,
bevelEnabled: false,
curveSegments: 8
};
var arcShape = new THREE.Shape();
arcShape.absarc(0, 0, 1, 0, Math.PI * 2, 0, false);
var holePath = new THREE.Path();
holePath.absarc(0, 0, 0.8, 0, Math.PI * 2, true);
arcShape.holes.push(holePath);
var geometry = new THREE.ExtrudeGeometry(arcShape, extrudeSettings);
This solution uses ChandlerPrall's ThreeCSG.js project: http://github.com/chandlerprall/ThreeCSG
(For now, I recommend using the experimental version that supports materials - the uv branch - http://github.com/chandlerprall/ThreeCSG/tree/uvs)
Here's the code you will need:
// Cylinder constructor parameters:
// radiusAtTop, radiusAtBottom, height, segmentsAroundRadius, segmentsAlongHeight
var smallCylinderGeom = new THREE.CylinderGeometry( 30, 30, 80, 20, 4 );
var largeCylinderGeom = new THREE.CylinderGeometry( 40, 40, 80, 20, 4 );
var smallCylinderBSP = new ThreeBSP(smallCylinderGeom);
var largeCylinderBSP = new ThreeBSP(largeCylinderGeom);
var intersectionBSP = largeCylinderBSP.subtract(smallCylinderBSP);
var redMaterial = new THREE.MeshLambertMaterial( { color: 0xff0000 } );
var hollowCylinder = intersectionBSP.toMesh( redMaterial );
scene.add( hollowCylinder );
It is unlikely that you would have to stitch vertices together. If your cylinder has no thickness, you can use THREE.CylinderGeometry(). If it does have thickness, you can use CSG.
Use SVGloader to load a circle of desired radius (as an SVG). Set the geometry to ExtrudeBufferGeometry and give it your desired height as depth in the extrude settings object.