three.js

问题 I have the following JavaScript code, taken from an example, which draws some circles, and when you click on one of them, it changes color. But I also want to change the radius/size of a circle when you click on that circle (and leave the other circles unchanged). The documentation does not help at all, and I have tried several variations in the code like intersects[ 0 ].object.geometry.parameters.radius = 50; intersects[ 0 ].object.geometry.radius = 50; intersects[ 0 ].object.geometry

问题 When using a model as a source to an entity, say gltf, is there a way we know the original size? Since the scale attribute works on relative size, it seems to be a trial an error to fit the model to our desired size. I tried using the geometry.getComputingBox() of the mesh of the model but it returns null. Wondering if there is a component that is available that lets us specify the scale in absolute terms. 回答1: (This would have come as a comment but as I don't have enough rep points this is

问题 I am writing an audio visualizer application using the web audio api and the three.js library. I've had a lot of success using the html5 element to get audio from a local mp3 or a streaming mp3 file with the createMediaElementSource() method from the AudioContext object, but I was hoping my user would have the ability to visualize music from their itunes or Spotify apps as well. I've briefly touched on the 'audio jack api' but most of the documentation is over my head as I have no experience

问题 I'm using ObjectLoader to load my scene (exported using ObjectExporter). How can I apply textures to my objects while loading? 回答1: Use ObjectLoader to load the object, and then use it's geometry to create a mesh with a loaded texture: var loader = new THREE.ObjectLoader(); loader.load("models/ship.json", function (obj) { var material = new THREE.MeshLambertMaterial({ map: THREE.ImageUtils.loadTexture('models/textures/ship.jpg')}); var mesh = new THREE.Mesh(obj.geometry, material); scene.add

问题 I copied and pasted the Three.js code given here into an HTML file and downloaded the three.js package from the website, and configured the <script> tag to point to the location of the file three.min.js . Nonetheless, when I open the HTML file, it displays a blank white screen. What am I missing? 回答1: well I tryed the exact same thing and I'm seeing the wireframe cube rotating on screen. A few things to try. 1) drop the three.min.js right in the root folder and copy/paste the example code

问题 I'm trying to convert Mouse position to world coordinates in Three via Aframe Using something like let mouse = new three.Vector2() let camera = document.querySelector('#camera') let rect = document.querySelector('#sceneContainer').getBoundingClientRect() mouse.x = ( (event.clientX - rect.left) / rect.width ) * 2 - 1 mouse.y = - ( (event.clientY - rect.top) / rect.height ) * 2 + 1 let vector = new three.Vector3( mouse.x, mouse.y, -1 ).unproject( camera ) However it doesn't seem to be able to

问题 one three.js example of video on iPhone 6s did not work( only black panel) https://stemkoski.github.io/Three.js/Video.html But the example works fine on PC desktop browser. It failed in Safari & Chronme on iPhone 6s 回答1: As of 2019 the solution for iOS is you have to start the video in user gesture event like 'click' or 'touchstart' Otherwise the browser will refuse to play the video someElement.addEventListener('click', () => { videoElement.play(); }); you have to set playsInline to true

问题 I wonder what would be the best way to generate a custom 3D polygon given an array of 3D points in three.js. It is a simple polygon without holes. The points are ordered so that they represent neighboring vertices.I can do it in 2D, but I don't want the vertices to be coplanar. Thank you for your help! 回答1: The main problem here is how to create a 3D mesh from a bunch of points. In other words: you need to figure out which of the vertices should be connect to form a triangle. This is an

问题 First I will expose the question, then I will show the test I made, the points where I clicked, the two sets of results, and the conclusions I got: Why exists an area where our raycaster reports that it has not intersected with the 3D model loaded? Here we see the points where I clicked: Then here we have the first result set: The first pair of coordinates, the ones logged as 'Mouse x position is: ' are the ones collected by: mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1; console

问题 I am working on a project in three.js , where the user can change dynamically the dimension of the objects inside it. The objects are two boxes with different dimensions and one box, should be always located on top of the other one. For instance, if the height of cube is 10, chimney.position.y should be 10. I tried different possibilities, but it is not working. Here is a snippet of my code: var cubeHeight = 0.1; var boxGeometry = new THREE.BoxGeometry(0.1, cubeHeight, 0.1); var boxMaterial =