three.js

How to use async/await when loading a material texture image

由 北慕城南 提交于 2021-01-28 11:27:07
问题 I have a .obj, and .mtl with texture image that I want to render. The scene is static so I want to render by explicitly calling the renderer.render() command once (and not use animate()), after the assets are loaded, and see the texture. But the texture is not seen. To wait until the texture is loaded, I: call loadAsync() instead of load(), when loading the .mtl and the .obj files add await before some of the calls (mtlLoader.loadAsync, materials.preload, objLoader.loadAsync) change the file

Three.js Texture loading

由 心已入冬 提交于 2021-01-28 09:58:43
问题 I am starting during this days with Three.js and it's very cool. Now i would like to load a texture and apply it to a simple sphere. My problem is that when i open the browser page i get this error. I don't know how to solve this problem. Code window.onload = Init; var scene; var camera; var renderer; function render() { renderer.render(scene, camera); requestAnimationFrame(render); } function Init() { scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(75, window.innerWidth

How to load 3D object using AMFLoader in three.js?

由 不羁的心 提交于 2021-01-28 08:21:47
问题 I am new to three.js.I am trying to load 3d object on web browser using AMFLoader and STLLoader in three.js. Both AMFLoader and STLLoader has same problem. The 3d object doesn't render on web browser and also doesn't show any error. I don't know how to fix this.Below is my code snippet which I have tried with AMFLoader. <!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - loaders - amf loader</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user

Three JS - Strange raycast behaviour when objects are moved

由 北城余情 提交于 2021-01-28 08:20:23
问题 Version and info THREE.ObjectLoader2: 2.4.1 THREE.LoaderSupport.MeshBuilder: 1.2.1 THREE.LoaderSupport.WorkerSupport: 2.2.0 THREE.WebGLRenderer: 93 THREE.REVISION: 93 The problem When I raycast an object in my scene, I found that it worked perfectly down to the pixel, until I moved the object. In my program I expload the scene, so I move all the objects, and child objects away from the center of the scene. To easily visualise the issue instead of raycasting a single point at a mouse click, I

AFRAME: Android metallnesMap and roughnessMap issue

由 五迷三道 提交于 2021-01-28 08:09:36
问题 Tried to use in my project a model with metallnesMap and roughnessMap. On iOS everything looks good, but on Android it seems to be avoiding these maps. What could be the cause and if there any solution? On iOS: On Android: Use A-FRAME 1.1.0, .glb model exported from Blender Before the model looked dark on each devices but adding to the scene 'renderer="colorManagement: true"' and adding envMap has helped. 来源： https://stackoverflow.com/questions/65812649/aframe-android-metallnesmap-and

intersecting meshes results to mesh with wholes

由 梦想的初衷 提交于 2021-01-28 06:22:36
问题 I am using THREE and I am trying to intersect a box mesh with a custom geometry I am creating and converting it to geometry using : const g = new THREE.Geometry().fromBufferGeometry(shape3d) I aim to add faces to the custom geometry, that is why I do that. So I expect to get back from the intersection my custom geometry + polygons that the box has. I get that indeed, though I get also some holes as you can see in the below image : I used many csg versions that are out there, the manthrax one,

How to get the Vector3 of a point from the viewport perspective in three.js?

由 删除回忆录丶 提交于 2021-01-28 02:38:45
问题 I need to create 2 THREE.Vector3 points. from the browser viewport perspective. The starting point is the top right corner of the browser viewport, far from the screen The ending point is the centre (both horizontal centre and verticle centre) of the browser viewport, close to the screen. The problem is, how could I convert the web coordinate to the three.js coordinate so I can start making this cubic bezier curve3? Google Fu is not working for me this time... what am I missing here? Thanks

How to convert Three.js to .stl files for 3D printing?

由 若如初见. 提交于 2021-01-28 02:37:58
问题 I found one page link: Convert Three.js to .stl for 3D printing? var exporter = new THREE.STLExporter(); var str = exporter.parse(scene); console.log(str); But when I'm using them, not export a stl file. How can I do then? 回答1: The STLExporter.parse() will export the specified object to a string. If you wish to save the string as a file you have to perform some more operations. As a simple approach you can use FileSaver.js for saving the string to a file. First of all you have to download and

Rotating a skybox in Three.js

由 对着背影说爱祢 提交于 2021-01-28 01:42:09
问题 I have a skybox created using: skybox_path = 'images/skybox_images/'; skybox_name = 'Stars_2'; var urls = [ skybox_path + skybox_name + '_right1.png', skybox_path + skybox_name + '_left2.png', skybox_path + skybox_name + '_top3.png', skybox_path + skybox_name + '_bottom4.png', skybox_path + skybox_name + '_front5.png', skybox_path + skybox_name + '_back6.png' ]; var cubemap = THREE.ImageUtils.loadTextureCube(urls); // load textures cubemap.format = THREE.RGBFormat; var shader = THREE

How to get the Vector3 of a point from the viewport perspective in three.js?

由 大城市里の小女人 提交于 2021-01-27 23:25:53
问题 I need to create 2 THREE.Vector3 points. from the browser viewport perspective. The starting point is the top right corner of the browser viewport, far from the screen The ending point is the centre (both horizontal centre and verticle centre) of the browser viewport, close to the screen. The problem is, how could I convert the web coordinate to the three.js coordinate so I can start making this cubic bezier curve3? Google Fu is not working for me this time... what am I missing here? Thanks
订阅 three.js