three.js

问题 I have two objects in my scene. I am using the <script src="js/controls/LeapTrackballControls.js" ></script> for moving the camera, so it feels like the objects is rotating according to the movement of my hand. The problem is that the other object is also moving, and I want it to remain always in front of me. I mean, that even if the camera moves, the object always is in the same place inside the canvas/explorer. Sorry if I'm not explaining myself properly. Any help is appreciated. EDIT: var

问题 In three.js, when the mouse is zoomed, the text will be magnified and reduced accordingly. var texture = new THREE.Texture( canvas ); var material = new THREE.SpriteMaterial ( { map: texture, transparent:false } ); var sprite = new THREE.Sprite( material ); How do you keep the text size from changing when the mouse is zoomed? 回答1: My default, sprites scale according to their distance from the perspective camera -- just like other objects do. If you do not want them to scale, you can overlay a

问题 I'm making a 360 viewer, so textures are inside a cylinder. Problem is that they appear inverted horizontally. I know about texture.flipY but I haven't found a texture.flipX on the source. So how can I flip a texture horizontally, or along the x axis, directly in the code? (not using an image editor) 回答1: To flip a texture horizontally, you can do the following: texture.wrapS = THREE.RepeatWrapping; texture.repeat.x = - 1; As mentioned in the comments, this approach requires the texture to be

问题 I have a CubeGeometry which the camera is looking at, and I want the camera to zoom so that the cube is entirely visible, but no larger. My initial attempt was to convert the cube verticies to the camera coordinate system, function toScreenXY(position, camera) { var pos = position.clone(); var projScreenMat = new THREE.Matrix4(); projScreenMat.multiply(camera.projectionMatrix, camera.matrixWorldInverse); projScreenMat.multiplyVector3( pos ); return pos; } function ScaleInView() { camera.fov =

问题 In Three.js, I have a 3d object where I am using local clipping planes to only render a part of the object. However, since 3d objects are "hollow" (meaning only the outer surface is rendered), when we clip anything off that surface we can "see into" the object. Here's an example of what I mean, clipping a corner off a cube. Notice how we can see the backside of the opposite corner. I would like to give the appearance of the object being solid. Based on this issue, it seems that the best way

问题 In Three.js, I have a 3d object where I am using local clipping planes to only render a part of the object. However, since 3d objects are "hollow" (meaning only the outer surface is rendered), when we clip anything off that surface we can "see into" the object. Here's an example of what I mean, clipping a corner off a cube. Notice how we can see the backside of the opposite corner. I would like to give the appearance of the object being solid. Based on this issue, it seems that the best way

问题 I am using three.js. I have two mesh geometries in my scene. If these geometries are intersected (or would intersect if translated) I want to detect this as a collision. How do I go about performing collision detection with three.js? If three.js does not have collision detection facilities, are there other libraries I might use in conjuction with three.js? 回答1: In Three.js, the utilities CollisionUtils.js and Collisions.js no longer seem to be supported, and mrdoob (creator of three.js)

问题 I am new to three.js and have starting working with it a lot recently. I really enjoy it and I have created some incredible things. However, I'm unsure why but when setting antialiasing to true I see no difference. renderer = new THREE.WebGLRenderer({ antialiasing: true }); I have searched for possible solutions, yet I can't seem to find or understand why this doesn't work. Is there something I am missing or need to in order to get antialiasing to work? EDIT: Links that helped me fix this

问题 I am attempting to change the color on a single face of a mesh. This is in a WebGL context. I can change the entire mesh color, just not a single Face. Relevant code below: // Updated Per Lee! var camera = _this.camera; var projector = new THREE.Projector(); var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 ); projector.unprojectVector( vector, camera ); var ray = new THREE.Ray( camera.position, vector.subSelf(

问题 I try to render both sides of a transparent object with three.js. Other objects located within the transparent object should show too. Sadly I get artifacts I don't know too handle. Here is a test page: https://dl.dropbox.com/u/3778149/webgl_translucency/test.html Here is an image of the said artifact. They seem to stem from the underlying sphere geometry. Interestingly the artifacts are not visible for blending mode THREE.SubtractiveBlending = 2. Any help appreciated! Alex 回答1: Self