WebGL

问题 I'm trying to get basic mouse integration into a small demo using a Collada object. I am able to get the correct mouse x and y, but I don't know how to translate them into coordinates to be used for the object. I was hoping the GLGE function duck.setLoc(mousepos.x, mousepos.y) would convert from pixels, but that is not the case. What do I have to do to translate the 2D mousepos pixels into a 3D point? 回答1: If you have point with screen coordinates (x0, y0), you can un-project them and

问题 I want to translate two 3D objects separately in WebGl, right now my code changes only the position and rotation of the camera. I'm using glMatrix for vector math."buffers" is an array with the object data. buffers[0] and buffers[1] are two separate objects. The translation and rotation are done in drawScene function function drawScene(gl, programInfo, buffers, deltaTime) { gl.clearColor(0.0, 0.0, 0.0, 1.0); // Clear to black, fully opaque gl.clearDepth(1.0); // Clear everything gl.enable(gl

问题 I have two THREE.ParticleSystem systems with particles that have textures with alpha transparency, one is using AdditiveBlending (fire texture), the other uses NormalBlending (smoke texture) and they use simple custom vertex and fragment shaders. Each ParticleSystem has "sortParticles = true" and independently they work perfectly, however when both types of particles overlap the first particle system (fire texture) has a similar transparency depth error that is normally associated with

问题 I've define that my games is extremely slow with enabled shadows on old mobile devices (Samsung galaxy S4, IPhone 5). When I turn off shadows it's improving performance greatly. Does any one know how to detect slow GPU to turn off shadows completely on slow devices or how to improve shadow performance? I've try to use diferrent shadow.mapSize on lights and shadowMap.type on renderer and it dosen't improve performance. Some details: I use PerspectiveCamera and WebGLRenderer with render size

问题 I have Three.Geometry object consisting of many vertexes and faces (grid). I want to dynamically change the color or material of selected face. geometry.colorsNeedUpdate = true; geometry.faces[1].color.setHex(0xcccccc); //this doesn't work Above code makes new color opacity weird. It behaves like it doesn't replace the color but blends new color with old. Therefore overwriting darker color with ligher is imposible. How to fix this ? My materials do apply : mat = new THREE.MeshBasicMaterial(

问题 var container; var camera; var scene; var renderer; var mesh; var loader; init(); function init(){ camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHieght, 1 , 10000); camera.position.z = 1000; //scene scene = new THREE.Scene(); loader = new THREE.ObjectLoader(); loader.load( "chesstable.js", function( mesh ) { mesh.scale.set( 1,1,1); scene.add(mesh); } ); renderer = new THREE.CanvasRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body

问题 I'm using Xtk to make a widget to measure distances in a volume. In the scene there are four object: a volume, two spheres an a cube. the cube is placed at origin and the spheres are translated 30 units along X and Y axis, each in opposite direction, as shown below: https://docs.google.com/file/d/0B2oRl7iWfVvTaXAyckNTOC04RlE/edit?usp=sharing The cube and the spheres are placed in the right position, but the problem arises when the volume is included in the scene, changing the coordinate

问题 I'm using Xtk to make a widget to measure distances in a volume. In the scene there are four object: a volume, two spheres an a cube. the cube is placed at origin and the spheres are translated 30 units along X and Y axis, each in opposite direction, as shown below: https://docs.google.com/file/d/0B2oRl7iWfVvTaXAyckNTOC04RlE/edit?usp=sharing The cube and the spheres are placed in the right position, but the problem arises when the volume is included in the scene, changing the coordinate

问题 This question already has an answer here : WebGL: Prevent color buffer from being cleared (1 answer) Closed 3 years ago . When gl.drawArrays is called sequentially, it draws over the top of the previous graphics on the canvas. However, when I put it inside a setInterval() it clears the canvas before redrawing. code that draws the rectangles on top of each other: for(var i =0; i < 10; i++) { setRectangle(gl, Math.random()*100, Math.random()*100, 20, 20); gl.drawArrays(gl.TRIANGLES, 0, 6); }

问题 Yesterday I asked this question (Uncaught TypeError: THREE.MTLLoader is not a constructor 2.0), which I thought that I had finally gotten to work, but now new questions have instead emerged: I have installed 'three-mtl-loader' using npm, but now it seems that the object isn't visible, eventhough I can console.log my way into seeing that the object exists. For some reason it now spits out the following error, and I guess that that is why it is not visible: THREE.MeshPhongMaterial: .shading has