three.js

how do I add a texture to a triangle in three.js?

帅比萌擦擦* 提交于 2019-12-22 10:44:49
问题 I've created a scene which has many cubes, spheres, etc, in it, and have been able to apply textures to those primitives, but when I want to add a texture to a simple triangle, I'm totally lost. Here's the closest I've come to getting it right: var texture=THREE.ImageUtils.loadTexture('/f/3d-images/texture-steel.jpg'); var materialDecalRoof=new THREE.MeshBasicMaterial( { 'map': texture, 'wireframe': false, 'overdraw': true } ); var geometry = new THREE.Geometry(); geometry.vertices.push(new

Three.js - Getting the low poly look

陌路散爱 提交于 2019-12-22 10:43:25
问题 I'm trying to generate some terrain in the low poly style, for reference, this kind of style: What I mean by this is each triangle is one shade. When I attempt something like this, the shading is very smooth. Here's an example with only a few triangles: (source: willdonohoe.com) I also tried adding shadows, but this didn't create the desired effect either. Here's a shot with more triangles with added shadows: (source: willdonohoe.com) Looking through the Three documentation, the shading

CORS error with THREE.js and S3 in Chrome & Safari

若如初见. 提交于 2019-12-22 10:42:18
问题 I'm having an issue loading an S3 hosted JPG into my three.js model as a texture. I got a CORS error in Chrome, realised S3 supports CORS and put in a very liberal policy to check it out during development (I've never run into CORS before). Firefox is fine but Chrome and Safari still error out. The JPG is loaded into a texture via THREE.ImageUtils.loadTexture() and then that texture is applied to a material. I tried adding the following to the image before loading but it didn't seem to work:

How to bake(convert) bones as FK from IK in Blender

女生的网名这么多〃 提交于 2019-12-22 09:58:28
问题 How can I convert from IK(Inverse Kinematics) to FK (Forward Kinematics) in Blender? I am trying to export a model which has skeletal animations, to THREE.js. However, It does not support IK. therefore, I need to convert all bones into FK. Does anyone know any solutions? Thanks! Happy Holidays! 回答1: I found, Bake Action can be bake all frames as IKs. But I suppose, there are better solution... If you'd like to bake all frames, see the following link. http://blenderartists.org/forum/showthread

How to load OBJ model with three.js in TypeScript

…衆ロ難τιáo~ 提交于 2019-12-22 09:55:49
问题 I am using TypeScript and three.d.ts from definitely typed. I have no problems using THREE.JSONLoader , but how do I use an OBJLoader from here in a TypeScript project. I probably need to create an OBJLoader.d.ts file, but I have no idea how to do it and then how to use the created definition. I tried to simply copy the THREE.JSONLoader definition and rename it to OBJLoader, but that didn't work. 回答1: This answer was correct at the time of posting, but it's out of date now in 2019. See

Why is blender rigged animation distorted when exported as GLTF?

穿精又带淫゛_ 提交于 2019-12-22 09:53:26
问题 I created an animation in Blender with armature rigging. When I test it in Blender by pressing Alt-A, it works perfectly fine. However, when I export it as a .glb using the KhronosGroup GLTF exporter, the resulting animation is distorted (e.g., limbs are disconnected and moving in a weird way). Why is this happening (and how can I fix it)? For the past two days, I have been trying solutions from similar questions (such as applying location/rotation/scale with Ctrl-A, or deleting the Armature

Change width/height/length of 3D Cube created with Three.js at runtime

笑着哭i 提交于 2019-12-22 09:49:07
问题 Can we change the dimension "width/height/length" of 3D Cube created with Three.js at runtime? Like I got a Fiddle in SO which changes Color of Cube at run time : http://jsfiddle.net/mpXrv/1/ Similarly can we change the Dimension?? Here is my code: HTML <script src="http://www.html5canvastutorials.com/libraries/three.min.js"></script> <div id="container"></div> <div class="inputRow clear" id="dimensionsNotRound" data-role="tooltip"> <label class="grid-8">Dimensions (mm):</label> <br/> <br/>

Three.js antialiasing not working on Chrome

♀尐吖头ヾ 提交于 2019-12-22 09:27:25
问题 I'm currently running Chrome v31 and antialiasing seems to not be working at all. No errors in either browsers. Possibly relevant code: var renderer = new THREE.WebGLRenderer( { antialias: true } ); In Safari it renders fine: vs Chrome: 回答1: It seems to be a rendering issue with Chrome, perhaps you have the 32 bit Chrome installed? You can do two things to increase the quality. First set a renderer attribute renderer.shadowMapType = THREE.PCFSoftShadowMap; // options are THREE.BasicShadowMap

Using Video as texture with Three.js

淺唱寂寞╮ 提交于 2019-12-22 09:01:25
问题 I am trying to create a simple rectangle with a .mp4 video as texture. As per three.js documentation(http://threejs.org/docs/#Reference/Textures/Texture) this should be straight forward. When I am putting link of video, all I am getting is a black colored box with no texture on it. I have tested code by replacing video with a jpg image and it works fine. Can someone please explain me what I am doing wrong. I have already seen the examples in which video is played by first linking it to a

How do I attach a text to the vertices of a cube in three.js? Also, Can I add a Text at any point inside the Cube?

倖福魔咒の 提交于 2019-12-22 08:36:15
问题 I am trying to create a cube using three.js for a project. I need to add text to vertices and at different points inside the cube. Any idea how this can be done? 回答1: For some basic code examples of using Sprite objects in Three.js, check out: http://stemkoski.github.com/Three.js/Sprites.html And for an easy way to create images that contain text to use as your sprite textures, check out the sample code at: http://stemkoski.github.com/Three.js/Texture-From-Canvas.html I think a combination of