https://threejs.org/examples/#css3d_periodictable in this periodic table I'd like to add coneGometry
Here attached my function but I don't know how to add conegeometric coordinates to the object, please help.
function addConeObject(index) {
let object = new THREE.Object3D();
const geometry = new THREE.ConeGeometry(3,1,2);
const material = new THREE.MeshLambertMaterial({ color: 0xfb8e00 });
mesh = new THREE.Mesh(object, material);
scene.add(mesh);
targets.cone.push(object);
}
Related
Const r1 = new shapes.standard.Rectangle(); r1.size(120,120);
Const r2 = new shapes.standard.Rectangle(); r2.size(100,20);
r1.embed(r2);
graph.addCells([r1, r2]);
Result
I want to achieve the below expected result but the parent rectangle properties are being overridden by child properties and the parent is being automatically resized. Please suggest how to retain parent properties irrespective of child dimensions.
Expected result
It is difficult to say what the issue is from the code provided? Could you post more details or code?
The following code produces the desired result for example.
const namespace = joint.shapes;
const graph = new joint.dia.Graph({}, { cellNamespace: namespace });
const paper = new joint.dia.Paper({
el: document.getElementById('canvas'),
model: graph,
width: 600,
height: 600,
gridSize: 1,
cellViewNamespace: namespace
});
const r1 = new joint.shapes.standard.Rectangle();
r1.position(35, 35);
r1.resize(120,120);
const r2 = new joint.shapes.standard.Rectangle();
r2.position(45, 125);
r2.resize(100,20);
r1.embed(r2);
graph.addCells([r1, r2]);
want to create a new instance of vue-moveable whenever I drop an element on a certain div.
Below is a screenshot of my code.
https://user-images.githubusercontent.com/20570511/103152952-2a441d80-478d-11eb-98bc-9850d420353c.png
var ComponentClass = Vue.extend(Moveable)
var instance = new ComponentClass({
propsData: {
moveable: this.moveable,
}
})
instance.ondrag = this.handleDrag;
instance.onresize = this.handleResize;
instance.onScale = this.handleScale;
instance.onRotate = this.handleRotate;
instance.onWarp = this.handleWarp;
instance.onPinch = this.handlePinch;
instance.$slots.default = ['Sample Text Goes Here']
instance.$mount() // pass nothing
this.$refs.page.appendChild(instance.$el)
Vue-moveable repo: https://github.com/probil/vue-moveable
The code by the left is the actual code I wrote for creating a new instance of vue-moveable. Any help on how to get around this would be helpful.
https://user-images.githubusercontent.com/20570511/103153046-d6860400-478d-11eb-8753-3620170f1fe1.png
Green Circle is for the hardcoded vue-moveable, Red Circle is for the dynamic vue-moveable.
What are some common ways in ThreeJS to work with creating Meshes (consisting of Geometry and Materials) and then later deleting those objects?
My use case is to display lat/long points on a rotating 3D globe. Each point should be clickable and show further information. The points displayed should also be able to change based on data that is binded with Vue.
I currently use something like this but am running into memory leak issues:
var material = new THREE.MeshPhongMaterial({
color: 0xdc143c,
});
var cone = new THREE.Mesh(
new THREE.ConeBufferGeometry(radius, height, 8, 1, true),
material
);
cone.position.y = height * 0.5;
cone.rotation.x = Math.PI;
var sphere = new THREE.Mesh(
new THREE.SphereBufferGeometry(sphereRadius, 16, 8),
material
);
export default class Marker extends THREE.Object3D {
constructor() {
super();
this.name = "Marker";
this.add(cone, sphere);
}
destroy() {
this.remove(cone, sphere);
}
}
Are there libraries on top of Three that makes the management of Meshes/Materials/Geometry more simple to work with?
What I do is create a function in some utils file, and any time I need to dispose of a mesh, I pass the mesh in as the function parameter:
const removeMesh = (meshToRemove) => {
meshToRemove.visible = false;
scene.remove(meshToRemove);
meshToRemove.geometry.dispose();
meshToRemove.material.dispose();
meshToRemove= undefined;
}
I am creating a rectangle in a canvas using paper JS. The following is code for drawing the rectangle in vue.js.
created () {
const toolDrag = event => {
let trackingRect = new paper.Path.Rectangle(event.downPoint, event.point)
trackingRect.strokeColor = new paper.Color('#2661D8')
trackingRect.strokeColor.alpha = 0.7
trackingRect.strokeWidth = this.strokeWidth
trackingRect.removeOn({
drag: true,
up: true
})
}
// Finalise rectangle properties and draw.
let $this = this;
const toolUp = event => {
let newRect = new paper.Path.Rectangle(event.downPoint, event.point)
newRect.strokeColor = new paper.Color(this.getColor().stroke)
newRect.fillColor = new paper.Color(this.getColor().fill)
newRect.strokeWidth = this.strokeWidth
newRect.selected = true;
// Custom data attribute:
newRect.data.type = 'rectangle'
newRect.data.class = ''
// Flag the annotation has been edited and the changes are not saved
this.flagAnnotationEdits()
}
this.toolRect = new paper.Tool();
this.toolRect.onMouseDrag = toolDrag;
this.toolRect.onMouseUp = toolUp;
},
Now I want to allow user to resize this drawn rectangle by dragging any corner of the rectangle, but I am kind of stuck and unable to understand how to do this.
I have seen solutions for resizing a rectangle by changing bounds, but could not find solution for my use case. Any help is appreciated.
There are many ways to achieve what you want.
One of the simplest that I found is to recreate the rectangle, each time you drag one of its corners.
This way, you only have to know the dragged corner position and the opposite corner position and you can easily create the proper rectangle.
Here is a sketch demonstrating a possible implementation.
I think that you should easily be able to transpose it to your specific case.
// This settings controls the handles size.
const HANDLES_RADIUS = 5;
// This flag allow us to know when we are dragging an handle.
let dragging = false;
// This will store the offset from the handle position to the
// mouse down point. This allow a better drag UX.
let offset;
// This will store the point representing the opposite rectangle corner from
// the one being dragged.
let oppositePoint;
// We start by creating a rectangle in the middle of the canvas.
// This rectangle will be replaced each time a corner is dragged.
let rectangle = createRectangle(view.center - 50, view.center + 50);
// Then, we create an handle for each of the corners.
// These will be used to modify the rectangle shape.
const handles = rectangle.segments.map((segment, index) => new Path.Rectangle({
from: segment.point - HANDLES_RADIUS,
to: segment.point + HANDLES_RADIUS,
fillColor: 'orange',
// We store the segment index bound to this specific handle in the custom
// data object. This will allow us to know, when an handle is clicked,
// which segment is concerned by the event.
data: { segmentIndex: index },
// On mouse down on an handle...
onMouseDown: function(event) {
// ...get and store the opposite segment point.
// We will use it later to redraw the rectangle.
const oppositeSegmentIndex = (this.data.segmentIndex + 2) % 4;
oppositePoint = rectangle.segments[oppositeSegmentIndex].point;
// Store the offset.
offset = event.point - rectangle.segments[this.data.segmentIndex].point;
// Activate dragging state.
dragging = true;
}
}));
// On mouse move...
function onMouseMove(event) {
// ...don't do nothing if we are not dragging an handle.
if (!dragging) {
return;
}
// Get the new corner position by applying the offset to the event point.
const activePoint = event.point + offset;
// Recreate the rectangle with the new corner.
rectangle.remove();
rectangle = createRectangle(oppositePoint, activePoint);
// For each corner...
rectangle.segments.forEach((segment, index) => {
// ...place an handle...
handles[index].position = segment.point;
// ...store the potentially new segment <=> corner bound.
handles[index].data.segmentIndex = index;
});
}
// On mouse up...
function onMouseUp() {
// Disable dragging state
dragging = false;
}
//
// HELPERS
//
// This method is used to avoid duplicating the rectangle instantiation code.
function createRectangle(from, to) {
return new Path.Rectangle({
from,
to,
strokeColor: 'orange'
});
}
i have a probleme to my infowindow, i can't show my title and description on it.
The relation between my data base and google api is good because i can show my marker on the map but when i click on it there is nothing in the infowindow.
Here's my code:
function createMarker(lat, lng, titre, description, adresse){var latlng = new google.maps.LatLng(lat, lng);var marker = new google.maps.Marker({position: latlng,map: map,title: titre});
contentString =
'<div class="descritpion" >'+'<a>(titre)</a>'+''
'</div>';
var infobulle = new google.maps.InfoWindow({content: contentString,});google.maps.event.addListener(marker, 'click', function(){infobulle.open(map, marker);});}
This is sort of how I do it (though I usually also hold all the markers in an array so they can be cleared, or updated as a group). Also, I'm assuming your syntax around titre was wrong, and have corrected to to be what I thought you wanted to achieve.
var MyInfoWindow = new google.maps.InfoWindow({content: 'Loading...'});
function createMarker(lat, lng, titre, description, adresse){
var point=new google.maps.LatLng(lat,lng);
var marker = new google.maps.Marker({position: point,map: map});
marker.html='<div class="descritpion" ><a>('+titre+')</a></div>';
google.maps.event.addListener(marker, 'click', function () {
MyInfoWindow.setContent(this.html);
MyInfoWindow.open(map, this);
});
}