three.js

问题 I've been stuck with this for so long now. I'm using a Fabricjs canvas as a texture for a 3D model in Three.js. The model renders the canvas as a texture every time there's a change on it. I would like to click on the model and programmatically select an item on the Fabricjs canvas. I achieved to transform the 3d coords to the Fabric 2D coords with a raycaster, so I can add new items to the canvas clicking directly on the model. But I can't find the way to select a canvas object clicking on

问题 I am working on a WebGL application using Three.JS library. I am trying to load Blender 3d model into my Three.js application in a Scene and try to navigate between one scene to another. I am able to successfully load blender 3d model js file into the scene and it shows the model properly in my Three.js based project. I am having the following requirements now, and unable to get it done. When i'm loading one scene to another scene, i want to do some kind of move transition from one scene to

问题 I'm adding objects to a scene for each entry in a database. I had a cube appearing in the scene for entry, but when I tried to add raycasting to click on objects it doesnt work, the objects dont appear and the console reads "Expression unavailable".. I got parts of the code from the three.js website for Raycasting so not sure what I'm doing wrong. Here is the JS code: var renderer, scene, container, camera; var geometry, material; var controls, group; var raycaster = new THREE.Raycaster();

问题 I've created a particle simulation (thing) with Three.js. I'm super happy with the simulation part of it, but for some reason I get a lot of screen flickering when I run it. The effect is more apparent on some machines / graphics cards, but I've noticed flickering with all of them. Here is the demo. Here is the source. Things I've tried: Narrowing the visible range on the camera Removing transparency from the PointCloud material Make each "simulator" have it's own camera, scene and mesh (I

问题 After making a stand alone three js app I wanted to make this three js app a component in my React application. I needed multiple scenes overlayed so I made a threeApp function that instantiates a scene, camera, renderer and adds it to the DOM. So I tried to make a lot of stuff reusable. After following this answer I managed to get some a three js scene with a spinning cube in my react app. Success! Since I already made a functioning OOP (?) implementation without react so I dove right in.

问题 I am using sprite sheets to create animated textures with THREE.js. Each sprite instance utilizes texture offsets to control which of the images to present that frame. Multiple animated sprites may be on the screen at once. Currently I am using Texture.clone() to duplicate the sprite sheet texture. However, unless I set Texture.needsUpdate to true, the texture will not display on the sprites. Setting needsUpdate to true allows me to display multiple independent animated sprites at once, but

问题 I'm new to three.js and WebGL in general. The sample at http://css.dzone.com/articles/threejs-render-real-world shows how to use raster GIS terrain data in three.js Is it possible to use vector GIS data in a scene? For example, I have a series of points representing locations (including height) stored in real-world coordinates (meters). How would I go about displaying those in three.js? The basic sample at http://threejs.org/docs/59/#Manual/Introduction/Creating_a_scene shows how to create a

问题 I'm trying to create a shader that takes into account the clipping planes I'm defining in the scene. These clipping planes work fine for all of the 'vanilla' materials I'm using: THREE.MeshLambertMaterial , THREE.MeshPhongMaterial , and THREE.MeshPhysicalMaterial , but THREE.ShaderMaterial is missing this implementation. This is an example of what I mean: https://jsfiddle.net/fraguada/27LrLsv5/ In this example there are two cubes, one with a THREE.MeshStandardMaterial and one with a material

问题 I prepared a working page that mixes WebGL and CSS3D (with a little help from SO here), and it works great. I throw in an iframe for good measure: But it lacks the ability to interact with the iframe. In mrdoobs pure CSS3D demo one can even scroll the pages and mark text etc: As it seems, the combination of WebGL in front of the CSS3D renderer hinders the interaction. Is there a way around this? Thanks, Dirk 回答1: You can apply CSS pointer-events:none to the WebGL node, so that events go

问题 I’m trying to get Three.js to render only the FrontSide outlines of geometries. What I want to achieve is a look as close as possible to this: With BoxGeomtry I came close to what I want, but using LineSegments on a CylinderGeometry gives vertical lines, which makes sense. Can you think of a way I can draw only the "visible" outlines? Here is what I tried so far: let coloredMaterial = new THREE.MeshBasicMaterial({ color: 0xFFD033, polygonOffset: true, polygonOffsetFactor: 1,