three.js

Three.js ShaderMaterial issue with lights

ε祈祈猫儿з 提交于 2020-02-04 14:30:29
问题 Helo, here's part of my code - earth globe :) function createGlobe(){ var normalMap = THREE.ImageUtils.loadTexture("images/earth_normal_2048.jpg"); var surfaceMap = THREE.ImageUtils.loadTexture("images/earth_surface_2048.jpg"); var specularMap = THREE.ImageUtils.loadTexture("images/earth_specular_2048.jpg"); var shader = THREE.ShaderLib["phong"]; var uniforms = THREE.UniformsUtils.clone(shader.uniforms); uniforms["tNormal"] = {type:"t", value:normalMap}; uniforms["tDiffuse"] = {type:"t",

Rounded corner box having holes using three.js

笑着哭i 提交于 2020-02-04 12:53:04
问题 I need to create a box having rounded corners on 4 sides but on top and bottom. Three.js has a very good example webgl_geometry_shapes and I'm trying to replicate it to add a hole to the green rounded box. In this example to add a hole to the circle: // Arc circle var arcShape = new THREE.Shape() .moveTo( 50, 10 ) .absarc( 10, 10, 40, 0, Math.PI * 2, false ); var holePath = new THREE.Path() .moveTo( 20, 10 ) .absarc( 10, 10, 10, 0, Math.PI * 2, true ) arcShape.holes.push( holePath ); They

Rounded corner box having holes using three.js

纵然是瞬间 提交于 2020-02-04 12:52:33
问题 I need to create a box having rounded corners on 4 sides but on top and bottom. Three.js has a very good example webgl_geometry_shapes and I'm trying to replicate it to add a hole to the green rounded box. In this example to add a hole to the circle: // Arc circle var arcShape = new THREE.Shape() .moveTo( 50, 10 ) .absarc( 10, 10, 40, 0, Math.PI * 2, false ); var holePath = new THREE.Path() .moveTo( 20, 10 ) .absarc( 10, 10, 10, 0, Math.PI * 2, true ) arcShape.holes.push( holePath ); They

Why can't I draw a complete circle with arc() in Three.js?

白昼怎懂夜的黑 提交于 2020-02-04 08:47:02
问题 I'm trying to draw a complex shape in Three.js using extruded arcs but they just didn't seem to be behaving properly. I don't know if I don't understand the API, but shouldn't this create a complete extruded circle of radius 100 centred at the origin? var path = new THREE.Path(); path.moveTo(0, 0); path.arc(0, 0, 100, 0, Math.PI * 2, false); var shape = path.toShapes(false, false); var extrudeSettings = { amount : 20, steps : 1 }; var geometry = new THREE.ExtrudeGeometry(shape,

THREE.js read pixels from GPUComputationRenderer texture

那年仲夏 提交于 2020-02-02 12:38:28
问题 I have been playing with GPUComputationRenderer on a modified version of this three.js example which modifies the velocity of interacting boids using GPU shaders to hold, read and manipulate boid position and velocity data. I have got to a stage where I can put GPU computed data (predicted collision times) into the texture buffer using the shader. But now I want to read some of that texture data inside the main javascript animation script (to find the earliest collision). Here is the relevant

EffectComposer - Access the image created by the Composer

让人想犯罪 __ 提交于 2020-02-02 09:42:06
问题 I've got a question/problem regarding the EffectComposer. What I'm trying to do: I try to split up all of the post-processing used in my App between multiple EffectComposers. I would like to be able to calculate e.g. 5 shaders in EffectComposer1 , then take the image created by this composer and pass it back into a uniform in e.g. EffectComposer2 . Both the geometry and the texture used in EffectComposer1 are suitable (in terms of their pixel-size) to be used as a uniform in EffectComposer2 .

Place link or “hotspot” inside equirectangular panorama with Three JS

人盡茶涼 提交于 2020-02-01 08:39:55
问题 I am looking for a detailed tutorial or example or good documentation on how to place a link inside an equirectangular panorama with Three.js. With the equirectangular panorama demo it would be great to learn how to for example place a circle or any kind of object in a part of that picture and when clicked it can open another equirectangular panorama or anything really. What techniques do I need to research please? What dependencies do I need to look out for? What other libraries would I need

Place link or “hotspot” inside equirectangular panorama with Three JS

橙三吉。 提交于 2020-02-01 08:39:45
问题 I am looking for a detailed tutorial or example or good documentation on how to place a link inside an equirectangular panorama with Three.js. With the equirectangular panorama demo it would be great to learn how to for example place a circle or any kind of object in a part of that picture and when clicked it can open another equirectangular panorama or anything really. What techniques do I need to research please? What dependencies do I need to look out for? What other libraries would I need

three.js change texture on material

人走茶凉 提交于 2020-02-01 02:42:05
问题 I'm setting up a texture on a mesh in three.js and when it loads it looks how I want it too: texture = THREE.ImageUtils.loadTexture("textures/hash.png"); texture.needsUpdate = true; uniforms = { color: { type: "c", value: new THREE.Color( 0xffffff ) }, texture: { type: "t", value: texture }, }, vertexShader = "varying vec2 vUv; void main() {vUv = uv;gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );}", fragmentShader = "uniform vec3 color; uniform sampler2D texture;

How to export and then import a scene with Three JS?

前提是你 提交于 2020-02-01 01:43:30
问题 I have a complex 3D scene builded with Three JS and a lot of Javascript code. I need to export this scene as one file and then use it on my site with a simple ThreeJS scene player. I have tried ObjectExporter and SceneExporter. But still can not understand how to load this data back into ThreeJS environment. What is the right way to do this? 回答1: SceneExporter does not export the scene objects that are loaded through JSON ObjectExporter can't exports texture link scripts ObjectExporter.js