three.js

问题 I'm being driven mildly insane looking for a working combination of interactions. I basically need to make something like a google earth style setup, where you can: orbit round an object, highlighting the centre-most location, click a menu link and animate rotation of the object to a particular 'location' (highlighting the new location). I'm using orbitcontrols for the first bit, and was hoping to tween the orbitcontrols directly for the menu link bit, but couldn't get the camera to move in

问题 I'm trying to load an OBL object and, on pre-specified containers (plains) display a texture. However, after I load an object, I start getting the following errors: THREE.WebGLRenderer 58 XHR finished loading: "http://localhost:8000/original-material/room2/soba-5-2.obj". about to traverse... about to add to scene WebGLRenderingContext: GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 0 WebGL: too many errors, no more errors will be reported

问题 I'm trying to punch some simple square holes in a complex Three.js shape with : var Shape1 = new THREE.Shape(ShapeCoordinates1); PunchHole1 = new THREE.Path(Punchcoordinates1); PunchHole2 = new THREE.Path(Punchcoordinates2); Shape1.holes.push(PunchHole1); Shape1.holes.push(PunchHole2); etc. Because of the irregular shape, with vertex coordinates that probably overlap with punched holes, this goes terribly wrong when punching out multiple holes, like this : This should be a solid outlined

问题 I am using objloader to load multiple objects. I am trying to move one of the objects and need to have the updated vertex positions. while loading the objects I converted the buffergeometry to geometry and run some functions. I checked some samples all updating the vertices of the buffergeometry. Do I need to convert it back to buffergeometry or not ? I need to have the real time positions while moving to calculate some other functions, so I prefer not to keep on converting from buffer to

问题 When I setup my scene, add geometries etc, how do I set the camera so I can see my whole scene? I'm trying to implement an algorithm using boundingboxes, but I'm kinda stuck. 回答1: You really only need to find the greatest absolute value between all your variables by using Math.abs(number) , once you have found the greatest of all you can set the depth(position.z) of the camera to that number. I have made a simple function which receives 2 numbers and returns the greatest. function

问题 I'm trying to use thee.js to only update the zbuffer (I'm using preserveDrawingBuffer to create a trace effect). However I can't find any way to only write to the zbuffer with the standard materials, so far I've tried: setting the material's visible to false, which stops the object rendering. setting the material's opacity to 0.0, which means nothing gets rendered. Is there a 'standard' way of doing this, or do I need to use a custom fragment shader? 回答1: You can render to the depth buffer

问题 I'm trying to use FileReader to pass a client side ASCII file to loader.load() but it looks like the file never gets there. The file does appear in the 3D scene if I use loader.load('server path to test_file.stl') instead of loader.load(fileObject) . I included an alert() function to display the file's ASCII text and that tells me the JavaScript is grabbing and processing the file and there is no Chrome security barrier but apparently I'm not properly passing the file to loader.load() . <

问题 I'm having troubles with getting shadows to work in three.js . On the image below you can see a spotlight casting a shadow on an object with plane geometries. There is no object in between the spotlight near plane and the plane geometries of the wall. What can cause such behavior? The light is configured this way: var spotLight = new THREE.SpotLight(0xFFFFFF, 1); spotLight.position.set(0, -20, 100); spotLight.target.position.set(0,0,0); spotLight.shadowDarkness = 0.5; spotLight

问题 I've created a tube geometry with following function. function plotPath() { var obj = getPath(); var segments = 60; var closed = false; var debug = false; var radiusSegments = 12; var tube; var points = []; var x=0,y=0,z=0; for(var i=0; i<obj.path.length; i++) { console.log(obj.path[i].point); points.push(obj.path[i].point); } extrudePath = new THREE.SplineCurve3(points); tube = new THREE.TubeGeometry(extrudePath, segments, 10, radiusSegments, closed, debug); tubeMesh = new THREE.Mesh(tube

问题 I am having some problems with the TextGeometry in Three.js r74.. How do I implement it correctly? Here is my Codepen: codepen.io/cheesyeyes/pen/eJqZxK Thanks in advance! 回答1: Okey, for everyone who is looking for simple answers and not links and links to other overloaded examples: fonts have to be loaded with the three js FontLoader first: var loader = new THREE.FontLoader(); loader.load( 'fonts/fontname.js', function ( font ) { var textGeometry = new THREE.TextGeometry( "text", { font: font