three.js

Three.js Child Mesh position always return (0,0,0)

自作多情 提交于 2019-12-18 05:14:16
问题 I loaded some objects via OBJLoader , loaded object contain one parent and multiple childs; then I apply Raycaster and find clicked child. Then I want to update position of child object, but initial position comes zero for all childs. var intersect = intersects[0].object; intersect.position.y = intersect.position.y + 5; // 0 + 5 But in my scene all looks fine. Also, If i remove clicked object, actually it is removed from scene. I think I missed some point their positions cant be (0,0,0). How

How to implement MeshNormalMaterial in THREE.js by GLSL?

故事扮演 提交于 2019-12-18 05:12:32
问题 I want to implement a shader like MeshNormalMaterial, but I have no idea how to convert normal to color. In THREE.js: My test1: varying vec3 vNormal; void main(void) { vNormal = abs(normal); gl_Position = matrix_viewProjection * matrix_model * vec4(position, 1.0); } varying vec3 vNormal; void main(void) { gl_FragColor = vec4(vNormal, 1.0); } My test2: varying vec3 vNormal; void main(void) { vNormal = normalize(normal) * 0.5 + 0.5; gl_Position = matrix_viewProjection * matrix_model * vec4

Programmatically generate simple UV Mapping for models

◇◆丶佛笑我妖孽 提交于 2019-12-18 04:54:20
问题 Coming from this question I'm trying to generate UV Mappings programmatically with Three.js for some models, I need this because my models are being generated programmatically too and I need to apply a simple texture to them. I have read here and successfully generated UV mapping for some simple 3D text but when applying the same mapping to more complex models it just doesn't work. The texture I'm trying to apply is something like this: The black background it's just transparent in the PNG

THREE.JS Shadow on opposite side of light

怎甘沉沦 提交于 2019-12-18 04:45:12
问题 I used THREE.js r49 create 2 cube geometry with a directional light to cast shadow on them and got result as in the following picture. I noticed that the shadow in the green circle should not be appeared, since the directional light is behind both of the cube. I guess that this is the material issue, I've tried changing various material parameters as well as change the material type itself, but the result still the same. I also tested the same code with r50 and r51 and got the same result.

Calculate near/far plane vertices using THREE.Frustum

妖精的绣舞 提交于 2019-12-18 04:12:52
问题 I need some help to deal with THREE.Frustum object. My problem: I need to calculate near/far plane vertices; I've taken a look at these tutorials http://www.lighthouse3d.com/tutorials/view-frustum-culling/view-frustums-shape/ http://www.lighthouse3d.com/tutorials/view-frustum-culling/geometric-approach-extracting-the-planes/ and I've sketched this function implementing exactly (I hope so) the procedure explained (just to get top-left/right vertices, assuming the camera can only look left and

Isometric camera with THREE.js

杀马特。学长 韩版系。学妹 提交于 2019-12-17 21:57:07
问题 How can I set the camera angle to something like the isometric projection? 回答1: To get an isometric view, you can use an OrthographicCamera . You then need to set the camera's orientation properly. There are two ways to do that: Method 1 - use camera.lookAt() var aspect = window.innerWidth / window.innerHeight; var d = 20; camera = new THREE.OrthographicCamera( - d * aspect, d * aspect, d, - d, 1, 1000 ); camera.position.set( 20, 20, 20 ); // all components equal camera.lookAt( scene.position

Three.js - bind two shapes together as one?

五迷三道 提交于 2019-12-17 21:52:17
问题 I'm new to the three.js world... My question is: Can I bind two different shapes together as one shape? For example binding sphere and cylinder together as one? 回答1: Kind of, yes, there are multiple options: via hierarchy You can simply add one mesh to another using the add() function via GeometryUtil's merge() function to merge vertices and meshes of two Geometry objects into one using a basic 3D editor that supports Boolean operations between meshes and exporting. Method 1 is pretty

Zoom to object in ThreeJS

泄露秘密 提交于 2019-12-17 21:29:14
问题 Where can I change the zoom direction in three.js? I would like to zoom in the direction of the mouse cursor but I don't get where you can change the zoom target. 回答1: updated wetwipe's solution to support revision 71 of Three.js, and cleaned it up a little bit, works like a charm, see http://www.tectractys.com/market_globe.html for a full usage example: mX = ( event.clientX / window.innerWidth ) * 2 - 1; mY = - ( event.clientY / window.innerHeight ) * 2 + 1; var vector = new THREE.Vector3(mX

Correct UV mapping Three.js

ぃ、小莉子 提交于 2019-12-17 20:31:35
问题 I'm trying to map the UV-texture correctly, but failing... I've got the next result in my app: The result isn't that I was awaiting. I want to have the next described view: The source code is here: http://pastebin.com/aDg981Bk 回答1: You need to look at PlaneGeometry.js and understand how the UVs are set. Then you will be able to figure out how to reset them. This should work -- there are two triangles per "face". for(var i = 0; i < geometry.faces.length / 2; i++) { geometry.faceVertexUvs[ 0 ]

THREEJS : Vertex Color Baking

落爺英雄遲暮 提交于 2019-12-17 20:27:30
问题 When coloring a mesh using vertex coloration, how does one save the colors as a texture? For example, if a mesh is colored based on its normals (similar to this example), how can one create a .png for the texture? For this purpose, it can be assumed that this mesh has texture coordinates. 来源: https://stackoverflow.com/questions/27697456/threejs-vertex-color-baking