three.js

问题 I would like to achieve a space ship like move on a cannonJS body. (Im really a beginner) I found some examples but none of them are exactly what I'm looking for. As i know the correct way to move an object, is to change its velocity. Here's what I have done here: http://codepen.io/Tomo0613/pen/xVjqqK enter code here But i definitely have problems with understanding quaternions. Is there a way to update, the vector of the body according to its quaternion as i rotate it, or that's always

问题 I have 2 mesh objects. Anchor and Rod. The Anchor rotates around z-axis, as illustrated by the image. The rod is supposed to move only backward and forwards. Here is the image: http://imageshack.us/photo/my-images/841/7a83.png/. But i am stuck with trying to figure out the matrix calculation. For example if the anchor rotates 45degrees, so its facing the x-axis, how can i make the rod still move backwards and forwards? 回答1: For the rotation around z axis : var rotation = new THREE.Matrix4()

问题 I have two sets of points in 3D space. I'd like to draw a line that runs through the center of both sets of points, and then find the angle from that line to each point. From there, I'll match points in the two sets up based on how close together their two angles are. I know how to find the center of each set of points (just average them all together) and I know how to match them up (even accounting for the fact they'll wrap around), but I don't know how to find the angle from the line to the

问题 I am making my first steps coding with JavaScript and playing with Three.js. I am experimenting with this example from threejs.org :http://threejs.org/examples/#misc_controls_deviceorientation and this is the code that they have: (function() { "use strict"; window.addEventListener('load', function() { var container, camera, scene, renderer, controls, geometry, mesh; var animate = function(){ window.requestAnimationFrame( animate ); controls.update(); renderer.render(scene, camera); };

问题 I want to extend the Three.js Object3D class, but can't figure out how to do it. There's this Stackoverflow question, which I've read, re-read and tried, but can't get it to work for me. Is there a way to extend a ThreeJS object? Could anyone offer some specific code on how to get this going? Here's what I have at the moment: var MyObject3D = function() { THREE.Object3D.call(this); MyObject3D.prototype = new THREE.CubeGeometry(); MyObject3D.prototype.constructor = MyObject3D; } And to create

问题 Question : Is it possible to flip/mirror a Three.js sprites texture? Background : Using the current DEV branch of three.js Findings so far : I first try'd to change it's 3d rotation without any effect. Then I inspected the sprites code and saw that the rotation is reseted in this line in Sprite.js: this.rotation3d.set( 0, 0, this.rotation ); Changing the values there didn't had any effect. Digging deeper I ended up in the SpriteRenderer plugin where I got completely lost. My understanding is

问题 If I create a geometry with just one face (triangle), like this: [CoffeeScript syntax] geometry = new THREE.Geometry() geometry.vertices.push(new THREE.Vector3(0, 0, 0)) geometry.vertices.push(new THREE.Vector3(0, 10, 0)) geometry.vertices.push(new THREE.Vector3(0, 10, 10)) geometry.faces.push(new THREE.Face3(0, 1, 2)) mesh = new THREE.Mesh(geometry, material) mesh.position.x = 10 @scene.add(mesh) And I render the scene: @renderer.render(@scene, @camera) How can I find out what the angle of

问题 I am brand new to three.js and am having some difficultly creating a simple 2d circle sprite in Webgl. I am able to do this easily with the canvas renderer: var PI2 = Math.PI * 2; var material = new THREE.SpriteCanvasMaterial( { color: 0xffffff, program: function ( context ) { context.beginPath(); context.arc( 0, 0, 2, 0, PI2, true ); context.fill(); } }); particle = new THREE.Sprite( material ); Is their an easy way to achieve the same effect in Webgl? When reading through the documentation,

问题 I am brand new to three.js and am having some difficultly creating a simple 2d circle sprite in Webgl. I am able to do this easily with the canvas renderer: var PI2 = Math.PI * 2; var material = new THREE.SpriteCanvasMaterial( { color: 0xffffff, program: function ( context ) { context.beginPath(); context.arc( 0, 0, 2, 0, PI2, true ); context.fill(); } }); particle = new THREE.Sprite( material ); Is their an easy way to achieve the same effect in Webgl? When reading through the documentation,

问题 I'm trying to use SVGRenderer in three.js (http://threejs.org/examples/#svg_sandbox). The example shows you how to make an SVG element (a circle) on the fly. I want to import an SVG file that I already have in my computer. How would I do that? The createElementNS command doesn't seem to support importing SVG files? I essentially want my image.svg to be displayed on a three.js scene. 回答1: You can use the THREE.SVGLoader() Library to achieve it : var svgManager = new THREE.LegacySVGLoader();