This question is related to AFRAME: Android metallnesMap and roughnessMap issue
Main idea: I want to see the same metal texture on iOS and Android devices in my aframe project. In the viewer it is realy the same, but there only three.js
Can I change somehow WebGLRenderer.outputEncoding in Aframe?
The propertie is undefined for a scene - this.el.sceneEl.renderer.outputEncoding.
Just add renderer="colorManagement: true" scene attribute to set renderer.outputEncoding = THREE.sRGBEncoding;
Related
I took an equirectangular envMap from the three.js docs sample where it appears sharp on a sphere.
If I load the same material into my aframe scene with the following params
material="spherical-env-map: /assets/models/1/envtest.jpeg; roughness: 0; metalness: 1"
it appears blurry like this
What am I doing wrong?
Reproducible example via glitch: https://glitch.com/edit/#!/sepia-forest-keyboard
What I have noticed when setting up the glitch:
Using Aframe 1.0.3 it is blurry
Using Aframe 1.2.0 it remains black no matter what I do
That happens because you are using a PBR material in your code since the default material of A-Frame is MeshStandardMaterial. Meaning a material that tries to render physically correct. The official three.js example uses MeshLambertMaterial which is no PBR material. Both type of materials implement environment maps differently.
When using a PBR material, it's recommended to use a HDR environment map which is also pre-processed with PMREMGenerator like in this example: https://threejs.org/examples/webgl_loader_gltf
I am new to SceneKit and not able to get a hold of the Xcode Scene Editor. I am doing some research on iOS ARKit which was introduced recently. I created a sample project with SceneKit template. It comes with a default ship.scn.
I deleted this ship.scn and created a new SCN, drag and dropped a sample .DAE model into this SCN. I am able to view the object that I placed in .SCN file clearly with all the textures.
But when I run it in the device, the object appears on top of camera and zoomed in and not positioning properly in the camera frame.
I had to give the position of the object as x: 0, y: -60, z: -60 in Xcode Scene Editor to make it available in the center of the camera frame. But if I do this, the object will always be -60 degree from camera and I will not be able to move/resize it correctly with touch gestures.
Anyone please help me on how to make the object available at the center of camera frame such that the object also supports rotation/resize/movement etc.
I created the scene like below and added it to scene view:
let scene = SCNScene(named: "art.scnassets/Lowpoly_Notebook_2.scn")!
I have used Apple's link as reference for moving/resizing objects.
As orangenkopf quoted, My problem was with the model size. It was huge and hence didn't get rendered properly. When i change the scale of the object in Xcode Scene editor to a minimum value, i am able to view the object correctly and place it anywhere needed.
The best way is adding .dae file into the project and then Editor -> convert to SceneKit scene file format (.scn).
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.
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.
How make an Update function in Three.js, like in Unity3d?
I mean, that i create an object:
var torus = new THREE.Mesh(
new THREE.TorusKnotGeometry(60,20,100),
reflectionMaterial
);
and when i click on the body, i change a reflectionMaterial. But the image don't change, i see a not changed reflectionMaterial (last figure). Always redrawing a render image???
Thank's for attention. Sorry for my English (I'm from Ukrainian).
P.S.: I work with Three.js onn my netbook and on (not my) notebook. On netbook i don't see a shaders. Why?? Did the Three.js support Shader Model number 3 and 0?
If I understand your question, you are having issues changing a material after you click on something? You may need to change a flag depending on if you already have a material or not, there are some dependencies - check the link below:
material.needsUpdate = true;
There is an article on How to update things in Three.js