three.js

问题 I am mixing the CSS3D Renderer with WebGL Renderer to add HTML elements in 3D space to a WebGL scene. The CSS3DObject is in front of WebGL Meshes even though the WebGL Renderer has a higher z-index. Here is the jsfiddle http://jsfiddle.net/kd9Tc/ This is what the scene looks like. Note the back view. Whenever the CSS3DObject hits a mesh, I would like the correct depth to be displayed. I believe that this has something to do with the z-buffer or depth . I would prefer to have the text on a

问题 I have a camera in the center of the scene, 1 sphere at z=400 distance from the camera, with it's parent in the center. I want to drag the sphere up/down/left/right from the view but at the same time not change it's z - position from the center. 回答1: I ended up using another sphere and make it invisible, add side: THREE.DoubleSide to the material and use it for raycasting. 来源： https://stackoverflow.com/questions/19364909/drag-object-locked-at-certain-distance-radius-from-camera-view

问题 Windows 7 (64bit), SketchUp Make 13.0.4812. Goal: convert SketchUp .skp model to .obj and load to WebGL using three.js. Problem: sketchup exports model to .obj with external textures, and these textures are not loaded by three.js. Question: is it possible to save SketchUp model as one .obj file with textures? 回答1: No, .obj is a simple text format. You can't store textures in .obj. Here is an example on how to load the texture from a separate .jpg file. I copied the important bits: // texture

问题 /examples/js/postprocessing/OutlinePass.js from THREE.js r102 does not appear to work with skinned meshes. Specifically, the rendered outline always stays in the mesh's rest position. Is there some way to get this working (that is, to update the outline to reflect the current pose of an animated mesh)? OutlinePass does not appear to be documented (mod the comments in the code itself). Is there some other accepted method of outlining animated meshes? I'm in the process of migrating some code

问题 I'm uploading via dat.gui a 3D *.obj (e.g. a cube) with 8 vertices and 6 faces (vertex indices). Although I can successfully move my points to the vertices, I cannot evenly distribute them on the faces of the model. This is my process so far: (1) LOAD OBJECT FILE The example *.obj is quite simple: v 5.526871 -3.827843 1.523720 v 5.526871 -1.827843 1.523720 v 5.526871 -3.827843 -0.476280 v 5.526871 -1.827843 -0.476280 v 7.526871 -3.827843 1.523720 v 7.526871 -1.827843 1.523720 v 7.526871 -3

问题 Lets say I have a simple cube and some variables specifying its width, height and depth. How do I update my THREE mesh when the w/h/d changes? (I have everything else like changelisteners etc). Do I update vertices directly? Or is it easier to just redraw everything? 回答1: I think easiest would be to create your cube with 1 unit dimensions (1x1x1). Then set the dimensions by scaling it: mesh.scale.x = width; mesh.scale.y = height; mesh.scale.z = depth; Not actually sure if mesh supports scale,

问题 I'm using ThreeJS to create an interaction where people can click cubes. However these cubes behave differently when clicked (different color animations, to keep the idea simple). My idea was to create extension classes of the THREE.Mesh object and add my custom functions and attributes. This would help isolate the different behaviors of the cubes and provide a cleaner code. I tried using John Resigs' function to extend classes, but it seems to work just for classes that ultimately extend his

问题 I've been searching the web for a while now and did not find the correct answer yet. I found the list of uniform types THREE.js uses, and I think the following code should be correct. At the last line I define an uniform array of Vector2. uniforms: { "center": { type: "v2", value: new THREE.Vector2( 0.5, 0.5 ) }, "aspectRatio": { type: "f", value: null }, "radius": { type: "f", value: 0.1 }, "pointList": { type: "v2v", value: [] }, }, In my js script I pass this array as follows. This should

问题 I've created a tube geometry with data of 200 points loaded from external javascript file in JSON format. Please find the below code. <!DOCTYPE html> <html lang="en"> <head> <title>3d Model using HTML5 and three.js</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <style> body { font-family: Monospace; background-color: #f0f0f0; margin: 0px; overflow: hidden; } </style> </head> <body> <input type="button"

问题 Consider, I have an SVG vector graphics file (logotype), which I want to load and display in three.js (with WebGL renderer). What would be the recommended way to approach this? It seems like I need to load the image and to create a geometry and a mesh from it. I've managed to load the SVG document using the THREE.SVGLoader , but I can't find any relevant information on how to create a geometry/mesh from it further down the line. function preload () { const svgLoader = new THREE.SVGLoader();