Three.js 3d object that looks the same from every direction

I want to display it on the floor and if the camera moves around the object needs to look the same without rotating the object. How can i achieve this? Update1: I created a plane geometry added the image ( its a transparent png ) and rotating at render. Its working good, but if i turn the camera sometimes the plane lose transparency for about a few milisec and the get a solid black background ( blinking ). Any idea why? here is the code: var texture = new THREE.ImageUtils.loadTexture('asse

Three.js: Possible to flip a sprite?

Question: Is it possible to flip/mirror a Three.js sprites texture? Background: Using the current DEV branch of three.js Findings so far: I first try'd to change it's 3d rotation without any effect. Then I inspected the sprites code and saw that the rotation is reseted in this line in Sprite.js: this.rotation3d.set( 0, 0, this.rotation ); Changing the values there didn't had any effect. Digging deeper I ended up in the SpriteRenderer plugin where I got completely lost. My understanding is

Three.js Uncaught TypeError: Object #<WebGLRenderingContext> has no method 'getShaderPrecisionFormat'

I'm using ThreeJS for an application I'm developing at work, in particular the WebGL renderer. It was working fine about a week and a half ago, but when I came back to work today I'm getting this error when trying to run my application in Chrome: Uncaught TypeError: Object # has no method 'getShaderPrecisionFormat' I debugged my application in Chrome and it looks like the WebGLRenderingContext has no method 'getShaderPrecisionFormat'; any suggestions as to what may have happened to lead to thi

Three.js shadow map stripes in each light (now simplified, and with jsfiddle!)

I'm trying to create, modify and update (directional only for now) lights and shadowmaps dynamically. The light, shadow and shadow camera helper gets updated correctly as I move the light around or change shadow properties, except from the light's point of view, everything behind the origin (0,0,0) is shadowed for no apparent reason. Screenshots: http://i.imgur.com/n4AHvle.png http://i.imgur.com/l0uaZHD.jpg http://i.imgur.com/brKwCof.jpg http://i.imgur.com/a6dqMGo.jpg (new, with spotlig

Three.js Got errors when the project was updated with three.min.js (revision 55)

I haven't updated my project for a while (it is based on three.js library) and when I did it recently (with three.min.js: revision 55) I got the following errors: With the following line I got "Uncaught TypeError: undefined is not a function" controls = new THREE.TrackballControls(camera, renderer.domElement); and "Uncaught TypeError: Cannot read property '0' of undefined" with: axe_b.geometry.materials[0].opacity = opacity; What should I change in these lines to make it running? With th

Plans for hierarchical view culling in three.js?

Are there plans to add hierarchical view culling in three.js? Specifically would each Object3D parent have its own bounding sphere for all child Object3D objects. Digging in the three.js code it appears only the bounding sphere of the geometry on a Mesh is checked. I have an app that requires deep zooms and level of detail changes. Currently I am hacking a hierarchical cull by doing my own bounding sphere calculation and culling by removing children from Object3D. Here is a sample of what I'm

Three.js Rotate Texture

I have a texture applied to a mesh I can change the offset with mesh.material.map.offset.set I can change the scaling with mesh.material.repeat.set so my question is, how can I rotate texture inside a plane? Example: From This: To this Thanks.

THREE.js seems to not work on localhost server

I am just starting out with THREE and have come across some odd failures which I believe are due to localhost / same-origin-poicy. In short I created my own animation using armatures in Blender and exported using the three.js exporter plugin. The model displays but the animation doesn't run. I used the online skinning animation example as the basis for the code and thought I may have incorrectly stripped out certain code that was causing it to fail but after looking for a couple of hours I hav

Three.js ThreeJS Texture is pixelated when seen from distance

I was playing with webGL and ThreeJS, then I've got the following issue: Textures with large images gets pixelated when seen from distance. Check the example: http://jsfiddle.net/4qTR3/1/ Below is the code: var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 10, 7000); var light = new THREE.PointLight(0xffffff); light.position.set(0, 150, 100); scene.add(light); var light2 = new THREE.AmbientLight(0x44

Three.js DoubleSided material doesn't cast shadow on both sides of planar parametric geometry

See this jfiddle: http://jsfiddle.net/blwoodley/5Tr4D/1/ I have a blue spot light that shines on a rotating rotating square. This casts a shadow to the underlying ground. Except that it only casts a shadow on one side of the square. I saw this discussion: https://github.com/mrdoob/three.js/issues/3544 which indicates that face culling on planar surfaces is the cause. the recommendation is to give my square some depth, i.e. make it a cube. I can do that with this simple example, but I'm encoun

THREE.Js How acess a object outside the OBJMTLLoader

Does anybody knows how can i acess a object outside a OBJMTLLoader var loader = new THREE.OBJMTLLoader(); loader.load( obj, mtl, function ( object ) { object.position.set(0,0,0); scene.add( object ); }); console.log(object); inside of the function objects = THREE.Object3D but outside is equal do ObjectLoad. Thanks for everybody.

Three.js Clean up Threejs WebGl contexts

I have a problem while cleaning up my WebGl-Scenes. I'm using Three.js with a WebGlRenderer. In my application I have to change the views quite often and therefore need to render new scenes all the time. Uptil now I destroy and reinitialize the entire Threejs scene. After switching the scenes about 15 - 20 times I get following warning: WARNING: Too many active WebGL contexts. Oldest context will be lost. After switching a couple of times more the context is lost completly and the application

bounding box around selected objects in obj model in three.js

on selecting a particular item in an imported .obj model in three.js editor, the bounding box appears around the entire world instead of appearing on the selected object. I have used THREE.BoundingBoxHelper() to make the bounding box, and passed the picked object to it. I also call the update function on the bounding Box. Is there a way to make the bounding box appear only around the selected item in the 3D world? Thanks in advance!!

Translate mouse click positon to 3D in Three.js

I'm learning Three.js by doing sphere panorama in Three.js (http://mrdoob.github.io/three.js/examples/webgl_panorama_equirectangular.html). I need to place a marker into panorama when I click. However, I have no idea to translate 2D position's mouse click to 3D world. I tried ray picking, but it didn't work(the intersets variable was always returned []). And this is my code: //I create sphere panorama: var geometry = new THREE.SphereGeometry( 500, 60, 40 ); geometry.applyMatrix( new THREE.Matr

Three.js How to draw mesh edges with Threejs

I'm looking at drawing the edges of a mesh like on the following picture: I tried to use THREE.EdgesHelper however it only groups the triangles that are in the same plane and therefore it looks like the wireframe on curved areas which I want to avoid. Ideally it would be some sort of helper that I could display/hide/change colour. I'm not exactly sure about what to look at for a starting point and your help would be much appreciated. Thank you!

Three.js How to reduce object size webgl?

Is there some functions for webgl, like culling si clipping in opengl? For example if i have an object with 100K vertices, can i load object in front high quality, and back low quality, to reduce from vertices? I read that camera from three.js do something like that. Thanks

Three.js Use directional light with WireframeHelper

I used THREE.MeshLambertMaterial and set wireframe: true in the previous version of ThreeJS, it worked well. But after I update to r69, it looks strange. And I tried to use WireframeHelper to fix this problem, but it can not use directional light now. After examining the source code, I think the reason is that WireframeHelper is using LineBasicMaterical. Is there other solution to add directional light on it? Thanks.

three.js shadow map shows on back side issue. Is there a work around?

I have an issue with shadow map showing on the back side of an object, I have been fighting with that for almost two days now, thinking I was surely doing something wrong. Then I wrote this jsFiddle : http://jsfiddle.net/gui2one/ec1snfee/ code below : // shadow map issue var light ,mesh, renderer, scene, camera, controls; var clock = new THREE.Clock({autoStart:true}); init(); animate(); function init() { // renderer renderer = new THREE.WebGLRenderer(); renderer.shadowMapEnabl

Transformation matrix not working with Three.js

I'm starting to learn Three.js now, and trying to do some really basic things at first, like creating a box and then applying a transformation matrix on it, rotating 15deg on Z axis: <html> <head> <title>My first Three.js app</title> <style> body { margin: 0; } canvas { width: 100%; height: 100%; } </style> </head> <body> <script src="scripts/three.js"></script> <script> var scene = ne

Three.js CSS3Renderer ignores projectonMatrix property?

I'm doing augmented reality with Three.js and recenlty I tried to combine WebGL and CSS3 rendering to render both 3D content and DOM objects (Mostly for video playback) at the same time. I've started with Closing the gap between html and webgl tutorial, but I cannot get correct visualization using CSS (Although WebGL working fine). Basically, when doing AR, we have two matrices we have to apply to our scene: projection matrix and camera matrix. The projection matrix (row-major) usually looks li

Three.js Some objects not seen through pointCloudMaterial texture with transparency

Im trying to move particles (THREE.PointCloud) accross thre scene. This particles are composed by this material with transparent png. var material = new THREE.PointCloudMaterial( { size: tamanio, color:color, //alphaTest:0.01, transparent:true, depthTest:true, map:recursoConNombre("textura_particula").objeto, blending:THREE.AdditiveBlending }); All seems Ok, but some objects not seen through the transparent textur

Three.js Why can't I set the camera rotation?

I've been struggling with an application where I'm trying to set the camera rotation initially so when the scene is loaded, you'll be looking where we want you to look. The backstory, I'm creating a panorama viewer where the panorama is applied to a mesh with a sphere geometry. The problem I'm having is I don't seem to be able to set the camera rotation. I've tried multiple attempts, but none have been working. I attempted setting the camera rotation after creating the camera, and I tried appl

Three.js AnimationHandler has changed for threejs, how can I get it working?

I created a webgl animation using the threejs library, some time ago, today I have been trying to get it to run on the latest version of the three.js library. In the latest library, there is no pathcontrols.js. I copied pathcontrols.js from my old library to the new version, but this has not solved the problem, Below is the full function that does not work properly, but it is the .add() and the animation() calls where I think the problem is: function initAnimationPath( parent, spline, name,

LEAP MOTION + OCULUS + THREE.JS: can't get "optimizeHMD = true" working (head mounted)

I attached the Leap Motion sensor to the Oculus Rift SDK2 device, in order to get my hands recognized from the 'head mounted' mode in a Three.js scene. controller.use('handHold').use('transform', { optimizeHMD: true }).use('handEntry').use('screenPosition').use('riggedHand', { parent: scene, renderer: renderer, scale: getParam('scale'), positionScale: getParam('positionScale'), helper: false, offset: new THREE.Vector3(0, 0, 0), renderFn: function() { ren

Three.js How to handle many light sources on the scene?

I have a map definition with plenty of light sources (about 350). When I'm trying to create THREE.PointLight objects and add them to the scene, I'm getting the following error along with low FPS: three.js:29438 THREE.WebGLProgram: shader error: 0 gl.VALIDATE_STATUS false gl.getProgramInfoLog Fragment shader active uniforms exceed MAX_FRAGMENT_UNIFORM_VECTORS (1024). What does it mean? Is there some limit of THREE.PointLight objects on the scene? Are there any good practices to keep high perf

Is clearDepth(0) possible in Three.JS?

In order to estimate the thickness of a mesh, I set up two renderTargets for frontface and backface depth data. Convert the values in depth buffer to linear depths, and subtract back from front to get thickness. In order to get the depth textures right, these should be set: while rendering front depth texture: mesh.material.side = THREE.FrontSide, mesh.material.depthFunc = THREE.LessEqualDepth; clearDepth (1); // ... clear to far plane // ... saw this in the code, but don't know how to se

three.js[r84] weird 1 pixel vertical line on envMap Reflection using MeshPhongMaterial

it's seems there may be a bug on the envMap implementation of MeshPhongMaterial. I built a simple scene with a Sphere and a MeshPhongMaterial with an envMap texture (half white and half black); You will see in the attached image, that a vertical 1px line appears in the reflection, that should not be there. Did anyone has this problem? Is there any workaround? scene render envMap texture Here is the code I used var mat1= new THREE.MeshPhongMaterial({ color:0x999999, spe

Three.js How to migrate from THREE.SceneLoader? r84

Currently at the tail end of a migration from r69 to r84 and I'm wondering what the best way would be to migrate from THREE.SceneLoader to either THREE.JSONLoader or THREE.ObjectLoader. When I attempt to use the JSONLoader I get an error that I should use the SceneLoader instead, kind of strange considering it's been deprecated. Looking at the source of JSONLoader I guess if the type of data coming in is scene then it will throw this error, but what should the type be and is JSONLoader even

Three.js Local clipping of planes based on local axis

I was trying to clip left half of a planeBuffer using material.clippingPlanes. When the object is at center with rotation (0,0,0) then the clipping works. object.material.clippingPlanes = [object.getWorldDirection().cross(object.up).normalize(), object.position.z )]; But this code fails when the object is at a non-zero position with non-zero rotation and the cut does not change with orientation of object.

GLSL uv lookup and precision with FBO / RenderTarget in Three.js

My application is coded in Javascript + Three.js / WebGL + GLSL. I have 200 curves, each one made of 85 points. To animate the curves I add a new point and remove the last. So I made a positions shader that stores the new positions onto a texture (1) and the lines shader that writes the positions for all curves on another texture (2). The goal is to use textures as arrays: I know the first and last index of a line, so I need to convert those indices to uv coordinates. I use FBOHelper to debug

Three.js Object3D custom vertex shader

I have a bunch of Object3d in the scene comprised of different meshes, e.g: const object3d = new Object3D(); const bodyMaterial = new MeshLambertMaterial(); const bezelMaterial = new MeshBasicMaterial({ color: "0xffffff" }); const mesh = new Mesh(MeshFactory.mesh1, [ bodyMaterial, bezelMaterial ]); const textLabel = TextFactory.createText("mesh1"); object3d.add(mesh, textLabel); I'd like to move the position of the object3d on each frame, currently doing that on the CPU: render() { objec

Could not use 3dMax Model in Three.js

I want to use my 3dsmax model into three.js but it does not work at all. I tried to convert my model to any appropriate format and then use it in three.js in many way, but I had no succeed. any help would be appreciated My 3dmax model is here.

Three.js Is it possible to name rotations/joints in threejs and how is it possible to set them?

I am doing a bit of work with threejs. And now just wondering if it was possible to name rotations or joints. So it seems possible to write code like: arm.rotateZ( 180 ).name="ARM_ANGLE"; But then how does one subsequently access and set the same rotation? I know in x3d it is possible to do this, so was thinking it would be possible to do as well in threejs. In x3d, one can define a reference as: <Transform DEF="ArmAngle" rotation="0 0 1 3.19"> And then later define a route to refe

Three.js THREE.ObjLoader generating duplicate meshes from .obj file

I am loading a .obj file that builds a human dummy, and inside the .obj file there are lines that show where the meshes split E.G. "g "body_part" followed by the vertices, and faces. When I load my object it works great, and I can console log the object and see the children which are all the different meshes that build the object. The problem is that when I am using raycaster to change the color of the mesh that is hovered it will only work on specific parts. After further investi

Three.js What is the difference between Bone and Group? How to get a Bone that is a group?

Both: https://threejs.org/docs/#api/en/objects/Group https://threejs.org/docs/#api/en/objects/Bone are derived from https://threejs.org/docs/#api/en/core/Object3D in both cases the source code does not add any functionality: https://github.com/mrdoob/three.js/blob/master/src/objects/Group.js https://github.com/mrdoob/three.js/blob/master/src/objects/Bone.js But only types and flag So a Group has type group and flag isGroup=true and Bone has type bone and flag isBone=true For my u

Showing Depth in Three.js Point Cloud

I have a 3D scan of a rock that I have represented as a point cloud using Three.js, and I wanted to more explicitly show the features of the rock, perhaps using lighting to show depths with Three. Viewing the rock from the top, I see this: When looking closely from the side, you can see rigid features that I would like to show more closely: I am unsure in how to approach this, and was hoping for some help in showing these rock features within this visualization. For context, this is my current

How do I add wireframes to instanced meshes in Three.js

I am implementing a custom cityscape scene in Three.js. I need to render a lot of the same geometries and to increase speed I have implemented InstanceMesh. For normal meshes, I have used this code to add wireframes to all meshes: // material is created elsewhere var geo = new THREE.CylinderGeometry(1, 1, item.height, 16, 16); var mesh = new THREE.Mesh(geo, this.createMaterial(object.material)); scene.add( mesh ); // creating wireframes var edgegeo = new THREE.EdgesGeometry( geo ); var w

Three.JS - AudioAnalyser() not working with audio source as Stream type in Safari

I'm developing a streaming radio in 3D using Three.JS, I'm sending music as a PeerConnection to my clients attaching a THREE.AudioAnalyser() to display 3D bars that move according to frequencies. Sound is working great in all platforms, but THREE.AudioAnalyser() with an input source of stream type only works on Chrome, Safari is not working at all :frowning: var listener = new THREE.AudioListener(); var audio = new THREE.Audio( listener ); audio.setMediaStreamSource( stream ); audioAnalyser = ne

Three.js perspectivecamera 'near' and 'far' parameters

I am an absolute beginner in three.js (today first day of exploration) and I am confused about the role of the 'near' and 'far' parameters that are passed to the perspective camera. The reason why I am asking is because I don't really understand why these parameters are useful at all. The only thing that really seems to matter is the fov angle in combination with the aspect ratio, which would implicitly seem to define the viewbox (frustum), albeit not necessarily the depth of the frustum. Wouldn

Three.js Blank White screen and ReferenceError: THREE is not defined

I have been practicing 3d modeling in few years without coding at. As, the demand for loading ready made 3d models to 3js is increasing, I have decided to start coding. After 2 days of trial and error with my first code, I am sharing with you the code that does not seem to work properly. I am not sure where the error is because part of it is HTML and the other one is a three.js script. Note that, the obj file was converted to JavaScript. I have been following this video https://www.youtube.com/w

Three.js Selecting bars in the WebGL Globe (Google)

We all know http://www.chromeexperiments.com/globe/ WebGL experiments and I really got interested in what they did there. What they do there is they build bars on a globe based on GPS (JSON format) information. Pretty cool in itself. While waiting on three.js library documentation getting more complete I'd like to ask a question. How would I implement a method that would investigate which bar was ie. clicked? Thanks in advance, Karpo

getting sprites to work with three.js and different camera types

I've got a question about getting sprites to work with three.js using perspective and orthogonal cameras. I have a building being rendered in one scene. At one location in the scene all of the levels are stacked on top of each other to give a 3D view of the building and an orthogonal camera is being used to view it. In another part of the scene, I have just the selected level of the building being shown and a perspective camera is being used. The screen is divided between the two views. The ide

Three.js When removing lights from scene, currentLights value in renderer is not being decremented

So I have a situation where I have a webglRenderer and a scene and I am adding and removing lights from the scene. After adding 5 lights and removing them enough times, the renderer will crash because too many lights are registered in the webglRenderer. What I want to be able to do is reset the current number of lights value in the THREE.js webglRenderer when I remove the lights from the scene, so this problem does not happen. I was wondering if anyone knew how to do this or which variable I sho

Three.js Is it possible to make this GPGPU water example work with different shaped (rectangle, boomerang) planes?

This is the example I'm talking about: https://threejs.org/examples/webgl_gpgpu_water.html I have a decent understanding of how it all works because I've successfully added it to a game I'm developing and made quite a few edits and additions to the shaders and js, but is it even possible to use this type of water for a plane in the shape of a boomerang or anything other than a square AND have the vertices displaced correctly like the example shows? My guess would be no because it's using a squar

How to put a transparent color mask on a 3D object in three.js?

I've been trying to 'submerge' a 3D object in a semi-transparent 3D plane of water (without the whole water plane showing), and after having experimented with custom blending modes for hours, I don't really get how to do it. Fiddle here: https://jsfiddle.net/mglonnro/p2ju4qbk/34/ var camera, scene, renderer, geometry, material, mesh, surface_geometry, surface_material, surface_mesh, bottom_geometry, bottom_material, bottom_mesh; init(); animate(); function i

  1    2   3   4   5   6  ... 下一页 最后一页 共 23 页