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.
Related
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 am developing a standard panorama viewer, where a 360 picture is placed inside of a sphere and the user can look around using mouse and touch. I am using OrbtialControls for this and it is working fine.
The user can also load a new 360 picture, after loading the picture, I am trying to set the camera direction so that the user is looking in a certain direction. As I am using orbitalControls, I am using control.target.set(x,y,z) to do so. However that causes the camera to lock at that point and if I use the mouse or touch to look around, the camera position changes and it revolves around that point, rather than looking around inside the sphere.
Has anyone else seen this kind of behavior? Do I need to do something
The code is pretty simple.
controls.reset();
controls.target.set(window.newLookAt.x,window.newLookAt.y,window.newLookAt.z);
The purpose of controls.target.set(x,y,z) is to set the pivot point, so what you are facing is the expected behavior
Instead of setting the target (that has to be (0, 0, 0) in your case), why not putting the camera inside a THREE.Object3D and rotate this object
var camera = new THREE.PerspectiveCamera()
var container = new THREE.Object3D()
container.add( camera )
camera.position.set( 0, 0, 0.1 )
var controls = new THREE.OrbitControls( camera, renderer )
controls.target.set( 0, 0, 0 ) // Optional
container.rotate.y = Math.PI / 2 // Or whatever you want
So I ended up solving this myself. The issue was that my understanding of orbitControls was slightly off. All I needed to do was to set the target point in the same direction but way closer to the camera and presto, issue solved and things are working fine now.
I'm getting started with three.js, and I don't want to use WebGLRenderer (renderer = new THREE.WebGLRenderer();) at all. Instead I want to use renderer = new THREE.CanvasRenderer();.
I don't want to use WebGLRenderer due to lack of support.
How can I have a camera orbit without using WebGLRenderer, and use canvas only in three.js?
The three.js site has a small but effective set of Canvas samples as well. Just take a look at the source of https://threejs.org/examples/#canvas_camera_orthographic: it has an orbiting camera. It is orthographic, which you might not want, but the source should be self-explanatory on how to change it to a perspective camera.
As an example, I tried to set up an AR scene in three.js.
I use "aruco.js" to do that. When I load obj or any other models everything works great, However when the marker is placed in front of the camera it gets detected and the scene flickers/bumps violently. Any serious reason why this is happening?
As live demo would be hard to set up, I just uploaded a video on YouTube to illustrate my point: https://youtu.be/9jMso7vmw1M
So my exact question is: what is the best way to make AR scene stick to the marker without any flicker?
Code in jsfiddle: https://jsfiddle.net/6cw3ta57/
var markerObject3D = new THREE.Object3D()
scene.add(markerObject3D)
// set the markerObject3D as visible
markerObject3D.visible = false
//////////////////////////////////////////////////////////////////////////////////
// code in jsfiddle
//////////////////////////////////////////////////////////////////////////////////
I have a problem with my Three.js 3D application - at least according to some people I know.
My application rests at [http://176.9.149.205/planungstool/]. Some people who supposedly have the most recent version of Chrome and Firefox, can not see the textured areas. For example, they do not see the roof or front of the 3D house. They do, however, see the non-textured stuff like the tree or the floor.
What's weird is that I don't have that problem and most of the other people I asked do not have it as well. Here is what it should look like and does look like for me: [http://176.9.149.205/planungstool/house.jpg]
Does anyone have an idea what could cause this? Could it be some client-side settings? Or maybe some access control policy?
I'm loading the textures like this:
var myTexture = new THREE.ImageUtils.loadTexture('gfx/textures/texture.jpg');
And then I just create meshes with lambert material that have this texture as their map.
If you read this and do not know what could cause this error, it would be nice if you could at least tell me if you see the textured areas or not, given you have a recent version of Chrome or Firefox.
I can see the textures on current chrome on mac. I had a similar problem with the canvas renderer (anything textured was invisible). For me I changed from using the ImageUtils.loadTexture to a texture and texture loader and it works.
var texture = new THREE.Texture();
var texLoader = new THREE.ImageLoader();
texLoader.addEventListener( 'load', function(event){
texture.image = event.content;
texture.needsUpdate = true;
} );
texLoader.load('texture.png');
I do however still have problems with a canvas renderer in safari but you appear to only be using the webgl renderer. Hope this helps.