I can easily get Tone.js to generate a tone within a Three.js world, simply by calling, e.g., oscillator = new Tone.Oscillator(440, "sine").toMaster();, but I can't work out how to connect that tone to an AudioListener in the Three.js world to make it be a positional sound. Does anybody know how to do this?
Using the oscillator built into Three.js, it works perfectly as per the Three.js audio-sandbox example, where it uses oscillator = listener.context.createOscillator(); so I assume this proves I need to connect the Tone.js output to the AudioContext of the listener, but I just can't figure out how to do that, and nor can I find anything on the web about it. Any examples I can find simply use the toMaster() approach as above, so the sounds are not positional.
Any help most appreciated!
I figured it out, posting self-answer for those searching in the future. You simply need to set the context of Tone.js to be the same as the PositionalAudio object, then setNodeSource of that object to be the Tone.js oscillator, add it to some geometry and hey presto, positional audio generated by Tone.js:
var mesh1 = new THREE.Mesh( geometry, material ); //geometry, material defined elsewhere
scene.add(mesh1);
listener = new THREE.AudioListener();
camera.add( listener );
var sound1 = new THREE.PositionalAudio( listener );
Tone.context = sound1.context;
var oscillator1 = new Tone.Oscillator(440, "sine");
sound1.setNodeSource (oscillator1);
mesh1.add( sound1 );
Related
I need to render a single specific mesh from a scene into a texture using a THREE.WebGLRenderTarget. I already achieved that during the rendering of the scene, all other meshes, except this one, are being ignored. So, I basically achieved my goal. The thing i hate is, that there is still a lot of unnecessary work going on for my whole scene graph, during the render process of the scene. I need to render this texture every frame, so with my current method i get extrem fps drop downs. (There are lots of meshes in the whole scene graph).
So what i found was the function "renderBufferImmediate" from the THREE.WebGLRenderer. (Link to the renderer source code here) My pseudo code to achieve my goal would look like this:
var mesh = some_Mesh;
var renderer = some_WebGLRenderer;
var renderTarget = some_WebGLRenderTarget;
renderer.setRenderTarget(renderTarget);
var materialProperties = renderer.properties.get(mesh.material);
var program = materialProperties.program;
renderer.renderBufferImmediate(mesh, program, mesh.material);
var texture = renderTarget.texture;
The renderBufferImmediate function takes an instance of an THREE.Object3D, a WebGLShaderProgram and a THREE.Material. Problem i see here: The implementation of this function tries to lookup properties of the Object3D which, afaik doesn't exist. (Like "hasPositions" or "hasNormals"). In short: my approach doesn't work.
I would be grateful if someone could tell me if i can use this function for my purpose (Meaning i am currently using it wrong) or if there is another solution for my problem.
Thanks in advance.
I'm trying to adapt my existing three.js project to work with WebVR. I've made decent progress -- I can look around the scene in VR, but I'm unable to move the camera position away from the initial place it gets spawned (which appears to be close to 0,0,0, it seems like there is a predefined userHeight that gets factored in)
Once I call renderer.vr.setDevice( vrDisplay ) it seems like a new camera is created and the existing camera that my scene was using is no longer used. I'd like to keep using that camera, or at least inherit most of its properties.
I've noticed that there is a renderer.vr.getCamera() method (link to source) but I haven't found any examples or documentation of how to use it (or if I should use it). Curiously, this method accepts a camera as an argument, which is a bit unintuitive for a getter. Looking at the code, it seems like the function should be called setCamera and left me a bit confused. I tried calling the function and passing in my existing camera but it had no effect.
Any help is appreciated. I am using a Google Daydream View on the latest version of Android/Chrome using Three.js R91
swirlybuns, Mugen87 solution works as long as you add user to the scene
var user = new THREE.Group();
user.position.set(0,0,0);
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.y = 1.6;
user.add( camera );
scene.add(user);
and on render loop
user.position.setZ(camera_z_pos);
camera_z_pos -= current_velocity;
Tested on
Three.js v102
chrome mobile v75
I'm searching to add an IBL to my scene and objects. But I can't find anything on the web. There are some examples with an envMap, but the problem is that with the envMap the object looks like chrome...
I'm trying to have such an effect:
I found that you can use IBL (Image Based Lighting), PRT (Precomputed Radiance Transfer) or PBR (Physically Based Rendering). But I'm unable to know how to use such an effect with three.js.
[EDIT]
After using the new MeshStandardMaterial from the r74dev I'm able to have the following result:
(before)
(after)
But I can't use MeshStandardMaterial and envMap with textures. Either the texture or the MeshStandardMaterial dooesn't work.
Thanks to WestLangley I'm using MeshStandardMaterial:
var objectGeometry = new THREE.SphereGeometry( 10, 100, 100 );
material = new THREE.MeshStandardMaterial({envMap : textureSkydome});
(r74dev)
Maybe you can use lightmaps. You can use them with THREE.MeshPhongMterial by setting material.lightmap = someLightmapTexture. Important - you need a second set of UVs in your geometry in order to use lightmaps.
have a look at this example.
So, the scene include an earth spinning on its axis, a moon rotating around the earth, and a light source to the right that will help to simulate the effect of an eclipse. I thought it would be easy because we've done shadows and transformations before but I ran into a problem.
In our template we have the following at the top:
// For the assignment where a texture is required you should
// deactivate the Detector and use ONLY the CanvasRenderer. There are some
// issues in using waht are called Cross Domain images for textures. You
// can get more details by looking up WebGL and CORS using Google search.
// if ( Detector.webgl )
// var renderer = new THREE.WebGLRenderer();
// else
var renderer = new THREE.CanvasRenderer();
My problem is, when I leave it like that, the spotlight doesn't appear on the scene. However, as was warned, if I activate the Detector, the textures won't work.
But I need both textures and the spotlight. How do I work around this?
You are confusing yourself. Detector.webgl only checks for support of WebGL on the browser. The code below uses the WebGL renderer if the current browser supports WebGL and CanvasRenderer if there is no WebGL support.
if ( Detector.webgl )
var renderer = new THREE.WebGLRenderer();
else
var renderer = new THREE.CanvasRenderer();
With WebGL - loading textures will run into a cross domain issue. Best to then execute the code either on a web server or a local server like http://www.wampserver.com/en/ for Windows or https://www.mamp.info/en/ for Mac. Or npm-package like https://github.com/tapio/live-server.
As far as I know shadows are not supported on the CSSCanvasRender. I would ask your assignment head to clarify.
We have a model created in Blender by subtracting an extruded SVG from a “flat” base using a boolean difference operator. Or in other words, we carved a picture into it. The model renders just fine in Blender, but loading it into our simple, three.js-based web viewer (using the json exporter for Blender), we get some really odd shadows on the surface, and depending on the scale, shiny vertexes.
Here's my light and camera:
camera = window.camera = new THREE.PerspectiveCamera(45, $('main').width() / $('main').height(), 10, 10000);
loader = new THREE.JSONLoader(true);
var light = new THREE.DirectionalLight(0xffffff, 1.0);
light.position.set(-30, 30, 100);
light.target.position.set(0, 0, 0);
light.shadowCameraNear = 200;
Can anyone spot whether we did something wrong? And is that a Three-specific issue, or WebGL, or Blender, or our model?
Output (screenshot)
Fiddle
Looking at your fiddle, it seems that your vertexNormals are totally smoothed and thus shading is incorrect.
See here:
https://github.com/mrdoob/three.js/issues/1258
Does this help?
I'm not sure if this technically counts as a solution, but — worked around the problem by dropping the JSON blender export, and using P3D instead to load .stl directly.