three.js

问题 demo: https://dl.dropboxusercontent.com/u/123374/so-pages/20160601/index.html the alphaTexture is having it's offset altered during each render. as a "map" property it changes, but as an "alphaMap" it does not change. the 2nd mesh's alphaMap relevant code from demo link: var colorTexture = new THREE.TextureLoader().load('blue.png') , alphaTexture = new THREE.TextureLoader().load('alpha.png') , offset = 0 , colorFill = new THREE.Mesh( new THREE.Geometry(), new THREE.MeshPhongMaterial({ map:

问题 Please see Update 3 at the end of this post for the most recent activity/plunker I am using AngularJS on top of a Node/Express app. In this app, I am using three.js to display a 3D object. The texture that wraps this object changes, but the file name does not (ex. color of the texture image changes but the filename remains Texture_0.png). The texture file is stored in Azure Blob Storage and I have CORS enabled so it is displaying properly. If I update an image and upload it to Azure Blob

问题 I'm new to three.js. I need to handle multiple objects as a single one. In simple terms I need to render a kind of bas-relief: a box geometry (the base) an extruded image on top of it and some text. Each object has to have a different material but they has to act as a single one: location and rotation the same etc. I'm still new to three.js so I don't know how to make a kind of composite pattern: with group? Joining geometry? Join mesh? What is the best way? Right now I'm using everything in

问题 Hi i'm trying to make a custom triangle in Three.js. The code below renders the wireframe of my triangle but not anything else. So if i turn wireframe off it turns invisible. How can i make this render a coloured triangle? var scene = new THREE.Scene(); var WIDTH = $("#three1").width(); var HEIGHT = $("#three1").width(); var camera = new THREE.PerspectiveCamera(75, WIDTH/HEIGHT, 1, 10000); var renderer = new THREE.WebGLRenderer(); renderer.setSize(WIDTH, HEIGHT); renderer.setClearColor(new

问题 I am making a first-person, multiplayer game using Three.js where players' opponents are represented on their screens as airplanes. I need to be able to orient the airplane on the screen of person B in the same direction as the camera of person A so that when person A moves forward, the airplane on the other person's screen moves forward AND faces forward, rather than drifting forward while facing backwards or sideways. I need transmit the orientation information as a JSON object. I tried

问题 I'm trying my hands on three.js I am moving the camera using a tween, and it works quite good. At the end of the animation, however, the camera jumps back to its initial position. I found out that the mousemove event was causing that behavior. How can i fix this problem and keep both the tween movement and the mouse move? I have constructed my three.js based on this example; Mousemove declared inside render function function render() { camera.position.x += ( mouseX - camera.position.x ) * 0

问题 I am trying to map a world coordinate to a texture's value in the fragment shader using threeJS. The generated 'color' is only black but webgl doesn't return any error. Here is what I get: in the 3D, what I get in webgl (black slice instead of an image) in the 2D canvas, what I should in webgl. My shaders: <script id="vertShader" type="shader"> varying vec4 vPos; void main() { vPos = modelViewMatrix * vec4(position, 1.0 ); gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0

问题 I have this code that works well: function onMouseMove( event ) { window.onmousedown = function() { var canvasPosition = renderer.domElement.getBoundingClientRect(); var mouseX = event.clientX - canvasPosition.left; var mouseY = event.clientY - canvasPosition.top; var mouseVector = new THREE.Vector3 ( 2 * (mouseX / window.innerWidth) - 1, 1 - 2 * (mouseY / window.innerHeight), 1); mouseVector.unproject( camera ); var dir = mouseVector.sub( camera.position ).normalize(); var distance = -

问题 I trying to make a an imported 3d object to rotate continuously on any axis like a classic cube, sphere etc.. But it don't work, not moving at all and I don't understand why. Here is the code: var scene6, camera6, renderer6, light, shipMtl, shipObj; function init() { scene6 = new THREE.Scene(); camera6 = new THREE.PerspectiveCamera(35, 1, 1, 1000); camera6.position.z = 400; //LIGHTS light = new THREE.PointLight(0xffffff, 2, 0); light.position.set(200, 100, 300); scene6.add(light); //3D MODEL

问题 I have created a fiddle which shows the guidelines for length and Diameter for Cylinder I was able to position the Line for Length. But m not sure how to change the properties of line so it draws a straight line to show Diameter, like show in the sample below: // Diameter line var diameterLineGeometry = new THREE.Geometry(); var diameterVertArray = diameterLineGeometry.vertices; diameterVertArray.push(new THREE.Vector3(1, 0.5, 0), new THREE.Vector3(-0.3, 0.7, 1)); diameterLineGeometry