three.js

问题 I am trying to modify the following lines of code so when the button is clicked the neighborhood vertex of the selected mesh gets colored in a gradient effect. function addSphere() { var position = new Array(); var notAboveGround = true; while(notAboveGround){ position[0]=Math.random()*floorSide-floorSide/2; position[1]=Math.random()*floorSide-floorSide/2; position[2]=Math.random()*floorSide/5; var sphereSide = Math.random()*floorSide/12+floorSide/50; //alert("cubeSide="+cubeSide); if

问题 I'm facing a issue to render cubes using CanvasRenderer, depends the camera position any cubes lost same parts and show a part of face other cube, as the below images: In this example, there are two cubes, when the camera in front there aren't problem: But, when I change de camera: To render I use a array of materials, this is one of: new THREE.MeshLambertMaterial({ color: 0x006600, ambient: 0xffff00, side: THREE.DoubleSide, overdraw: 0.5 }), 回答1: What you are seeing is an artifact of

问题 I have been trying to load textures for a WebGL application in a Chrome browser in an Android device I came across a similar post THREE.js - Can't load texture locally where a solution to load textures is given for Chrome which works only on a PC/laptop device The flag --allow-file-access-from-files works on a laptop device as I can use the command line but how to do it on a mobile device? Can someone please help with this? 回答1: The Crosswalk projects embeds a Chromium webview and, by

问题 I'm having an issue in my three.js code. I am trying to align two objects by selecting two faces and have the second face (and object) rotate to match the normal vector of the first object's selected face. So far I have: var normalMatrix = new THREE.Matrix3().getNormalMatrix( object.matrixWorld ); var worldNormal = face.normal.clone().applyMatrix3( normalMatrix ).normalize(); var normalMatrixRef = new THREE.Matrix3().getNormalMatrix( objectRef.matrixWorld ); var worldNormalRef = faceRef

问题 I wanted to play with THREE lod system, and I applied normal mapped material on my meshes but it failed with GL errors : WebGLRenderingContext: GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 2 Anyone can reproduce it quite easly I think, just edit the webgl_lod example, and instead of applying a MeshLambertMaterial use the normalmap ShaderMaterial provided in the misc_control_fly example. Am I missing something, isn't the normalmap shader

问题 I have a cube created using three js.(WebGL renderer) I have applied texture on all six sides of cube. I want to detect on which side the user has clicked on cube ? 回答1: look intersects[0].faceIndex var geometry = new THREE.BoxGeometry( 200, 200, 200 ); var raycaster = new THREE.Raycaster(); Cube = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) ); scene.add( Cube ); function onDocumentMouseDown( event ) { var vector = new THREE.Vector3( ( event.clientX / window.innerWidth )

问题 I have a program that works great when my POT DataTextures are 1:1 (width:height) in their texel dimensions, however when they are 2:1 or 1:2 in texel dimensions it appears that the texels are being incorrectly read and applied. I'm using continuous indexes (1,2,3,4,5...) to access the texels using the two functions below. I'm wondering if there is something wrong with how I am accessing the texel data, or perhaps if my use of a Float32Array for the integer indexes needs to be switched to a

问题 I have an icosahedron mesh which I am rotating and then adding circle geometries and setting their location to each vertex at every frame in the animation loop. geometry = new THREE.IcosahedronGeometry(isoRadius, 1); var material = new THREE.MeshBasicMaterial({ color: wireframeColor, wireframe: true }); isoMesh = new THREE.Mesh(geometry, material); scene.add(isoMesh); Set each circle geometries location as the icosahedron mesh rotates: function animate() { isoMesh.rotation.x += 0.005; isoMesh

问题 Is it possible to use the OrthographicTrackballControls of three.js with Angular 4? I tried with: npm install --save three-orthographic-trackball-controls And in my component: import { OrthographicTrackballControls } from 'three-orthographic-trackball-controls'; I had no success and no idea on how to do this. I found solutions for OrbitControls , but using another npm package and RequireJS . Any ideas to solve this issue will be helpful. Thanks in advance. 回答1: See working example of using

问题 when ever I set camera.position anything other than (0,0,0) my rotation with pointer lock controls is all over the place. The whole scene goes crazy. It seems to work if I change the position of yawObject and not camera. So I guess that is ok, How can i change the default rotation of pointer lock controls - I want to start by looking to the right. Thanks. 回答1: controls.getObject().position.set( x, y, z); 来源： https://stackoverflow.com/questions/34324122/camera-position-rotation-wrong-when-not