three.js

问题 I would like to offer the opportunity to view output from the same data , in a spreadsheet, TBA sidebar and, ideally another type of HTML window for output created, for example, with a JavaScript Library like THREE. The non Google version I made is a web page with iframes that can be resized, dragged and opened/closed and, most importantly, their content shares the same record object in the top window. So, I believe, perhaps naively, something similar could be made an option inside this

问题 I am trying to make a THREE.JS scene with GLSL shaders applied, but am having trouble figuring out how to make it load my shaders. The scene appears to work, but the shaders don't do what they're supposed to. I'm using a shader loader function I found that uses pure THREE.JS instead of AJAX or Jquery. Here is the main javascript for my scene. var container, renderer, scene, camera, light, mesh, controls, start = Date.now(), fov = 30; window.addEventListener( 'load', function() { container =

问题 I have multiple meshes, and want to add a point in a random part contained within hexagon[0]. how can I do it? var Hexagon=new Array(); Hexagon[0] = new THREE.Mesh( HexagonExtrude[0],material[0] ); Hexagon[1] = new THREE.Mesh( HexagonExtrude[1],material[1] ); Hexagon[2] = new THREE.Mesh( HexagonExtrude[2],material[2] ); Hexagon[3] = new THREE.Mesh( HexagonExtrude[3],material[3] ); Hexagon[4] = new THREE.Mesh( HexagonExtrude[4],material[4] ); Hexagon[5] = new THREE.Mesh( HexagonExtrude[5]

问题 Edit 16 August, 2016 I finally managed to get it to throw an error that might expose what's going on. In my latest code edit, I was adding the ability to hot-swap between fragment shaders. This works fine for shaders with singleton uniforms, but swapping to a shader with a structure throws the following error: Uncaught TypeError: Cannot read property 'x' of undefined Call stack: setValue3fv @ three.js:31915 THREE.WebGLUniforms.StructuredUniform.setValue @ three.js:32148 THREE.WebGLUniforms

问题 I'm trying to reproduce example of Szenia Zadvornykh presented here https://medium.com/@Zadvorsky/webgl-masking-composition-75b82dd4cdfd His demo is based on three.js r80, so I referenced r101 and tried to remove most of unrelated parts, and just have scene with grid and png mask on top. Here's my code: http://jsfiddle.net/mmalex/y2kt3Lrf/ Having commented // composer.addPass(maskPass) the grid shows up. But it does not seem like uniform sampler2D tDiffuse has the output of render pass. I

问题 Trying to create interactive GUI for my app using threejs. I've found this tutorial: http://zachberry.com/blog/tracking-3d-objects-in-2d-with-three-js/ which explains exactly what I need, but uses some old release. function getCoordinates(element, camera) { var p, v, percX, percY, left, top; var projector = new THREE.Projector(); // this will give us position relative to the world p = element.position.clone(); console.log('project p', p); // projectVector will translate position to 2d v = p

问题 I am making a panorama like krpano.I want to know how can i use small images as a texture of one cube face? http://stemkoski.github.io/Three.js/Skybox.html This example uses 6 pics as texture of cube.Could i use many small tiles as each texture of cube face? 回答1: I think the answer is making a new geometry,set your own vertices,faces that meet your demand and then set the faceVertexUvs and materialIndex to make it well textured. vertices.forEach(function(v){ geom.vertices.push(new THREE

问题 I have some pretty simple 3D objects (basically THREE.Sphere which is a parent of 1-30 other THREE.Sphere s, with RGB color and no texture) to display in somewhat real time animation. The rendering is done in no time indeed, but I have some simple iterative calculation ( for-loops ) that are disturbing my display capabilities. The rendering itself is not the problem, but the computation for the next frame vertices is what causing the pain Meaning, when I just run the script, I can see that

问题 I'm learning three.js and for a project i need to create an inersection between a cylinder and a sphere. Here is the interesting part of the code : var sphere_mesh_3 = createSphereMesh(rayon_1, 145, color);//,-2,2,-2,2); sphere_mesh_3.position.z = 6; //scene.add(sphere_mesh_3); var sphere_mesh_4 = createSphereMesh(rayon_2, 145, color);//,-2,2,-2,2); sphere_mesh_4.position.z = 7.5; //scene.add(sphere_mesh_4); function getZmaxRelSurfaceAspherique(mesh) { var zMax = 0; for(var i = 0; i < mesh

问题 I have found a formula which does the following: https://threejs.org/examples/css3d_periodictable.html (the sphere version) I modified the code a little bit to work with my objects, but changed nothing in the math behind it. My question is if someone can explain what is exactly happening in the calculation for the position. This is the code: for ( var i = 0, l = 30; i < l; i ++ ) { var phi = Math.acos( -1 + ( 2 * i ) / l ); var theta = Math.sqrt( l * Math.PI ) * phi; var object = new THREE