three.js

How to properly load a Json File in Threejs

删除回忆录丶 提交于 2019-12-12 04:37:44
问题 I have done a couple of projects on Blender and decided to display one of them using threejs, however the object doesn't display. What would be the proper way to load a JSON file with keyframe animation? Here is the specific JSON file that I want to load and the extract of the code that I'm using: var mesh; function initMesh() { var loader = new THREE.JSONLoader(); loader.load('./ocean.json', function(geometry, materials) { mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials)

Three.js - VRML Loader

烂漫一生 提交于 2019-12-12 04:37:07
问题 I'm trying to use the Three.js with VRML (WRL) models. What I am wondering is that the model is loaded with variations of colors (colored). How can I load the model in solid color as the original file? My example is: http://dev.logicarts.com.br/semapro/projeto-3d/teste-1.html The code: <div id="info"> <a href="http://threejs.org" target="_blank">three.js</a> - vrml format loader test - <!--model from <a href="http://cs.iupui.edu/~aharris/webDesign/vrml/" target="_blank">VRML 2.0 Tutorial</a>,

gl_FragCoord doesn't match the size of the screen in three.js

廉价感情. 提交于 2019-12-12 04:31:14
问题 I've been having this issue where using gl_FragCoord shows the texture from the render texture of the previous pass on the bottom left part of the screen at a smaller size. It's as if the size of the window doesn't match the size of the render target but I've double checked they do. 回答1: I finally figured it out, the problem is that the canvas wasn't the same size as the camera and the render targets. You want to make sure these match: var winW = window.innerWidth; var winH = window

Three.js: object light & displacementMap

僤鯓⒐⒋嵵緔 提交于 2019-12-12 04:30:39
问题 I'm trying to make a realistic silver ring like this: with different colors and size. This is my result at this moment: As you can see my ring is not smooth. I don't know if it's a problem of the model, or of the code: There are my models ( i'm using 2 model, one for the light silver and another for the dark one ) light: http://www.websuvius.it/atma/myring/assets/3d/anello-1/interno.obj dark: http://www.websuvius.it/atma/myring/assets/3d/anello-1/esterno.obj This is part of my code: ... scene

Raycasting hard-faces of a mesh — Three.js

狂风中的少年 提交于 2019-12-12 04:27:20
问题 i created a box in three.js var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 100, window.innerWidth/window.innerHeight, 0.1, 1000 ); camera.position.set(5, 5, 10); var geo = new THREE.BoxGeometry(5,2,5); var mat = new THREE.MeshBasicMaterial({color:0xff0ff0, wireframe:false, vertexColors: THREE.FaceColors}); var mesh = new THREE.Mesh( geo, mat); scene.add(mesh); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight );

ThreeJS 3D objects mixed and linked with HTML DOM elements

半城伤御伤魂 提交于 2019-12-12 04:16:40
问题 I'm trying to build a page that mixes ThreeJS 3D elements with HTML DOM elements. What I'm attempting to do is match DOM elements with coordinates in the 3D scene. Any ideas? I'm aware of and have tried out Voodoo.js https://github.com/brentongunning/voodoo.js But, it looks like the project has largely been abandoned. I've cloned the repo and tried the demos. While they work fine on desktop; On my mobile device, if the demo works at all it's super buggy. 来源: https://stackoverflow.com

Three.js - object.visible = true, not showing up right away

倾然丶 夕夏残阳落幕 提交于 2019-12-12 04:16:20
问题 I'm hiding and unhiding parts of my Three.js scene using the .visible property on my objects. By default certain objects (rooms) have the .visible property to false . When the camera is within a certain mesh (the room bounding box) the .visible property is set to true and the room shows up. But there seems to be a delay (seconds or less) after setting the .visible property to true and the room actually being rendered. This delay is shortened after entering the rooms more than once. What is

THREE.js: Casting shadows as umbra and penumbra

拥有回忆 提交于 2019-12-12 04:12:27
问题 I'm trying to build a model of the upcoming total solar eclipse on Aug. 21 in THREE.js. Using NASA's SPICE toolkit, I was able to get extremely accurate rectangular geometric coordinates for the Sun and the Moon for each minute of the day, using the J2000 Earth-centered inertial frame. After setting a DirectionalLight at the location of the Sun and pointing it at Earth, I was able to create a shadow that traverses the earth at the correct time and along the correct map, according to NASA. The

Merging meshes that have different colors

[亡魂溺海] 提交于 2019-12-12 04:08:27
问题 Using Three.js r75 I am trying to display cubes that change color depending on an integer value from green to red. I have tried multiple ways as I am stuck on this. I was unable to make cubeMat.material.color.setRGB work and creating a new Three.Color doesn't seem to work either. Please note I merge all the geometries at the end for one draw call. I am hoping this isn't the issue. [UPDATE] I am confirming the rgb values are set correctly with getStyle however they do not render correctly. All

Texture repeats and overlaps in three.js

左心房为你撑大大i 提交于 2019-12-12 04:05:29
问题 I am creating a texture from svg files, mapping it on planes and returning the bitmap mesh to a callback. Problem is that first texture works fine but when I apply the second texture the plane has both first and second texture and this continues. EDIT : What is really surprising is that console.log(mesh.material.map.image.src) is showing the correct image for each icon(no overlap). Other than that each three.js group has just 2 children one for the overlay image and other for the blue