w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
  Home » THREE JS » Page 1
three.js / physi.js heightfield wont accept geometry
I think your problem is you are using "plane.geometry" instead of just "geometry" in the loop to set the vertex height. Maybe it should be: //set height of vertices for ( var i = 0; i < geometry.vertices.length; i++ ) { geometry.vertices[i].z = data[i];//let's just assume the data is correct since it works as a THREE.Mesh } This fiddle that I created seems to work ok.

Categories : Three Js

Three.js place an object in rotating camera's fov
You want to transform a point from camera space to world space. In the camera's coordinate system, the camera is located at the origin, and is looking down its negative z-axis. Place the object in front of the camera (in the camera's coordinate system). object.position.set( x, y, - z ); // z is the distance in front of the camera, and is positive Now, transform the object's position from came

Categories : Three Js

decimal color conversion to rgb or hex color in three.js
I don’t know how you would convert MsAccess colors programatically but looking at http://www.endprod.com/colors/ your color should be #FFFF00 or rgb(255,255,0);

Categories : Three Js

Loading .obj in three.js - code from scratch
replace this code: var loader = new THREE.OBJLoader( manager ); loader.load('obj/lady.obj', function( object ) { //\ code for texture mapping object.traverse( function ( child ) { if ( child instanceof THREE.Mesh ) { child.material.map = texture; } });

Categories : Three Js

Operations on complex numbers in vertex shader
So far, I've managed to develop the same solution performing all the operations in the vertex shader. Performance rates are similar, so I'll probably go back to performing the operations with JavaScript. However, it was fun to experiment with shaders, so here is the code for the vertex shader, in case it helps someone. So, first of all the implemented functions to work with complex numbers (thank

Categories : Three Js

Import Zip Files
In case you really want to use zip in the browser, I think you could go with unzip a downloaded file with zip.js and parse the result with OLBJLoader.parse.

Categories : Three Js

Rotate camera based on angle
Your are rotating vector (0, 0, 0) which is center and whatever angle you use to rotate center around any axis you will always get (0, 0, 0). Just imagine you are doing simple 2d rotation. After all, rotation around Y axis can be viewed as 2d rotation in X-Z plane. Try with some other values for vec variable, for example (1, 0, 0) or (0, 0, 1) and you will see results

Categories : Three Js

Three js load obj+mtl gets texture image as canvas
The THREE.MTLLoader.ensurePowerOfTwo_ function creates a canvas element if the texture width or height is not power of two. (It resizes the image with a canvas.) I think that one of your textures has power of two width and height, but the other two has not.

Categories : Three Js

Three.js - can I detect geometry 'islands' when importing?
No. three.js does not have functionality for identifying geometry 'islands' in a mesh. When using MeshFaceMaterial, WebGLRenderer breaks the geometry into chunks anyway -- one chunk for each material. It does that because WebGL supports one shader per geometry. I would not merge all your geometries, and then use MeshFaceMaterial, only to have the renderer break the single geometry apart. You ca

Categories : Three Js

Strategy for animating a large mesh in three.js?
The answer in this case is that I can solve my problem with the ParametricGeometry since the shape and its variance is very simple. A more complex surface (like a real 3D terrain) probably will require learning about shaders. Sounds like fun, but think I'll walk before running. UPDATE: Using a ParametricGeometry works, and is faster but the performance is still poor. So I'll look at other sol

Categories : Three Js

Rotating object around object axis THREE.js
objects are always rotated around their own center (0,0,0) if you want them to rotate differently, i'm affraid you'll have to modify the model, reposition it so the centerpoint is where you'd like to be the pivot point.

Categories : Three Js

Three.js - Can I force a shape to be visible, even if it's occluded?
you can accomplish this by disabling the depth test of the material. this means its always rendered in front of everything. var material = new THREE.MeshBasicMaterial({color: 0xFF0000}); material.depthTest = false; var mesh = new THREE.Mesh(new THREE.BoxGeometry(5, 5), material);

Categories : Three Js

Scaling a geometry in one direction with top as reference in threejs
You need to translate your geometry so the top edge passes through the origin. var geometry = new THREE.PlaneGeometry( 10, 10 ); geometry.applyMatrix( new THREE.Matrix4().makeTranslation( 0, - 10 / 2, 0 ) ); Now, when you scale your mesh, the top will remain fixed. three.js r.69

Categories : Three Js

Three.js - Under what conditions are THREE.Lines frustum-culled?
I needed avoiding lines to dissapear too. Following Justin idea of frustumCulled I had to do line.frustumCulled = false; I thought it was line.geometry.frustumCulled = false; but I was wrong, you've to apply it on the line not on its geometry. This works for me on version 0.70

Categories : Three Js

How to embed three.js image from other source into the HTML?
You have to use ImageUtils if you want to add an image as texture. var texture = THREE.ImageUtils.loadTexture( "textures/pic.png" ); var material = new THREE.MeshPhongMaterial( { map: texture } ); // you can edit texture settings texture.wrapS = texture.wrapT = THREE.RepeatWrapping; texture.repeat.set( 512, 512 ); var mesh = new THREE.Mesh( geometry, material ); scene.add(mesh); If you have

Categories : Three Js

Vertex Colors in THREE.Line
You can create a line in three.js having one color on each segment by using the THREE.LinePieces option in the constructor, and setting vertexColors = THREE.VertexColors; for ( var i = 0; i < geometry.vertices.length; i+=2 ) { geometry.colors[ i ] = new THREE.Color( Math.random(), Math.random(), Math.random() ); geometry.colors[ i + 1 ] = geometry.colors[ i ]; } var material = new THR

Categories : Three Js

How can I draw a scale meter?
why yes, good sir! You could find out the distance quite easily if you have THREE.OrbitControls object and a THREE.Camera: var controls = new THREE.OrbitControls(...); var camera = ....; //get distance from camera to 'target' of OrbitControls var distance = camera.position.distanceTo(controls.target); luckily for us, THREE.OrbitControls also has minDistance and maxDistance attributes which cont

Categories : Three Js

STL rendering with threejs
Your camera near plane is 0.1 and far plane is 1000000. Small values of the near plane can lead to depth-sorting precision problems. In your case, set your near plane to, say, 100. ref: http://www.opengl.org/wiki/Depth_Buffer_Precision Also consider using OrbitControls so your model remains right-side-up. three.js r.69

Categories : Three Js

How to Set Plane Mesh to always lookAt camera without tilting
http://www.lighthouse3d.com/opengl/billboarding/index.php?billCyl maybe this article of any help for you. You are looking for those cylindrical billboards i think but read up from the first page ;) You can modify the specific mesh matrix yourself, although i am not sure if this is the most efficient way. I also did this myself once. Get the camera look vec: three.js set and read camera look

Categories : Three Js

Three.js - Bend plane with spherical coordinates
Sorry for that, but the formulas concern le orthographic projection as you can see here : http://fr.wikipedia.org/wiki/Projection_orthographique

Categories : Three Js

Should I use the field of view or camera's z position for zooming in/out?
Well, if you change the cameras position you are not zooming at all, you are just moving it closer or further away. Using the Field of View variable, you are zooming but this is usually related to a distortion if you get to the extreme values. So it depends what you need for your application. If distortion is ok and you really need the feel of "zooming" in, you should be going for the FoV vari

Categories : Three Js

Rotation around an axis three.js
If I am correct in understanding your intent, you are interested in rotating your objects about a specified axis, which essentially would set them moving around in a circle. This is actually more about the positioning of the objects as opposed to the orientation (read: rotation) of the object. Therefore, it might be better to write a function that would manually set the position of the object bas

Categories : Three Js

90 degree field of view without distortion in THREE.PerspectiveCamera
In three.js, camera.fov is the vertical field-of-view in degrees. The horizontal field-of-view is determined by the vertical field-of-view and the aspect ratio of the display image. hFOV = 2 * Math.atan( Math.tan( camera.fov * Math.PI / 180 / 2 ) * camera.aspect ) * 180 / Math.PI; // degrees A reasonable value for camera.fov is 40 to 50 degrees. This yields minimal distortion, and depending on

Categories : Three Js

three.js orthographic camera object picking
Here is the pattern to use when raycasting (picking) with either an orthographic camera or a perspective camera: var raycaster = new THREE.Raycaster(); // create once var mouse = new THREE.Vector2(); // create once ... mouse.x = ( event.clientX / renderer.domElement.width ) * 2 - 1; mouse.y = - ( event.clientY / renderer.domElement.height ) * 2 + 1; raycaster.setFromCamera( mouse, camera ); v

Categories : Three Js

SceneImporter not loading MeshFaceMaterial textures in r68
Seems like the SceneImporter doesn't know what to do with these materials, but all the data is there, so you'll need to give it a little help. Like so; loader.load('sceneWithObjectOfManyFaceMaterials.json' , function(loaded) { for(var key in loaded.objects) { var mesh = loaded.objects[key]; if(mesh.material.materials) { mesh.material.materials.for

Categories : Three Js

Sphere object does not rotate
You don't need to add the camera to the planeGeometry. Also I assume that sphereGeometryLightMap is of type THREE.Mesh in which case you need to add it to the scene. Not to the planeGeometry. If you want the sphereGeometry relative to the planeGeometry you can do: var object = new THREE.Object3D(); object.add (planeGeometry); object.add (sphereGeometry); Before you add the geometries to the

Categories : Three Js

three js get tangent/intersection of sphere and segment
You can represent point C as a affine combination of point A and B as C = (1-t)A + tB then, the vector OC (where O is the center of the sphere) should have magnitude R (sphere's radius). From this you can obtain a quadratic equation of t and you can solve for t easily. Note that in general you should get two t values as the infinite line defined by A and B will intersect the sphere twice. So, y

Categories : Three Js

CANNON.js custom rigid body
If you want to construct a terrain, you could use the CANNON.Heightfield class. See the example. There's currently no way to feed an arbitrary polygon/trimesh directly into Cannon.js. More on the subject here. UPDATE: The new CANNON.Trimesh class can be used for trimesh collisions. It is currently limited to sphere and plane collisions.

Categories : Three Js

Can I Increase Vector Precision in THREE.js?
After much research, the short answer to the question "Can I increase Vector precision in THREE.js" is yes, but it an advanced subject. The long answer is: Increasing Vector precision basically means increasing JavaScript Number precision because the x, y, z, and w values inside the Vector are regular JavaScript Numbers. Increasing number precision requires accounting for "epsilon" which is a m

Categories : Three Js

ThreeJS & Blender - Mesh exported from Blend is not visible in ThreeJS
You need to add a light to your scene like so: var directionalLight = new THREE.DirectionalLight(0xffffff, 1.2); directionalLight.position.set(0, -1, 0); scene.add(directionalLight); Here's the fiddle I used to test my theory, but it should work if you just add those to the top of your file. http://jsfiddle.net/dmt23/6qwswa25/

Categories : Three Js

Why does my Three.JS Environment Map Move?
Environment mapping is a projection from the environment to your object, here the small sphere. So if the object changes position the mapping changes also. It does not matter it you are projecting using an orthographic camera or a perspective camera. It is still a positional based mapping.

Categories : Three Js

Three.js Skeletal animations, bons recalculate
You don't need to change the position of the arm in the keyframes. Apply the animation, then change the position of the arm dynamically by setting the arm bone directly with skinMesh.skeleton.bones[i].position.set(xPos, yPos, zPos); // sets the position Vector3 skinMesh.skeleton.bones[i].rotation.set(xRot, yRot, zRot, "XYZ"); // sets the rotation Euler where "xPos,yPos,zPos" is the new p

Categories : Three Js

Three.js: How to draw a sphere with a spherical triangle on its surface?
You have 3 options as I see it to build a pseudo-triangle on the face of a sphere: geometry, texture, and color. Taking a geometry route would require constructing a set of vertices that meet your requirements. The best way to do this would probably be to build a sphere with your preferred number of segments, and then remove unwanted vertices from places your triangle doesn't exist. You can make

Categories : Three Js

Scaling small objects using THREE.TransformControls
The problem is that TransformControls scales the distance of the mouse movement by a seemingly arbitrary amount (1/50) within the onMouseMove function: } else if (_mode == "scale") { point.sub(offset); point.multiply(parentScale); if (scope.space == "local") { if (scope.axis == "XYZ") { scale = 1 + ((point.y) / 50

Categories : Three Js

Shadow but no object illumination effect in three.js
The simplest way is to use MeshBasicMaterial() http://threejs.org/docs/#Reference/Materials/MeshBasicMaterial which is not affected by the light.

Categories : Three Js

Using raycasting to check the object in front of a Perspective Camera with first person controls
This is simple. Based on the code of the raycasting example with terrain http://threejs.org/examples/#webgl_geometry_terrain_raycast And on this reference http://threejs.org/docs/#Reference/Core/Raycaster You can see that all you have to do is change the second parameter of the Raycaster constructor to a vector that points in the same direction as the camera does. So the following code from the e

Categories : Three Js

three.js - Objects farther away from camera gets jagged textures
As objects move further away from the camera webgl uses textures automatically generated called mipmaps. These are of lower resolution. If you don't like them disable them by: texture.generateMipmaps = false;

Categories : Three Js

Three.js Wireframe without diagonals
if you going to use plane geometry, you can try out the following link... EdgeHelper var geometry = new THREE.PlaneGeometry(10, 10, 10,10); var material = new THREE.MeshLambertMaterial({color:0xff0000,opacity:0.2,transparent:true,overdraw:0.5}); for (var i = 0; i < 1; i ++) { var mesh = new THREE.Mesh(geometry, material); mesh.position.x = i*20; mesh.position.y = 0;//Math.random()*20-(1*i)

Categories : Three Js

Three.js instancing equivalent
I had the same experience when trying to draw a couple of thousands of Spheres. After some research I achieved a better performance (up to a million of items) using the PointCloud Object. Basically you create the PointCloud object from a geometry (it can be created from raw in this example or use one of the existing in Three.js) and the PointCloudMaterial, where you can modify the properties of e

Categories : Three Js




© Copyright 2018 w3hello.com Publishing Limited. All rights reserved.