Develop Reference

can me subdivide a selected faces from loaded model

I created this code to load an existed model and subdivide a selected faces.
var loader = new THREE.PLYLoader();
loader.addEventListener( 'load', function ( event ) {
var geometry = event.content;
var material = new THREE.MeshPhongMaterial( { color:0xFFFFFF , specular: 0x0, shading: THREE.FlatShading, side: THREE.DoubleSide } );
geometry.dynamic=true;
for ( var i = 0; i < geometry.faces.length; i++ )
{
face = geometry.faces[ i ];
face.color.setRGB( 0, 0, 0.8 * Math.random() + 0.2 );
}
var faceColorMaterial = new THREE.MeshBasicMaterial(
{ color: 0xffffff, vertexColors: THREE.FaceColors } );
var mesh = new THREE.Mesh( geometry,faceColorMaterial );
mesh.position.set( 0, - 0.5, 0 );
mesh.rotation.set( 0, - Math.PI / 2, 0 );
mesh.scale.set( 5, 5, 5 );
scene.add( mesh ); targetList.push(mesh);
projector = new THREE.Projector();
} );
loader.load('http://localhost/tessellation/data/Mesh20.ply');
the selected faces is choosed are selected by the user clicking on faces.
The objective of this work is to refine a mesh portion by the subdivision of its faces.
To do it we created this code :
function onDocumentMouseDown( event )
{
console.log("Click.");
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
var vector = new THREE.Vector3( mouse.x, mouse.y, 1 );
projector.unprojectVector( vector, camera );
var ray = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
var intersects = ray.intersectObjects( targetList );
if ( intersects.length > 0 )
{
var smooth = THREE.GeometryUtils.clone( intersects[0].object.geometry );
var modifier = new THREE.SubdivisionModifier(1);
modifier.modify( smooth );
intersects[0].object.geometry = smooth;
}
but the totality of the mesh is subdivided not the selected faces.
can you help me to subdivide selected part of loaded model.
the program subdivide the totality of mesh

Three js Object 3D rotation

Hy!
I'm facing a strange problem in THREE JS(r71) / THREEx (THREEx.LaserBeam). I'm having problems with rotation of Object 3D.
I'm calculating latitude, attitude points into phi,theta like this:
(Or any other variables for 50/-51)
var phi = (90 - 50) * Math.PI / 180;
var theta = (-51) * Math.PI / 180;
After this I drop a sphere on the location with the following Code:
var geometry = new THREE.SphereGeometry( 0.005, 15, 15 );
var material = new THREE.MeshBasicMaterial( {color: 0x0000ff} );
var sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );
sphere.position.x = 0.5 * Math.sin(phi) * Math.cos(theta);
sphere.position.y = 0.5 * Math.cos(phi);
sphere.position.z = 0.5 * Math.sin(phi) * Math.sin(theta);
Then I rotate my ray to the same position with the following code:
laserBeam.rotation.y = -theta
laserBeam.rotation.z = phi
The laserBeam is actually acts as "line", in an Object3D. The Origin of the ray is at (0,0). So I haven't got a faintest idea why it is not going trough the sphere (See screenshot).
Any ideas?
---EDIT---
or here is the example with a simple line
var phi = (90 - 50) * Math.PI / 180;
var theta = (-51) * Math.PI / 180;
var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(0, 0, 0));
geometry.vertices.push(new THREE.Vector3(1 * Math.sin(phi) * Math.cos(theta), 1* Math.cos(phi), 1 * Math.sin(phi) * Math.sin(theta)));
var material = new THREE.LineBasicMaterial({
color: 0x0000ff
});
var line = new THREE.Line(geometry, material);
containerLine = new THREE.Object3D();
containerLine.add( line );
scene.add(containerLine);

You incorrectly calculates a small radius and y-coordinates:
var rm = R * Math.cos(phi); // vs `R * Math.sin(phi)`
sphere.position.x = rm * Math.cos(theta);
sphere.position.y = R * Math.sin(phi); // vs `R * Math.cos(phi)`
sphere.position.z = rm * Math.sin(theta);
http://jsfiddle.net/sxen2kLd/

Ah finaly.... Dunno how and why I'm too tired to undestand now, but posting it
function latLongToVector3(lat, lon, radius, heigth) {
var phi = (lat)*Math.PI/180;
var theta = (lon-180)*Math.PI/180;
var x = -(radius+heigth) * Math.cos(phi) * Math.cos(theta);
var y = (radius+heigth) * Math.sin(phi);
var z = (radius+heigth) * Math.cos(phi) * Math.sin(theta);
return new THREE.Vector3(x,y,z);
}
var helper = latLongToVector3(51.227821,51.3865431,0.5,0);
var geometry = new THREE.SphereGeometry( 0.005, 15, 15 );
var material = new THREE.MeshBasicMaterial( {color: 0x0000ff} );
var sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );
sphere.position.x = helper.x
sphere.position.y = helper.y
sphere.position.z = helper.z
----------------------------------------------------
var helper = latLongToVector3(51.227821,51.3865431,0.5,0);
function rotateAroundWorldAxis(object, axis, radians) {
rotWorldMatrix = new THREE.Matrix4();
rotWorldMatrix.makeRotationAxis(axis.normalize(), radians);
rotWorldMatrix.multiply(object.matrix);
object.matrix = rotWorldMatrix;
//object.rotation.setEulerFromRotationMatrix(object.matrix);
object.rotation.setFromRotationMatrix(object.matrix);
}
laserBeam.useQuaternion = true;
var origVec = new THREE.Vector3(1, 0, 0);
var targetVec = helper;
targetVec.normalize();
var rotateQuaternion = new THREE.Quaternion();
var axis = new THREE.Vector3(0, 0, 0);
var angle = Math.acos(origVec.dot(targetVec));
axis.cross(origVec, targetVec);
axis.normalize();
rotateAroundWorldAxis(laserBeam,axis,angle);

Three.js - Mesh, triangles and Lambert material

I have a function where I make a star, here we go:
function CreateStar( radius, thickness, isWireframe, starColor) {
// material
var starMaterial = new THREE.MeshLambertMaterial({
color: starColor,
wireframe: isWireframe,
shading: THREE.FlatShading
});
// array for vertices
var vertices = [];
// set "zero" vertex for thickness
vertices.push( new THREE.Vector3(0, 0, thickness) );
// calculate a vertex and a pit for a half of a ray... 5 times for each 72 degrees
var deg = Math.PI / 180; // for me it's easier to work with degrees rather than radians
var maxR, minR;
maxR = radius; // radius for a vertex
var x4Rad = maxR * Math.cos( - 72 * deg );
minR = x4Rad/Math.cos( - 36 * deg ); // radius for a pit
var firstVertex;
for ( var i = 0; i < 5; i++ ){
// vertex
var vertX = maxR * Math.cos( (90 + (72 * i)) * deg );
var vertY = maxR * Math.sin( (90 + (72 * i)) * deg );
if ( i == 0 ) firstVertex = new THREE.Vector3( vertX, vertY, 0 );
vertices.push( new THREE.Vector3( vertX, vertY, 0 ));
// pit
var pitX = minR * Math.cos( (126 + (72 * i)) * deg );
var pitY = minR * Math.sin( (126 + (72 * i)) * deg );
vertices.push( new THREE.Vector3( pitX, pitY, 0 ));
}
vertices.push( firstVertex ); // add the first vertex again to close the contour of the star
var holes = []; // no holes in our contour
var triangles, star;
var geometry = new THREE.Geometry();
geometry.vertices = vertices;
triangles = THREE.Shape.Utils.triangulateShape( vertices, holes ); // triangulation
for ( var j = 0; j < triangles.length; j++ ){
geometry.faces.push( new THREE.Face3( triangles[j][0], triangles[j][1], triangles[j][2] ));
}
star = new THREE.Mesh( geometry, starMaterial );
//star = new THREE.Mesh( new THREE.CubeGeometry(200,200,200), starMaterial);
return star;
}
My problem is when I return a cube (commented in this code) from this function and add to a scene, I get exactly a cube with correct shades which depend on position of a directional light source, but, when I return a star and add it to the scene, I get... hm.. just a black star with no color (it's black), no shades... nothing. So why I can apply a material to the cube, but I can't apply it to the star?
Can anybody explain to me what I'm going wrong?
Three.js r68

Maybe you just need to recalculate your normals.
Try :
geometry.computeFaceNormals();
geometry.computeVertexNormals();
star = new THREE.Mesh( geometry, starMaterial );

Vertex and Vector3 are not interchangeable in three.js

Starting on three.js revision 48 I made vertices connected by lines. It works fine but when updating to revision 65 from 48 I get an error message saying that Vertix is deprecated and should be replaced by Vector3. However, when I replace it with Vector3, Vector2 or Vector4 it behaves differently – the lines won't connect to the vertices anymore. I also get some strange rendering problems on the edges when the canvas is the width of the viewport.
var container = document.getElementById('container');
var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,1,10000);
var distance = 1000;
camera.position.z = distance;
var scene = new THREE.Scene();
scene.add(camera);
renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
camera.lookAt(new THREE.Vector3(0,0,0));
var geometry = new THREE.Geometry();
for ( var i = 0; i < 50; i ++ ) {
particle = new THREE.Particle( new THREE.ParticleCanvasMaterial( {
color: Math.random() * 0x808080 + 0x808080, //0x0000000,
opacity: 1,//0.1,
program: function ( context ) {
context.beginPath();
context.arc( 0, 0, 1, 0, Math.PI * 2, true );
context.closePath();
context.fill();
}
} ) );
particle.position.x = Math.random() * 2000 - 1000;
particle.position.y = Math.random() * 2000 - 1000;
particle.position.z = Math.random() * 2000 - 1000;
particle.scale.x = particle.scale.y = Math.random() * 12 + 5;
scene.add( particle );
geometry.vertices.push( new THREE.Vertex( particle.position ) );
}
var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.05 } ) );
scene.add( line );
renderer.render( scene, camera );
document.addEventListener( 'mousemove', onMouseMove, false );
function onMouseMove(event){
mouseX = (event.clientX - window.innerWidth/2) / window.innerWidth/2;
mouseY = (event.clientY - window.innerHeight/2) / window.innerHeight/2;
camera.position.x = Math.sin(mouseX * Math.PI) * distance;
camera.position.y = - Math.sin(mouseY * Math.PI) * distance;
camera.lookAt(new THREE.Vector3(0,0,0));
renderer.render( scene, camera );
}
Try replacing the Vertex at line 42 with Vector3: http://jsfiddle.net/kz94z/

Try changing this line:
geometry.vertices.push( new THREE.Vertex( particle.position ) );
to this:
geometry.vertices.push( particle.position );

Raycasting and container in Three.js

I have been struggling with issues concerning raycasting on small circlegeometries on a sphere.
I know raycasting can't be done with sprites and this is why I use circlegeometries, but it doesn't work all the time, and moreover the raycasting doesn't always work on circles but sometimes around them as well.
Does anybody have an idea ? Here is a JSBin to show you basically
Edit :
I updated my previous version of JSBin, you can click any circleGeometries it will work here, run it with output tab only open for better results
This is related to the renderer width and height properties, my sphere isn't in fullscreen and this is why it fails.
Does anybody have an idea on how to set up it right in order to get this to work perfectly ?

The formula used to compute intersections wasn't the good one, here is the one that works :
mouse.x = ( ( event.clientX - renderer.domElement.offsetLeft ) / renderer.domElement.width ) * 2 - 1;
mouse.y = - ( ( event.clientY - renderer.domElement.offsetTop ) / renderer.domElement.height ) * 2 + 1;
mouse x and y have slightly changed from the examples you can get, and are now fine.
var vector = new THREE.Vector3(mouse.x, mouse.y, 0.5);
projector.unprojectVector(vector, camera);
var ray = new THREE.Raycaster(camera.position, vector.sub(
camera.position).normalize());
var intersects = ray.intersectObjects(objects);
if ( intersects.length > 0 ) {
//do something
}

if you looking for some thing like this....Your code might need little changes... check this link http://jsfiddle.net/ebeit303/rjJ6q/
// standard global variables
var container, scene, camera, renderer, controls, stats;
var clock = new THREE.Clock();
// custom global variables
var targetList = [];
var projector, mouse = { x: 0, y: 0 };
init();
animate();
// FUNCTIONS
function init()
{
// SCENE
scene = new THREE.Scene();
// CAMERA
var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 100000;
camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
scene.add(camera);
camera.position.set(600,0,-1200);
camera.lookAt(scene.position);
// RENDERER
renderer = new THREE.CanvasRenderer();
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
container = document.getElementById( 'ThreeJS' );
container.appendChild( renderer.domElement );
// EVENTS
// CONTROLS
// this material causes a mesh to use colors assigned to faces
var faceColorMaterial = new THREE.MeshBasicMaterial(
{ color: 0xffffff, vertexColors: THREE.FaceColors } );
var sphereGeometry = new THREE.SphereGeometry( 500, 64, 64 );
for ( var i = 0; i < sphereGeometry.faces.length; i++ )
{
face = sphereGeometry.faces[ i ];
face.color.setRGB( 0, 0, 0.8 * Math.random() + 0.2 );
}
var sphere = new THREE.Mesh( sphereGeometry, faceColorMaterial );
sphere.rotation.set(0, 14.5, 0);
scene.add(sphere);
//targetList.push(sphere);
var j=0;
for (var i =0; i<100;i+=5){
//var circle = new THREE.CubeGeometry(5,5,5);
var circle = new THREE.CircleGeometry(5, 8, 0, Math.PI * 2);
//THREE.GeometryUtils.triangulateQuads(circle);
var circleMaterial = new THREE.MeshBasicMaterial({color: 0xDEF2EF});
circleMaterial.side = THREE.DoubleSide;
var mesh = new THREE.Mesh(circle, circleMaterial);
var Alon = i - 90;
var Alat = j;
var Aphi = Math.PI/2 - Alat * Math.PI / 180;
var Atheta = 2 * Math.PI - Alon * Math.PI / 180;
mesh.position.x = Math.sin(Aphi) * Math.cos(Atheta) * (501);
mesh.position.y = Math.cos(Aphi) * (501);
mesh.position.z = Math.sin(Aphi) * Math.sin(Atheta) * (501);
mesh.verticesNeedUpdate = true;
mesh.lookAt( sphere.position );
sphere.add(mesh);
targetList.push(mesh);
j++;
}
// initialize object to perform world/screen calculations
projector = new THREE.Projector();
// when the mouse moves, call the given function
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
}
function onDocumentMouseDown( event )
{
// update the mouse variable
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
var vector = new THREE.Vector3( mouse.x, mouse.y, 1 );
projector.unprojectVector( vector, camera );
var ray = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
var intersects = ray.intersectObjects( targetList );
if ( intersects.length > 0 )
{
intersects[ 0 ].object.material.color.setRGB( 0.8 * Math.random() + 0.2,
0.8 * Math.random() + 0.2,
0.8 * Math.random() + 0.2 );
}
}
function animate()
{
requestAnimationFrame( animate );
render();
}
function render()
{
renderer.render( scene, camera );
}