three.js

问题 Is it possible to display the wireframe of the object and also the solid color of its faces on the same object? I found a way using a clone of the object and assign different materials e.g var geometry = new THREE.PlaneGeometry(plane.width, plane.height,width - 1, height - 1); var materialWireframe = new THREE.MeshPhongMaterial({color:"red",wireframe:true}); var materialSolid = new THREE.MeshPhongMaterial({color:"green",wireframe:false}); var plane = new THREE.Mesh(geometry, materialWireframe

问题 How do you save an image from a Three.js canvas? I'm attempting to use Canvas2Image but it doesn't like to play with Threejs. Since the canvas isn't defined until it has a div to attach the canvas object to. http://ajaxian.com/archives/canvas2image-save-out-your-canvas-data-to-images 回答1: Since the toDataURL is a method of canvas html element, that will work for 3d context too. But you have to take care of couple of things. Make sure when the 3D context is initialized you set

问题 two objects in the scene. the cube rotate axis should be the cube's center,that's my expect. but the shoe model's rotate axis is the world's y axis. my original code is. cube.rotation.y += 0.01; shoe.rotation.y += 0.01; I found a solution in stackoverflow,like this: cube.rotation.y += 0.01; var pivot = new THREE.Object3D(); pivot.add(shoe); pivot.rotation.y += 0.01; But it doesn't work. And then, I change the shoe's position. cube.rotation.y += 0.01; var pivot = new THREE.Object3D(); shoe

问题 two objects in the scene. the cube rotate axis should be the cube's center,that's my expect. but the shoe model's rotate axis is the world's y axis. my original code is. cube.rotation.y += 0.01; shoe.rotation.y += 0.01; I found a solution in stackoverflow,like this: cube.rotation.y += 0.01; var pivot = new THREE.Object3D(); pivot.add(shoe); pivot.rotation.y += 0.01; But it doesn't work. And then, I change the shoe's position. cube.rotation.y += 0.01; var pivot = new THREE.Object3D(); shoe

问题 There are several excellent stack questions (1, 2) about unprojecting in Three.js, that is how to convert (x,y) mouse coordinates in the browser to the (x,y,z) coordinates in Three.js canvas space. Mostly they follow this pattern: var elem = renderer.domElement, boundingRect = elem.getBoundingClientRect(), x = (event.clientX - boundingRect.left) * (elem.width / boundingRect.width), y = (event.clientY - boundingRect.top) * (elem.height / boundingRect.height); var vector = new THREE.Vector3( (

问题 My code is : $(function() { var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); var renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setClearColor(0xdddddd); renderer.setSize(window.innerWidth, window.innerHeight); renderer.shadowMap.enabled = true; renderer.shadowMapSoft = true; var axis = new THREE.AxisHelper(10); scene.add(axis); var grid = new THREE.GridHelper(50, 5); var color = new THREE.Color(

问题 I've been having trouble with the gl_VertexID built in vertex index, passed using in , to work with Three.js I'm not sure why, as the documentation says it works in all versions of OpenGL http://www.opengl.org/sdk/docs/manglsl/xhtml/gl_VertexID.xml I'm using this vertex shader: uniform int freqData[64]; uniform int fftSize; in int gl_VertexID; void main() { vec3 norm = normalize(position); int modFFT = mod(gl_VertexID, fftSize); vec3 newPosition = norm * float(freqData[modFFT]); gl_Position =

问题 I'm trying to render a truncated icosahedron like above with clickable zones using Three.js. I found the code for a regular icosahedron var t = ( 1 + Math.sqrt( 5 ) ) / 2; var vertices = [ [ -1, t, 0 ], [ 1, t, 0 ], [ -1, -t, 0 ], [ 1, -t, 0 ], [ 0, -1, t ], [ 0, 1, t ], [ 0, -1, -t ], [ 0, 1, -t ], [ t, 0, -1 ], [ t, 0, 1 ], [ -t, 0, -1 ], [ -t, 0, 1 ] ]; var faces = [ [ 0, 11, 5 ], [ 0, 5, 1 ], [ 0, 1, 7 ], [ 0, 7, 10 ], [ 0, 10, 11 ], [ 1, 5, 9 ], [ 5, 11, 4 ], [ 11, 10, 2 ], [ 10, 7, 6 ],

问题 With a rotated object in my scene, how can I translate a global vector into the local space of that rotated object, so that they are rendered in the same spot of the global vector? Take for example a cube that is rotated but at the global origin. Now I would like to render lines for each global dimension (x, y, z), but added as children to the rotated cube, not the global scene. How do I calculate and in three.js implement the rotation of those vectors so they will line up? 回答1: You want to

问题 I have a particle system where all the particles are positioned at the same coordinates and one after another, in random directions, they (should) start orbiting the center of the scene forming a sphere. What I managed to achieve until now is a group of Vector3 objects (the particles) that one after another start orbiting the center along the Z axis simply calculating their sine and cosine based on the current angle. I'm not that good at math and I don't even know what to look for precisely.