three.js

问题 I have a globe built using three.js Refrene:http://callumprentice.github.io/apps/globe_manipulator/index.html I need to show a HTML div at a specific lattitude/longitude, can you tell me how to position the div at some specific lat/long? What have i tried: I am not even able to proceed with the conversion of lat lon to screen x and y cordinates. My JS code: var camera, scene, renderer, controls, root_object = 0, mesh; var uniform_color = true, uniform_height = true, extrusion_amount = 5.0;

问题 Is there a way to change the SphereGeometry() object to flat plane on screen? I want to do it exactly as this site, so when you click on bottom right buttons, the view is changed. The code below is how the sphere created. Simplicity is important. var loader = new THREE.TextureLoader(); loader.load("js/model/map.jpg", function(texture) { var earthMaterial = new THREE.MeshBasicMaterial({ map: texture, bumpscale: 0.05 }); var earthSphereGeometry = new THREE.SphereGeometry(80, 32, 32);

问题 I'm experiencing some trouble with the Three.js examples. You can see in the image below, it seems to be working fine online, but it's not working on my desktop. I change the code trying to figure out whats wrong, and the problem seems to be on the texture loading. You see, if I change the texture material to some basic color it work, but with a texture, don't. Can you guys tell me what it's wrong? 回答1: Your examples are not displaying, but I expect that your answer is in the Three.js wiki on

问题 UPDATE: Issue was that texData object was recreated each time and thus reference for DataTexture was lost. Solution by WestLangley was to overwrite the data in texData instead of recreating texData object. I have a simple threejs scene with a DataTexture in a ShaderMaterial . The data array passed to it once during initialization is updated on mouse events. However the DataTexture does not seem to update. Did i assign uniforms or texture data wrongly? Or using the needsUpdate flags wrongly?

问题 I'm using Three.js with the WebGLRenderer. I'm trying to figure out or see an example for how to draw circles using CircleGeometry and be able to control their fill and border color from a vertex or fragment shader. Is this even possible without using an image for the texture? Sorry if this is really simple, I'm still trying to wrap my head around Three.js and WebGL so any help is appreciated. 回答1: Geometry presentation of the circle is imprefect because roundness depends on the number of

问题 I'm exporting a three.js material using material.toJSON() provided method, this is the result: { "metadata":{"version":4.5,"type":"Material","generator":"Material.toJSON"}, "uuid":"8E6F9A32-1952-4E12-A099-632637DBD732", "type":"MeshStandardMaterial", "color":11141120, "roughness":1, "metalness":0.5, "emissive":0, "map":"876D3309-43AD-4EEE-946F-A8AE8BA53C9E", "transparent":true,"depthFunc":3,"depthTest":true,"depthWrite":true, "textures":[ { "uuid":"876D3309-43AD-4EEE-946F-A8AE8BA53C9E", "name

问题 I have a scene with lots of objects using ExtrudeGeometry . Each of these need to update each frame, where the shape that is being extruded is changing, along with the amount of extrusion. The shapes are being generated using d3's voronoi algorithm. See example. Right now I am achieving this by removing every object from the scene and redrawing them each frame. This is very costly and causing performance issues. Is there a way to edit each mesh/geometry instead of removing from the scene?

问题 i'm trying to generate a square with tree.js custom Geometry. but this code var cubeGeo = new THREE.Geometry(); cubeGeo.vertices.push( new THREE.Vector3( -25, 25, -25 ) ); cubeGeo.vertices.push( new THREE.Vector3( 25, 25, -25 ) ); cubeGeo.vertices.push( new THREE.Vector3( -25, -25, -25 ) ); cubeGeo.vertices.push( new THREE.Vector3( 25, -25, -25 ) ); cubeGeo.faces.push( new THREE.Face4( 0, 1, 2, 3, new THREE.Vector3( 0, 0, 1 ), 0xffffff, 0) ); var cube = new THREE.Mesh( cubeGeo, //new THREE

问题 I am new to Three.js. I want to draw curves (based on some parametric equations) on 3D space, using THREE.JS , to illustrate the path of drawing. To achieve this basically I tried in two ways: APPROACH ONE: update values in geometry. : var lineGeometry = new THREE.Geometry(); lineGeometry.vertices.push(new THREE.Vector3(starting_x,starting_y,starting_z)); var lineMaterial = new THREE.LineBasicMaterial({color: 0xffffff}); var line = new THREE.Mesh(lineGeometry, lineMaterial); scene.add(line);

问题 I am trying to achieve an effect similar to one of the cardboard app examples that Google has put out with their cardboard app called the 'exhibit'. I have a 3D object that I want to rotate using device orientation control. Right now with just the device orientation control, I can view the 3D object but when I turn around, the camera rotates (it seems) causing the object to fall out of view until I turn all the way back around to where it was in the beginning. In other words the camera seems