three.js

问题 I have two cylinderGeometries with the tunnel inside the tunnel wrap. I have a png texture with transparency added to the tunnel and a black color to the wrap. I intend to lower the transparency on the tunnelWrap as a alphaMap opacity workaround. The tunnelWrap appears as transparent when inside the inner tunnel. Why is this? I have tried with much larger radiuses and it was the same result. function addTunnel(){ var cylTexture = loader.load("wormhole2.png"), cylGeom = new THREE

问题 So I've been trying to use the SkeletonHelper to render a basic skeleton for an animation visualizer, but can't figure out how to get SkeletonHelper to accept the Skeleton variable armSkeleton I pass into the constructor. The documentation states that the SkeletonHelper does accept Skeleton type objects, which is causing me much grief. The console error I get is "TypeError: object.children is undefined". Could anyone point me in the right direction as to fixing this? var bones = []; var

问题 I got an object (loaded with the loader, stl), where I'm trying to create a 'snapping' effect when moving it. I create a THREE.Box3 from the object to do some detection stuff, but I noticed that my Box3 doesn't match my object's location object.location . I'm sure I'm messing up worldspace, local space etc etc, so can anyone explain me how I could solve this and what is what? Code: var box = new THREE.Box3().setFromObject(activeElement);/ $("#debug").html( "<p>location: <span>" +

问题 I'm trying to repeat a 16x16 texture on a plane, but when I set the texture to repeat I get the following result: The texture is shown correctly in the bottom left of the plane, but it looks as though the top and right edges are stretched across the rest of the plane. So far I've been unable to find out why it does this. This is the code: function addTerrain(){ var texture = THREE.ImageUtils.loadTexture( "tex/tex.png" ); texture.WrapS = texture.WrapT = THREE.RepeatWrapping; texture.repeat.set

问题 I'm trying to implement a "fog of war" feature into my strategy game. I've been reading some other Q&A on SO and I figured that I need to use custom GLSL shaders. So I defined and array containing "vision points": let vision_points = [ new THREE.Vector2(1500, 1500), new THREE.Vector2(1500, -1500), new THREE.Vector2(-1500, 1500), new THREE.Vector2(-1500, -1500) ] And used ShaderMaterial passing in the vision points as a uniform. Since the arrays length might be any value, I inject VPOINTSMAX

问题 I'm in the process of developing a chrome VR web app. Now I'm desperately trying to figure out how to render a website into my into my stereoscopic scene which has some meshes in it. So I have my renderer for the meshes, which works well. The following code is only the relevant snippets: var renderer = new THREE.WebGLRenderer(); Then i have my stereoeffect renderer which receives the webgl renderer: var effect = new THREE.StereoEffect(renderer); Next is that I create the website renderer, and

问题 i need to to same matrix mulitiply in Three.js. I had an Object3D and i get the right matrix to console.log when doing this: console.log (scene.getObjectByName( "Pointer" ).matrix) the result is like: T…E.Matrix4 {elements: Float32Array[16]} elements: Float32Array[16] 0: 11: 02: 03: 04: 05: 16: 07: 08: 09: 0 10: 11 1: 0 12: -150 13: 0 14: 0 15: 1 note here that the 12th element have the value -150 (after a obj.translationX(-150)). var newMat = new THREE.Matrix4(); console.log(scene

问题 console log info: THREE.WebGLRenderer 91dev var main3d = { scene: null, camera: null, renderer: null, init: function () { // initialize scene, camera etc. var _dotGeometry = new THREE.Geometry(); _dotGeometry.vertices.push(new THREE.Vector3(2, 4, 0)); //var _dotMaterial = new THREE.PointsMaterial({ size: 5, sizeAttenuation: false, color: 0x00ff00 }); _dotMaterial = new THREE.SpriteCanvasMaterial({ color: 0x00ff00, program: function (context) { context.beginPath(); context.arc(0, 0, 0.05, 0,

问题 This shows an example of how to create a two-color gradient along a THREE.js line: Color Gradient for Three.js line How do you implement a multi-stop color gradient along a line? It looks like attributes will only interpolate across two values (I tried passing in three, it only worked with the first two values). 回答1: This is the do-it-yourself color gradient approach: Create a line geometry and add some vertices: var lineGeometry = new THREE.Geometry(); lineGeometry.vertices.push( new THREE

问题 Three js ver67 I have a 3D globe where I am trying to add cubes of different materials at every coordinate. A Quantile distribution is used to assign colors to density cubes (the height of the cube at a certain coordinate is determined by the population density at that coordinate). The function below adds density cubes to the scene – function addDensity() { var materials = []; var totalGeom = new THREE.Geometry(); var cubeMat; for (var i = 0; i < dataSetArray.length; i++) { var ptColor =