three.js

问题 I have a quite complex shape (dressed girl) that in Blender is broken down into different objects and it's loaded into Three.js with the JSON loader (with a little hack I made, that uses zipped files instead of just JSON files, as there are a lot of vertices). As I want to change dynamically the style of the dress from a Web page, I was wondering how I can show/hide different pieces (e.g. sleeves) in the scene. I tried traversing the THREE.Mesh , but there are no children. When I export from

问题 I could not found example of THREE.BufferGeometry with texture coordinates. Is it supposed to be used for textured mesh? I can't get it to work. Here is my test code: var quad_vertices = [ -30.0, 30.0, 0.0, 30.0, 30.0, 0.0, 30.0, -30.0, 0.0, -30.0, -30.0, 0.0 ]; var quad_uvs = [ 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0 ]; var quad_indices = [ 0, 2, 1, 0, 3, 2 ]; var geometry = new THREE.BufferGeometry(); geometry.attributes = { position: { itemSize: 3, array: new Float32Array(3 * 4) }, uv: {

问题 I am using 3d modifiers https://github.com/foo123/MOD3 to bend a cube. After the geometry is updated (vertex positions are changed) the lights are not updated, the cube is still shaded as if nothing changed. So I tried cube.geometry.computeVertexNormals() and cube.geometry.computeFaceNormals() but after that the cube is not rendered like a cube anymore but like an "ugly sphere": On the left is shading after computeVertexNormals() , on the right is the original shading. How can I update the

问题 How can I enable an extension on a Three.js shader? My code so far: getting extension: var domElement = document.createElement( 'canvas' ); var gl = domElement.getContext('webgl') || domElement.getContext('experimental-webgl'); gl.getExtension('OES_standard_derivatives'); on my shader: fragmentShader: [ "#extension GL_OES_standard_derivatives : enable", "code..." ]... The console output: WARNING: 0:26: extension 'GL_OES_standard_derivatives' is not supported ERROR: 0:32: 'dFdx' : no matching

问题 I am rendering a sphere via three.js and when I apply a texture it works just fine. However, the equation I'm using to make markers isn't something I can play around with. How can I rotate a texture on a sphere so that I can align the image according to the marker positions? specifically in the x direction. Problem...Markers should be over Kagoshima, Japan and Hong Kong, China Should Be....and No I did not solve it...this is what it should look like not how it is now var geometry = new THREE

问题 I have an object where random open particles and others are solid. How do i place a fake sun inside of the object and get Rays through the open particles using threejs. When the object rotate either X,Y Rays should spreed through the open particles ( POST PROCESSING ) ? SAMPLE VIDEO My Object three.Js code is bellow var camera, scene, renderer; var geometry, material, mesh; init(); animate(); function init() { camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 10

问题 I am using three.js to call a fragment shader - that shader specifies a color for my material, broken out into rgb - and I want to see if I can multiply those colors by a random value. This is the code I'm using so far: gl_FragColor = vec4( color.r*.5, color.g, color.b, smoothstep( 8000.0, -8000.0, gl_FragCoord.z / gl_FragCoord.w ) ); //MH - creates colors by multiplying color values and this is what I'd want to do if it were javascript, though obviously this doesn't work inside a GLSL shader

问题 Question updated with new code I am trying to write a WebGL shader that will draw a TMX Layer (exported from the Tiled editor). I am using THREE.js to create a Plane mesh and have the material be a ShaderMaterial that will draw the map on it. For those who don't know a tilemap exported by the Tiled editor as json will give a data attribute for each layer; it contains an array of numerical values, each of which is the tile index in the tileset like: "data": [5438, 5436, 5437, 5438, 5436, 5437,

问题 (new to stackoverflow, new to webgl/three.js, ...) I'm using three.js r54 to plot a force-directed graph. the edges between the nodes are THREE.Lines, which is fine, but lines are not selectable with a raycaster. so my aim is to take cylinders instead(/along with) of lines(also because I can do some further stuff: using textures,...) this is what I'm doing to place the cylinders: // init reference vector var upVec = new THREE.Vector3(0,1,0); //---withhin a loop--- // get direction var

问题 I'm having hard times figuring out what's the best way to check if a Object3d is visible for the eyes of the camera. I'm having a sphere in the middle of the screen. Some cubes are added on it's surface randomly. What I would need is a way to check which cubes are visible (on the front half of the sphere) and which one are invisible (on the back half of the sphere) for the eyes of the camera. What I have found so far seems to be the right direction - but I must be missing something with the