three.js

How to mange memory used by A-Frame?

由 若如初见. 提交于 2020-01-01 19:18:11
问题 I'm building a web app which has 360 degree images loaded into an a-sky primitive. I'm using aframe-react . There are total of 20+ 360 degree images and only one img asset inside a-assets . once user switches scene react will change src of asset img and scene will re render. Everything works fine but it's using lot of memory because of caching. One time it used 4GB+ memory. In mobile the web page crashes after switching through ~8+ images. How do I handle this situation? I tried looking into

Mapping a stereographic projection to the inside of a sphere in ThreeJS

由 三世轮回 提交于 2020-01-01 18:54:22
问题 When it comes to 3D animation, there are a lot of terms and concepts that I'm not familiar with (maybe a secondary question to append to this one: what are some good books to get familiar with the concepts?). I don't know what a "UV" is (in the context of 3D rendering) and I'm not familiar with what tools exist for mapping pixels on an image to points on a mesh. I have the following image being produced by a 360-degree camera (it's actually the output of an HTML video element): I want the

Duplicate points in three.js font

由 穿精又带淫゛_ 提交于 2020-01-01 18:51:12
问题 I've used Facetype.js to convert a ttf font to a js font for three.js however I'm getting a number of duplicate point errors like so: THREE.Shape: Duplicate point 41.52:10.928 THREE.ShapeUtils: Unable to triangulate polygon! in triangulate() How do I fix these issues? 回答1: Either remove the duplicates from your geometry before you do the triangulation or use a different triangulation library for example earcut.js . Earcut is less sensitive for flaws in your geometry definition (like duplicate

How to switch Three/js camera controls from First Person to Orbit and back

由 生来就可爱ヽ(ⅴ＜●) 提交于 2020-01-01 18:17:22
问题 You can switch from Three.js Orbit Controls to FirstPerson controls without a problem. But when you go from First Person to Orbit the display gets stuck in a 'mousedown' mode. What do you need to do to go back and forth between First Person and Orbit controls seamlessly? The jsBin with the demo http://jsbin.com/jekebo/2/edit?html,js,output The two functions function setControlsFirstPerson() { camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 ); camera

Three.js: How do I scaling and offset my image textures?

由 一笑奈何 提交于 2020-01-01 16:54:26
问题 How do I scaling and offset my image textures? My image dimensions is 1024px x 1024px. var textureMap = THREE.ImageUtils.loadTexture( 'texture.png' ); 回答1: Have a look at [this documentation][https://threejs.org/docs/#api/en/textures/Texture]: .repeat - How many times the texture is repeated across the surface, in each direction U and V. .offset - How much a single repetition of the texture is offset from the beginning, in each direction U and V. Typical range is 0.0 to 1.0. .wrapS - The

Add color to .obj in ThreeJS

由 99封情书 提交于 2020-01-01 16:52:10
问题 I am new to ThreeJS and have a simple question. I have the following code that will work properly, but I cannot add color to my .obj. The short and narrow of it is that I designed a game controller in Solidworks 2012, then I exported the CAD file as a .stl. I then used MeshLab to export the .stl as a .obj. Now I use the .obj in ThreeJS and it works, but I cannot for the life of me get color added to the .obj. Here is the code <!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl -

How do I construct a hollow cylinder in Three.js

由 随声附和 提交于 2020-01-01 12:32:16
问题 I'm having difficulties constructing a hollow cylinder in Three.js. Should I go and construct it using CSG or by stitching the vertices together? 回答1: This solution uses ChandlerPrall's ThreeCSG.js project: http://github.com/chandlerprall/ThreeCSG (For now, I recommend using the experimental version that supports materials - the uv branch - http://github.com/chandlerprall/ThreeCSG/tree/uvs) Here's the code you will need: // Cylinder constructor parameters: // radiusAtTop, radiusAtBottom,

three.js emissive material maps

由 独自空忆成欢 提交于 2020-01-01 12:05:13
问题 I'm currently experimenting a bit in three.js, and I'd like to use an emissive map. I've tried just loading a texture into the emissive property of a phong material, but it doesn't work like that, unfortunately. Here's my code: var params = { emissive: THREE.ImageUtils.loadTexture( emissive ), shininess: shininess, map: THREE.ImageUtils.loadTexture( map ), normalMap: THREE.ImageUtils.loadTexture( normalMap ), normalScale: new THREE.Vector2(0,-1), envMap: this.reflectionCube, combine: THREE

three.js emissive material maps

由 陌路散爱 提交于 2020-01-01 12:05:03
问题 I'm currently experimenting a bit in three.js, and I'd like to use an emissive map. I've tried just loading a texture into the emissive property of a phong material, but it doesn't work like that, unfortunately. Here's my code: var params = { emissive: THREE.ImageUtils.loadTexture( emissive ), shininess: shininess, map: THREE.ImageUtils.loadTexture( map ), normalMap: THREE.ImageUtils.loadTexture( normalMap ), normalScale: new THREE.Vector2(0,-1), envMap: this.reflectionCube, combine: THREE

Using matrices to transform the Three.js scene graph

由 烈酒焚心 提交于 2020-01-01 12:03:56
问题 I'm attempting to load a scene from a file into Three.js (custom format, not one that Three.js supports). This particular format describes a scene graph where each node in the tree has a transform specified as a 4x4 matrix. The process for pushing it into Three.js looks something like this: // Yeah, this is javascript-like psuedocode function processNodes(srcNode, parentThreeObj) { for(child in srcNode.children) { var threeObj = new THREE.Object3D(); // This line is the problem threeObj
订阅 three.js