three.js

How to use GLTF Loader in three.js? Texture and material displaying as black

由 我是研究僧i 提交于 2019-12-11 11:55:30
问题 I'm having issues loading a gltf. The model is able to load successfully but all the textures and materials (already embedded in the .gltf) are completely black. When I view it in the gltfviewer, all the textures and materials show up correctly. I'm new to three.js so if anyone can walk me through using the GLTF loader, I would greatly appreciate it!! 回答1: This issue is essentially the same as How to use AmbientLight in combination with MeshStandardMaterial? — your model has a 100% metallic

cancel download jsonLoader & ImageUtils.loadTexture

由 巧了我就是萌 提交于 2019-12-11 11:49:29
问题 How to cancel the download of an object or texture? THREE.ImageUtils.loadTexture(... jsonLoader.load(... 回答1: AFAIK, it's not built in. You could edit the XHRLoader class (or create your own) to make the load() function to return the XMLHttpRequest here. This would allow you to call its abort() function. 来源： https://stackoverflow.com/questions/24982978/cancel-download-jsonloader-imageutils-loadtexture

Strange shaking while rotating the camera with Orbit Controls in Three.js

由 五迷三道 提交于 2019-12-11 11:37:03
问题 I'm making a model of the Solar System. This is my current metric: scale = 0.001; // 1 unit - 1 kilometer var AU = 149597871 * scale; This is how i define the camera, renderer and controls: camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1 * scale, 0.1 * AU); renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); controls = new THREE.OrbitControls(camera, renderer.domElement); Then i give the user the option to jump between the objects so this

three.js - move camera inside tube geometry

由 大兔子大兔子 提交于 2019-12-11 11:25:18
问题 In a 3d scene tube geometry is built by loading 200 points as JSON data from external javascript file. Below is the complete code: <!DOCTYPE html> <html lang="en"> <head> <title>3d Model using HTML5 and three.js</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <style> body { font-family: Monospace; background-color: #f0f0f0; margin: 0px; overflow: hidden; } #Find_panel { position: absolute; right: 5px;

Three.js CanvasRenderer depth sorting

由 一笑奈何 提交于 2019-12-11 11:19:42
问题 I have a few CubeGeometry objects rendered on the CanvasRenderer. I am getting some clipping issues due to depth sorting as shown on the following image. Now I have seen the responses on here that this is due to limitations in CanvasRenderer and I have tried applying a few things to get a better result but there is still the clipping issues. I have overdraw set to 1 and I have increased segments as much as I can without impacting performance too much. The image looks correct in the

Parsing wavefront obj file consists of polygons in three.js

由 情到浓时终转凉″ 提交于 2019-12-11 11:13:22
问题 In my 3D object; I have several boxes like; But if I try to load and display obj and mtl file with three.js, 5-sided or more-sided objects not loaded properly ( like below ) . Then; I discover that three.js supports only 3-sided or 4-sided faces. Is there any solution to divide these faces in object file and load them ? 回答1: You need to triangulate your model before exporting it. Most 3D editors out there have this option. Some editors have that as option in the OBJ exporter options. If that

THREE.JS, ignore parent's rotation

由 邮差的信 提交于 2019-12-11 11:08:44
问题 I'm trying to make child object follow parent's position and behave like a normal child, however I want it to keep it's rotation unchanged. What's the best way to do that without affecting performance(I'm tight on cpu budget already running 2 workers and having lots of objects)? Is there a setting which would allow to only child's position being affected? Also an important thing is that when parent is being rotated then child's position should follow that rotation. 回答1: You want to prevent a

Three.JS - how to set rotation axis

由 …衆ロ難τιáo~ 提交于 2019-12-11 11:00:53
问题 So I've been playing around with Three.JS (graphics/anim not my strong point) and came up with this, adapted from a tutorial: Here's a JS Fiddle As you can see, I'm almost certainly a 3D animation genius. I digress... My question is: how to get the objects to rotate about their centre - not, as currently, about an extremity? I'm conscious of the particle.rotation.set method but I don't know what values to pass and I can't seem to find this method in the Three.JS documentation. Looking around,

All is inverted when i use orthographic view

由 此生再无相见时 提交于 2019-12-11 10:57:25
问题 I just made a 3D Graph with edges and vertices and when i change the view to orthographic all is inverted and the edges can be viewed inside the vertices, i think that is just an adjust with the normals, but im not sure if is really that. I have Labels above these vertices and its upside down in orthographic view. Anyone have an idea to deal with this situation? Im using THREE.js to build this graph Below is the code that perform the camera projections. var width = options.width || 800,

Remove a group from scene

由 爱⌒轻易说出口 提交于 2019-12-11 10:49:43
问题 I´m using Three.js, and I created a group of meshes and inside another group pgrupo= new Array (); fgrupo=new Array (); scene.add(pgrupo[0]) pgrupo[0].add(fgrupo[0]): pgrupo[0].add(fgrupo[1]): How can I remove a fgroup from the scene? if I use: scene.remove(fgrupo[0]); or scene.remove(pgrupo[0]); Nothing happened. How can I delete this things from the scene? 回答1: Instead of using an Array use the THREE.Object3D and the .add() and .remove() methods. So pgrupo = new THREE.Object3D(); fgrupo = =
订阅 three.js