three.js

问题 I'm making use of the THREE.ImageUtils.loadTexture function to load an image and then paste it onto each of the objects in my scene like so: _.forEach(bags, (bag) => { if(bag['children'][0] && bag['children'][0].material) { let material = new THREE.MeshPhongMaterial({map: tex}); bag['children'][0].material = material; } }); I've looked into tex.scale.x , tex.scale.y & tex.offset.x , tex.offset.y but these don't seem to be what I need. Here's what the object looks like at the moment but I'm

问题 I've just finished porting of my first cloth simulation from opengl to webgl using three.js (can be seen here). The thing is it looks a bit dull, and I want to add (as i hope i remember correctly from my computer graphics classes) ambient occlusion, to make the cloth nicely shaded on collision with ball. My knowledge about shaders is now on very low level, so I'd be very thankful for any resources on this topic helpful with three.js development (tutorials, book titles etc), because googles

问题 I have a THREE.PlaneGeometry , with ComputeFaceNormals() . I create two meshes using this geometry, with different rotations applied to them. I want to compute the two angles between the camera and the two meshes central face normal. It should be : vLocalCamera = vCamera.position - mesh1.position; mesh1.normal() . vLocalCamera = cos(angle); The problem is that I don't know how to get the mesh normal in world coordinate (from geometry and mesh rotation) with three.js API 回答1: If you want to

问题 When we add a CustomGeometry to the scene with defining vertices and not setting the position, how can we get it to rotate around its own center point? Fiddle : http://jsfiddle.net/tezcancirakoglu/Ldt7z In the sample code, object is rotating around Scenes X axis. I need to rotate it around its center point. Hint: The red cube mesh is the initial centerpoint of the object which is rotating. I need to rotate it around x axis of red cube... I tried alot but failed anyway. 回答1: One solution is to

问题 So I recently learned about the definition of mipmapping but im unsure of how to properly use that technique within three.js. I had a look at this example: http://threejs.org/examples/webgl_materials_texture_manualmipmap.html I also saw this: http://threejs.org/examples/#webgl_materials_texture_anisotropy Both seem to use mipmapping. The first example has this section of code: function mipmap( size, color ) { var imageCanvas = document.createElement( "canvas" ), context = imageCanvas

问题 Here you will find a jsFiddle adaptation of the problem. I would like to create a 3d web application in which the user is able to select an image file on their local machine: <input id="userImage" type="file"/> When a file is selected, the image is loaded as a parameter in a THREE.ShaderMaterial object. A glsl shader is applied to the image and the result is rendered to a container in the browser: $("#userImage").change(function(){ var texture = THREE.ImageUtils.loadTexture( $("#userImage")

问题 There a lot of nice things for collision detection like threex.colliders or code snippets here on questions, but acutally the most stuff is old (some functions like multiplyVector3 are changed and other are removed. I have a Object3D (Character Model) and a World (3D Models: cars, trees, buildings etc.). I can move the Character with the arrow keys (moving it via translateX/Y in a render loop. What I want is a collision detection between the character model and everything else (except ground

问题 I'm getting the Uncaught TypeError: undefined is not a function while using Three.js. The error is being shown for the line where I'm creating a THREE.PerspectiveCamera . The script is window.requestAnimFrame = (function(callback){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback){ window.setTimeout(callback, 1000 / 60); }; })(); function animate

问题 I'm a web developer with a good js experience, and I'm currently exploring three.js possibilities. However, I'm not very familiar with 3D shapes and vocabulary, and I can't figure out how to build the shape I need. I want to create a half sphere, and be able to project a video INSIDE this sphere. I have a panoramic spherical video, and I need to distort it to make it look like "plane". Thanks to Paul's tutorial, I have drawn a sphere and projected my video on it. But the external sphere

问题 I'm a web developer with a good js experience, and I'm currently exploring three.js possibilities. However, I'm not very familiar with 3D shapes and vocabulary, and I can't figure out how to build the shape I need. I want to create a half sphere, and be able to project a video INSIDE this sphere. I have a panoramic spherical video, and I need to distort it to make it look like "plane". Thanks to Paul's tutorial, I have drawn a sphere and projected my video on it. But the external sphere