three.js

问题 How to load cross domain image in textureloader and im getting "Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin..." error var loader = new THREE.TextureLoader(); loader.load('http://myurl.com/img/box.png', onTextureLoaded); 回答1: First option Add a CORS header to the asset, permitting cross-domain requests: Access-Control-Allow-Origin: * Second option You can create a server side proxy, and then load the asset like this loader.load('myproxy?url=http://myurl.com/img

问题 if a scene does not show up all over the page and you can sroll , Raycaster stops working and is offset by what you have scrolled . Srollt to the side by 20 pixels down , you have 20 pixels below the object click , so that the object Raycaster recognizes correctly . How fix i the problem? Would be very grateful for help 回答1: use the var rect = renderer.domElement.getBoundingClientRect(); mouse.x = ( ( event.clientX - rect.left ) / ( rect.width - rect.left ) ) * 2 - 1; mouse.y = - ( ( event

问题 Is there any way to obtain a depth map in three.js? I am interested in producing something similar to what a Kinect would produce for a given scene. I have come across a hacky way of using no colors and fog to mimic this but it would not be ideal because it would use two different scenes and would be variant to lighting. Another way to do this I believe would be to access the depth buffer but it appears this cannot be accessed through three.js. 回答1: Yep. Try using MeshDepthMaterial . 来源：

问题 I'm working on a project using the three.js editor source code that you can download from the three.js website. As a part of the project I need to reorient the axes so that they can be aligned with standard coordinate axes used for airplanes (x-axis out the nose, y-axis out the left wing, z-axis down). The orientation I am describing can be seen when clicking on the link below: design axis orientation In order to get this I have modified the index.html (in the editor folder), three.js (in the

问题 In my scene I have a simple cube: var test = new THREE.Mesh(new THREE.CubeGeometry(10,10,10), new THREE.MeshBasicMaterial()); scene.add(test); This cube is getting traversed/scaled through the user with THREE.TransformControls . What I need is the boundingbox of the cube after these interactions. So I'm doing test.geometry.computeBoundingBox(); var bb = test.geometry.boundingBox; bb.translate(test.localToWorld( new THREE.Vector3())); But I always get a wrong boundingbox! The translation is

问题 I'm trying to modify this example from three.js to control the character(s) with mouse clicks. First, when I click on the canvas, I need the mouse coordinates and convert that into 3D space coordinates using THREE.Raycaster.intersectObjects. In the modified code, on left mouse up, I have the following: var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, 0.5); var projector = new THREE.Projector(); projector.unprojectVector

问题 I'm still pretty new at Three.JS, I'm pretty happy where I have gotten so far, but just need some help. I have an GLTF object loaded into the scene, I want to be able to load different textures onto the object on the website by the user selecting a style, (like a customization feature). Below is my code, at the moment it outputs nothing and I get the following error: In Chrome: "TypeError: Cannot set property 'map' of undefined" In Firefox: "TypeError: model.material is undefined" var

问题 I have this code sample from threejs example [http://threejs.org/examples/#webgl_animation_cloth] where a float value is converted to vec4. I have seen this logic on few other forums but no explanation. Could someone explain what this logic is doing and the use of 256 ?.I understand the bitwise masking and shifting . I have seen this link too Packing float into vec4 - how does this code work? It says the vec4 will be stored in a 32 bit RGBA8 buffer finally. Since we are passing the depth

问题 I'm working on a drawing program and what I need is a THREE.Object3D element that would have a constant size - just like the line has always 1px. In other words, I'm trying to put to the stage an object which size would be always the same to the viewer ( so if you got closer to it, it's size wouldn't change ). Similar mechanism is with THREE.Line - it's always 1px wide. I need to create a circle (or maybe other shapes also). What's the best way to do that? 回答1: Sounds like you need to use an

问题 I'm currently working on my little project using three.js, but I am having hard time mapping texture on objects loaded by THREE.OBJLoader. There is no such problem for three.js built in geometry. I'm really confused now... // Load the model from obj file [teapot, 74KB] var onProgress = function ( xhr ) { }; var onError = function ( xhr ) { }; //var oCubeMap = THREE.ImageUtils.loadTexture(imageNames); var objTexture = new THREE.ImageUtils.loadTexture(textureImage); var oMaterial = new THREE