three.js

问题 I am building a website running on THREE.js to generate a 3D world. From experience with video games, I know they usually use a camera field of view angle of about 90 degrees. When I set PerspectiveCamera in THREE.js to such a high FOV value, however, the scene is severely distorted. This distortion is somehow removed in games while preserving the large field of view. How is this done? Can I do this in THREE.js, too? Thanks! This is how the camera is created: new THREE.PerspectiveCamera( 75,

问题 I am using jupyter-cadquery to visualize some 3D models made with CadQuery. When visualizing the models on a Jupyter notebook, everything works as expected. But when trying to embed the widget in an HTML document, it seems the camera, on load, is pointing to (0, 0, 0) , not as expected. Once you interact with the widget, the camera will point to the expected coordinate. Here is the code to reproduce the error and an animation of the mentioned problem (see instructions bellow on how to

问题 I'm new to three.js and WebGL in general and I'm trying to make a simple earth globe in 3D with a SVG texture applied on it (so that I can zoom in without quality loss). I tried to load a svg image instead of my png image. I worked, but the image was "rasterized" removing all advantages of using svg :/ Is is possible to do that ? If yes how ? Thanks this.loader = new THREE.TextureLoader(); this.loader.load("someimage.svg", texture => { //create the sphere const sphere = new THREE

问题 I am using three.js and dat.gui with a text property. Also, I have OrbitControls in my scene: cameraControl = new THREE.OrbitControls(camera); cameraControl.update(); But there is a problem with this kind of scene. The text at the GUI doesn't work . You can't type anything in that box. And I have debugged it, and the problem is caused by OrbitControls. Do you know a way or workaround to solve it? Thanks! 回答1: You need to pass the dom element you want to listen the events from. cameraControl =

问题 I am using three.js and dat.gui with a text property. Also, I have OrbitControls in my scene: cameraControl = new THREE.OrbitControls(camera); cameraControl.update(); But there is a problem with this kind of scene. The text at the GUI doesn't work . You can't type anything in that box. And I have debugged it, and the problem is caused by OrbitControls. Do you know a way or workaround to solve it? Thanks! 回答1: You need to pass the dom element you want to listen the events from. cameraControl =

问题 Am using three.js How can I control the rendering order? Let's say I have three plane geometries, and want to render them in a specific order regardless of their spatial position. thanks 回答1: You can set renderer.sortObjects = false; and the objects will be rendered in the order they were added to the scene. Alternatively, you can leave sortObjects as true , the default, and specify for each object a value for object.renderOrder . For more detail, see Transparent objects in Threejs Another

问题 I am using THREE.JS rev 49. My program needs to update a mesh by changing it's geometry. Unfortunately the display does not seem to update. Here is my code : // theObject is an array of associatives : // { // object1: {mesh: undefined/THREE.mesh, mat: THREE.Material, geo: THREE.Geometry} // object2: {mesh: undefined/THREE.mesh, mat: THREE.Material, geo: THREE.Geometry} // ... // } // In my function, theObject[i].mesh geometry must change to be theObject[i].geo. for(i in theObjects) { //* if (

问题 I am using THREE.JS rev 49. My program needs to update a mesh by changing it's geometry. Unfortunately the display does not seem to update. Here is my code : // theObject is an array of associatives : // { // object1: {mesh: undefined/THREE.mesh, mat: THREE.Material, geo: THREE.Geometry} // object2: {mesh: undefined/THREE.mesh, mat: THREE.Material, geo: THREE.Geometry} // ... // } // In my function, theObject[i].mesh geometry must change to be theObject[i].geo. for(i in theObjects) { //* if (

问题 Basically, I want the setup where I could go to preserveDrawingBuffer=true, render the scene once, grab the screenshot, and go back. However, this poses two problems: there is no method in renderer to dispose all the buffers, canvas goes black if I do renderer = new THREE.WebGLRenderer({canvas:renderer.domElement,preserveDrawingBuffer:true}); How do I do this properly? EDIT: I did not find the way to toggle this, so I had to clone scene and create second renderer instead to make the

问题 Basically, I want the setup where I could go to preserveDrawingBuffer=true, render the scene once, grab the screenshot, and go back. However, this poses two problems: there is no method in renderer to dispose all the buffers, canvas goes black if I do renderer = new THREE.WebGLRenderer({canvas:renderer.domElement,preserveDrawingBuffer:true}); How do I do this properly? EDIT: I did not find the way to toggle this, so I had to clone scene and create second renderer instead to make the