three.js

问题 How would I convert a render to a .png image? I've been looking around for awhile but nothing has worked. 回答1: Here is a function I use and a fiddle that shows it working. function takeScreenshot() { // For screenshots to work with WebGL renderer, preserveDrawingBuffer should be set to true. // open in new window like this var w = window.open('', ''); w.document.title = "Screenshot"; //w.document.body.style.backgroundColor = "red"; var img = new Image(); img.src = renderer.domElement

问题 I want to handle a lost context event in Three.js. There is a nice documentation about that here but unfortunately it doesn't work when I apply it to my renderer.domElement . I try to lose the context by clicking and some variable in loseContext() are undefined. I guess the structure is different in Three.js. Any expert? 回答1: You should be able to do something like this about the renderer was initialized and assuming of course that the variable you stored the renderer into is named 'renderer'

问题 I have a Maya file exported to OBJ and MTL. I can see the OBJ texture successfully, but how do I actually get the texture in? I looked at the "three.js" format in blender, which appears to be shape only, no texture. This three.js example appears to load in the obj fine for the shape, but the texture appears to come from a jpg image and not an mtl: loader.load('textures/ash_uvgrid01.jpg', function(image) { texture.image = image; texture.needsUpdate = true; }); My question is, how do I get this

问题 I have a Maya file exported to OBJ and MTL. I can see the OBJ texture successfully, but how do I actually get the texture in? I looked at the "three.js" format in blender, which appears to be shape only, no texture. This three.js example appears to load in the obj fine for the shape, but the texture appears to come from a jpg image and not an mtl: loader.load('textures/ash_uvgrid01.jpg', function(image) { texture.image = image; texture.needsUpdate = true; }); My question is, how do I get this

问题 I have about 40 curved lines and all of them have from 30 to 200 points. I draw all of them equally using BufferGeometry and setDrawRange() but it is smooth only for line with >200 points. I've tried TWEEN.js but it in this case it wasn't good idea. Is there any other option to make it happen? In Unreal Engine 4 this problem can be resolved by setting opacity in masked material and update it every tick (and we have drawing effect). I would like to hear from you if you have any ideas how can I

问题 I'm playing around with Three.js and WebGL and can't quite get the controls the way I want. I chose to try to "roll my own" controls since Three.js's FirstPersonControls do not use pointer lock. Anyway, I took most of my code from the built-in FirstPersonControls, converted it to use pointer lock ( movementX instead of pageX - offset ), but I am having trouble smoothing the look motion. Here is my onMouseMove (using originalEvent since it is a jquery event): onMouseMove: function(e) { if(

问题 I'm working my way through this book, and I'm doing okay I guess, but I've hit something I do not really get. Below is how you can log to the console and object in 3D space that you click on: renderer.domElement.addEventListener('mousedown', function(event) { var vector = new THREE.Vector3( renderer.devicePixelRatio * (event.pageX - this.offsetLeft) / this.width * 2 - 1, -renderer.devicePixelRatio * (event.pageY - this.offsetTop) / this.height * 2 + 1, 0 ); projector.unprojectVector(vector,

问题 I'm trying to link points with a spline using Three.js for a visualization I'm trying to make. As far as I can tell, I add points to an array, pass that to THREE.SplineCurve3, step through the spline points to get the geom coords and render. It works if I only add the start/end points to the array but if I try to add a mid-point, I get an error. Example is here: http://jsfiddle.net/sLQK9/4/ I'm sure it's something simple but I can't spot it - can anyone help me? Ultimately, the points will be

问题 We are trying to create a single page app in which user can switch between multiple Three.js apps. However we are noticing constant increase in memory usage by the tab. Their is no memory leakage in our app and seems Three.js variables are not getting cleared from RAM. Steps to recreate Visit http://threejs.org/examples/ and open Task manager in Google Chrome to notice memory usage by the concerned tab. Keep switching between examples and you will notice constant increase in memory usage and

问题 I have a problem. In Three.js, I want to rotate a sphere (Earth) around axis tilted by 23.5 degs. I found sphere.rotation.x, sphere.rotation.y and sphere.rotation.z, but when I combine them in the correct ratio, the sphere's rotation is quite weird - it has no permanent rotation axis. I think I need a function like sphere.rotation.vector(1,0,-1). Does anyone know how this function is called and how the correct syntax is? Many thanks for answers! 回答1: You need to use quaternions for this. This