three.js

Three.js - depthWrite vs depthTest for transparent canvas texture map on THREE.Points

蹲街弑〆低调 提交于 2019-12-18 11:59:14
问题 Question Is there a significant difference between depthWrite: false and depthTest: false ? Does using depthTest offer a performance advantage? Is there any sacrifice in functionality choosing one or the other? Original problem I wanted to render a THREE.Points object with translucent circles as each point. I used a THREE.Texture loaded from a canvas element and passed it to the map property on the THREE.PointsMaterial . The transparency did not completely work, some circles overlapped fine

Mouse coordinates irrelevant after zooming, is it bug?

天涯浪子 提交于 2019-12-18 09:45:13
问题 I have a problem about getting the mouse coordinates, it behaves irrelevant after zooming. I have a JS fiddle link of my code, it will show what the problem I face, is it bug in three.js or the way I approach to draw a line is wrong, please give your feedback. http://jsfiddle.net/ebeit303/ceej4jxq/1/ var elem = self.renderer.domElement, boundingRect = elem.getBoundingClientRect(), x = (e.clientX - boundingRect.left) * (elem.width / boundingRect.width), y = (e.clientY - boundingRect.top) *

I can't add light with mouse event

泄露秘密 提交于 2019-12-18 09:43:21
问题 I can't add light with keydown event in three.js scene. I have the following function function putLight(){ light = new THREE.SpotLight( 0xffffff ); light.position.set( 10, 80, 20 ); light.target.position.set( 0, 0, 0 ); light.castShadow = true; light.shadowCameraNear = 20; light.shadowCameraFar = 50; light.shadowCameraFov = 40; light.shadowMapBias = 0.1; light.shadowMapDarkness = 0.7; light.shadowMapWidth = 2*512; light.shadowMapHeight = 2*512; scene.add( light ); } And it works when I use it

Three.js Rotate objects inside of moving Object3D to always face the camera

做~自己de王妃 提交于 2019-12-18 09:42:17
问题 I'm somewhat new to Threejs was just wondering how to make moving mesh always face the camera in a scene. I have 100 meshes inside of a container Object3D, and am rotating this container on the x and y axis. Is there any way to force the meshes inside of the container to always face the camera? Here is some sample code, I've also set up a jsFiddle at http://jsfiddle.net/nickelWeb/rZtJX/4/ for(var k = 0; k<numMeshes; k++){ meshes[k].lookAt( camera.position ); } I have tried just using the

BufferGeometry: how to render groups of faces

柔情痞子 提交于 2019-12-18 09:38:48
问题 I have 2 geometries and 2 meshes. Main goal is sometimes exclude part of first geometry (so I need 2 groups for that) and show in this time part of 2nd geometry (always 1 group). Before release r72 I was use this code 1st geometry: bufCompaniesGeomNotActive.addDrawCall(0, geomCompaniesNotActive.faces.length * 3, 0); bufCompaniesGeomNotActive.addDrawCall(0, 0, 0); 2nd geometry bufCompaniesGeomActive.addDrawCall(0, 0, 0); In r72 release addDrawCall just renamed to addGroup. But main problem is

How to assign a material to ColladaLoader or OBJLoader

为君一笑 提交于 2019-12-18 09:12:41
问题 I have looked through the documentation as well as many examples and wasn't able to find correct syntax for assigning a material to either a Collada .dae or OBJLoader .obj file. Json files seem to properly work when creating a Mesh and having the loader as geometry and material as the set material. Code like this works var loader = new THREE.JSONLoader(); loader.load( "modelPath.js", function(geometry){ var material = new THREE.MeshLambertMaterial({color: 0x666666}); mesh = new THREE.Mesh

Folding rectangles to form a cube using three.js

淺唱寂寞╮ 提交于 2019-12-18 08:10:56
问题 I am trying to make a cube with given 6 faces lying on the surface as a cube net with one face movable. Something like this: In the above picture, there are 6 faces, one face ( blue one) is movable. One can rotate them up together along their edges to form a “net”. Once they think they are finished, they can press a “fold it” button – all edges turn up 90 degrees to create the cube (or may not be a cube if he hasn't joined the blue face at proper position.) Below is intermediate status after

Change color of an svg dynamically and apply as texture in three.js

隐身守侯 提交于 2019-12-18 07:24:38
问题 i´m trying to create a configurator with three.js but im at the point that i need to change the color of the product dinamycally, i though that i can use an svg as texture, change the fill property of the svg and update the texture easily, but im not having good results at the moment what i have is -A 3D model with an svg applied as texture with a TextureLoader, but the svg is placed in a external file ("images/texture.svg")(also three.js is reducing the size of the texture, but i think its a

Issue with custom geometry and face normal

随声附和 提交于 2019-12-18 07:12:27
问题 I'm quite new to ThreeJS and I have a small issue (probably wrong usage). I'm trying to create a custom geometry and define the faces normals by myself. I create one normal in one direction and the other one in the opposite direction, as my Mesh is not 2 sided I expect to see only one of the face, however I can see both of them... Any Idea of what I'm doing wrong ? Thanks! <body> <script src="../build/Three.js"></script> <script src="js/Stats.js"></script> <script> var container, stats; var

THREE.js Raycasting from a child camera to the scene

故事扮演 提交于 2019-12-18 06:09:18
问题 I am trying to raycast the mouse from my camera to do some hover and click events on meshes in my scene. My problem is, that my camera is currently the child object of another mesh (for easier camera movement/rotation) and now my raycasting doesn't work (I assume because the camera is a child of the mesh, and not the scene). This is parts of my code: //camera setup var camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 0.1, 1000); var cameraTargetGeom = new THREE