ThreeJS & Blender - Mesh exported from Blend is not visible in ThreeJS

ThreeJS & Blender - Mesh exported from Blend is not visible in ThreeJS - three.js

I have a model in blender (downloaded from http://www.blendswap.com/blends/view/4120) and i have exported this model in ThreeJS format. This is the result:
{
"metadata" :
{
"formatVersion" : 3.1,
"generatedBy" : "Blender 2.7 Exporter",
"vertices" : 8,
"faces" : 6,
"normals" : 8,
"colors" : 0,
"uvs" : [],
"materials" : 1,
"morphTargets" : 0,
"bones" : 74
},
"scale" : 1.000000,
"materials" : [ {
"DbgColor" : 15658734,
"DbgIndex" : 0,
"DbgName" : "default",
"vertexColors" : false
}],
"vertices" : [1.45304,-0.648216,-1.45304,1.45304,-0.648216,1.45304,-1.45304,-0.648216,1.45304,-1.45304,-0.648216,-1.45304,-1.45304,0.661309,-1.45304,-1.45304,0.661309,1.45304,1.45304,0.661309,1.45304,1.45304,0.661309,-1.45304],
"morphTargets" : [],
"normals" : [-0.577349,0.577349,0.577349,0.577349,0.577349,0.577349,0.577349,0.577349,-0.577349,-0.577349,0.577349,-0.577349,0.577349,-0.577349,0.577349,0.577349,-0.577349,-0.577349,-0.577349,-0.577349,0.577349,-0.577349,-0.577349,-0.577349],
"colors" : [],
"uvs" : [],
"faces" : [35,0,3,2,1,0,0,1,2,3,35,2,3,4,5,0,2,1,4,5,35,3,0,7,4,0,1,0,6,4,35,0,1,6,7,0,0,3,7,6,35,1,2,5,6,0,3,2,5,7,35,5,4,7,6,0,5,4,6,7],
"bones" : [{"parent":-1,"name":"Base_Bone","pos":[-3.88462e-09,4.46118,-0.274544],"rotq":[-3.15207e-06,0.864534,-0.502575,-1.83529e-06],"scl":[4.54636,4.54636,4.54636]},{"parent":0,"name":"spine_Controller","pos":[3.18949e-06,-0.439404,-0.389735],"rotq":[0.00348749,0.256413,-0.966471,0.0131584],"scl":[1,1,1]},{"parent":0,"name":"spine.02","pos":[5.34277e-13,-7.07805e-08,-0.166904],"rotq":[-9.78041e-07,0.235622,-0.971845,3.54896e-06],"scl":[1,1,1]},{"parent":2,"name":"spine.03","pos":[-1.66533e-14,3.72529e-09,-0.162243],"rotq":[-0.232056,-1.50512e-08,3.26627e-08,0.972702],"scl":[1,1,1]},{"parent":3,"name":"spine.04","pos":[-4.81212e-14,-7.45058e-08,-0.090176],"rotq":[-0.0354694,-3.39888e-09,-7.51124e-10,0.999371],"scl":[1,1,1]},{"parent":4,"name":"shoulder.L","pos":[0.0140999,0.107349,-0.0880517],"rotq":[-0.366786,-0.569625,0.341051,0.651674],"scl":[1,1,1]},{"parent":5,"name":"upper_arm.L","pos":[-3.72529e-09,-4.54602e-08,-0.156786],"rotq":[-0.0604418,0.0502684,-0.697246,0.712508],"scl":[1,1,1]},{"parent":6,"name":"forearm.L","pos":[-1.37563e-07,-3.72529e-09,-0.241539],"rotq":[0.166252,0.0200298,0.00303399,0.985875],"scl":[1,1,1]},{"parent":7,"name":"hand.L","pos":[1.80804e-07,6.0536e-09,-0.216896],"rotq":[0.0466005,-0.0882202,-0.702521,0.704635],"scl":[1,1,1]},{"parent":8,"name":"thumb_Controller.L","pos":[-0.0683041,-0.0426754,-0.0293453],"rotq":[-0.752982,-0.000571995,-0.00587021,0.658015],"scl":[1,1,1]},{"parent":8,"name":"thumb.01.L","pos":[-0.0369044,0.00327038,-0.0188109],"rotq":[-0.0847829,0.40622,-0.634676,0.651907],"scl":[1,1,1]},{"parent":10,"name":"thumb.02.L","pos":[4.65661e-08,-1.86265e-08,-0.0632958],"rotq":[0.0671852,0.00867713,-0.0116558,0.997635],"scl":[1,1,1]},{"parent":11,"name":"thumb.03.L","pos":[8.47504e-08,-3.72529e-08,-0.030372],"rotq":[0.110427,-0.0121641,0.00563747,0.993794],"scl":[1,1,1]},{"parent":8,"name":"palm.01_Controller.L","pos":[-0.0250351,-0.0382581,-0.027615],"rotq":[-0.747863,-0.0030183,0.000928475,0.663845],"scl":[1,1,1]},{"parent":8,"name":"palm.01.L","pos":[-0.0247865,-0.00969828,-0.0305847],"rotq":[0.0116768,0.108972,-0.0166234,0.993837],"scl":[1,1,1]},{"parent":14,"name":"finger_index.01.L","pos":[1.39698e-09,-5.15138e-08,-0.087893],"rotq":[0.0261066,0.0194109,0.0626131,0.997508],"scl":[1,1,1]},{"parent":15,"name":"finger_index.02.L","pos":[-5.58794e-09,5.56465e-08,-0.051015],"rotq":[-0.00319226,-0.00446517,-0.00153367,0.999984],"scl":[1,1,1]},{"parent":16,"name":"finger_index.03.L","pos":[2.23517e-08,-3.95812e-08,-0.0288934],"rotq":[-0.000238375,0.00553013,0.00110929,0.999984],"scl":[1,1,1]},{"parent":8,"name":"palm.02_Controller.L","pos":[-0.00613564,-0.0379131,-0.0272735],"rotq":[-0.756765,-0.000373679,0.00286476,0.653681],"scl":[1,1,1]},{"parent":8,"name":"palm.02.L","pos":[-0.00588532,-0.0105999,-0.0329824],"rotq":[0.00861685,0.0305347,0.0379183,0.998777],"scl":[1,1,1]},{"parent":19,"name":"finger_middle.01.L","pos":[-1.30385e-08,-1.98954e-07,-0.0892504],"rotq":[0.0341296,-0.00789161,0.00228843,0.999384],"scl":[1,1,1]},{"parent":20,"name":"finger_middle.02.L","pos":[9.31323e-10,1.4191e-07,-0.0569209],"rotq":[-0.00105231,-0.00209317,-0.000288841,0.999997],"scl":[1,1,1]},{"parent":21,"name":"finger_middle.03.L","pos":[2.79397e-09,-2.04425e-07,-0.0321841],"rotq":[0.000510063,0.00255101,0.000783569,0.999996],"scl":[1,1,1]},{"parent":8,"name":"palm.03_Controller.L","pos":[0.0120405,-0.0379479,-0.0269506],"rotq":[-0.752674,-0.00061697,0.00287802,0.658387],"scl":[1,1,1]},{"parent":8,"name":"palm.03.L","pos":[0.0117112,-0.00811656,-0.0327077],"rotq":[0.0254185,-0.0423059,0.0370735,0.998093],"scl":[1,1,1]},{"parent":24,"name":"finger_ring.01.L","pos":[7.45058e-09,5.68107e-08,-0.0871205],"rotq":[0.0157294,-0.0196917,0.00517667,0.999669],"scl":[1,1,1]},{"parent":25,"name":"finger_ring.02.L","pos":[0,4.23752e-08,-0.0520437],"rotq":[0.00346145,0.000296477,-0.000712732,0.999994],"scl":[1,1,1]},{"parent":26,"name":"finger_ring.03.L","pos":[-3.72529e-09,-2.6077e-08,-0.0296788],"rotq":[0.0103584,-0.00126846,-8.82066e-05,0.999946],"scl":[1,1,1]},{"parent":8,"name":"palm.04_Controller.L","pos":[0.0294525,-0.0379501,-0.0273554],"rotq":[-0.75111,-0.00635432,0.00975096,0.660074],"scl":[1,1,1]},{"parent":8,"name":"palm.04.L","pos":[0.0294058,-0.00417163,-0.0313179],"rotq":[0.0281065,-0.0969915,0.0634148,0.992865],"scl":[1,1,1]},{"parent":29,"name":"finger_pinky.01.L","pos":[2.23517e-08,-8.6613e-08,-0.0803671],"rotq":[0.0195471,-0.064806,0.0353482,0.99708],"scl":[1,1,1]},{"parent":30,"name":"finger_pinky.02.L","pos":[1.49012e-08,3.72529e-09,-0.0447478],"rotq":[0.000326434,-0.000735238,0.000348568,1],"scl":[1,1,1]},{"parent":31,"name":"finger_pinky.03.L","pos":[-1.49012e-08,-1.15484e-07,-0.0230973],"rotq":[-0.00114785,-0.000621325,-0.00071641,0.999999],"scl":[1,1,1]},{"parent":4,"name":"shoulder.L.001","pos":[-0.0141001,0.107349,-0.0880517],"rotq":[-0.370994,0.566894,-0.345867,0.649131],"scl":[1,1,1]},{"parent":33,"name":"upper_arm.L.001","pos":[-9.31323e-10,1.71858e-07,-0.156786],"rotq":[0.0502957,-0.060419,-0.702424,0.707404],"scl":[1,1,1]},{"parent":34,"name":"forearm.L.001","pos":[-1.13796e-07,9.31323e-09,-0.241539],"rotq":[0.0204615,0.1662,0.985778,0.0141796],"scl":[1,1,1]},{"parent":35,"name":"hand.L.001","pos":[-4.01051e-08,2.79397e-09,-0.216896],"rotq":[-0.0884872,0.046091,-0.702563,0.704593],"scl":[1,1,1]},{"parent":36,"name":"thumb_Controller.L.001","pos":[-0.0684243,0.0424823,-0.0293454],"rotq":[0.00227442,0.752978,-0.657977,0.00921574],"scl":[1,1,1]},{"parent":36,"name":"thumb.01.L.001","pos":[-0.036895,-0.00337458,-0.018811],"rotq":[-0.41495,0.00439629,-0.761208,0.498357],"scl":[1,1,1]},{"parent":38,"name":"thumb.02.L.001","pos":[1.1269e-07,-3.72529e-08,-0.0632959],"rotq":[0.0644261,0.0209377,-0.0433643,0.99676],"scl":[1,1,1]},{"parent":39,"name":"thumb.03.L.001","pos":[4.28408e-08,9.31323e-08,-0.0303719],"rotq":[0.0918,0.0625677,0.00359743,0.993803],"scl":[1,1,1]},{"parent":36,"name":"palm.01_Controller.L.001","pos":[-0.0251431,0.0381872,-0.0276151],"rotq":[-0.0038138,0.74786,-0.663826,-0.00511879],"scl":[1,1,1]},{"parent":36,"name":"palm.01.L.001","pos":[-0.0248138,0.00962824,-0.0305848],"rotq":[-0.108579,-0.0148931,-0.993926,-0.00995566],"scl":[1,1,1]},{"parent":42,"name":"finger_index.01.L.001","pos":[1.11759e-08,3.29164e-08,-0.0878929],"rotq":[0.0256096,-0.0200615,0.0187849,0.999294],"scl":[1,1,1]},{"parent":43,"name":"finger_index.02.L.001","pos":[-5.58794e-09,1.00466e-07,-0.0510151],"rotq":[-0.00260987,0.00482873,0.0200336,0.999784],"scl":[1,1,1]},{"parent":44,"name":"finger_index.03.L.001","pos":[2.23517e-08,8.75443e-08,-0.0288934],"rotq":[-0.000932829,-0.00545569,-0.0185078,0.999813],"scl":[1,1,1]},{"parent":36,"name":"palm.02_Controller.L.001","pos":[-0.00624267,0.0378956,-0.0272735],"rotq":[0.00188735,0.756763,-0.653687,0.000288296],"scl":[1,1,1]},{"parent":36,"name":"palm.02.L.001","pos":[-0.00591523,0.0105831,-0.0329825],"rotq":[-0.0307926,-0.00764273,-0.999491,-0.00335627],"scl":[1,1,1]},{"parent":47,"name":"finger_middle.01.L.001","pos":[1.86265e-09,-1.07088e-07,-0.0892504],"rotq":[0.0345216,0.00594766,-0.012016,0.999314],"scl":[1,1,1]},{"parent":48,"name":"finger_middle.02.L.001","pos":[-2.79397e-09,1.67725e-07,-0.056921],"rotq":[-0.000937477,0.00214737,0.00759602,0.999968],"scl":[1,1,1]},{"parent":49,"name":"finger_middle.03.L.001","pos":[-3.72529e-09,-7.10133e-09,-0.0321842],"rotq":[0.000323665,-0.00258107,0.0103168,0.999943],"scl":[1,1,1]},{"parent":36,"name":"palm.03_Controller.L.001","pos":[0.0119334,0.0379818,-0.0269507],"rotq":[0.000784713,0.752674,-0.658393,-0.000872428],"scl":[1,1,1]},{"parent":36,"name":"palm.03.L.001","pos":[0.0116882,0.0081496,-0.0327077],"rotq":[-0.0417454,0.0263288,0.998702,0.0126219],"scl":[1,1,1]},{"parent":52,"name":"finger_ring.01.L.001","pos":[-7.45058e-09,-1.234e-07,-0.0871204],"rotq":[0.0164006,0.0191361,-0.0167514,0.999542],"scl":[1,1,1]},{"parent":53,"name":"finger_ring.02.L.001","pos":[-1.49012e-08,-2.54484e-07,-0.0520437],"rotq":[0.00344704,-0.000433122,0.017268,0.999845],"scl":[1,1,1]},{"parent":54,"name":"finger_ring.03.L.001","pos":[-1.39698e-09,-2.8871e-08,-0.0296789],"rotq":[0.010388,0.000998136,-0.0299645,0.999497],"scl":[1,1,1]},{"parent":36,"name":"palm.04_Controller.L.001","pos":[0.0293453,0.038033,-0.0273554],"rotq":[0.00503468,0.75112,-0.660085,-0.00904701],"scl":[1,1,1]},{"parent":36,"name":"palm.04.L.001","pos":[0.0293939,0.00425465,-0.0313179],"rotq":[-0.0966088,0.0293964,0.99376,0.0473721],"scl":[1,1,1]},{"parent":57,"name":"finger_pinky.01.L.001","pos":[-7.45058e-09,-6.51926e-09,-0.0803671],"rotq":[0.0243421,0.0631614,0.00997108,0.997657],"scl":[1,1,1]},{"parent":58,"name":"finger_pinky.02.L.001","pos":[-5.58794e-09,1.93715e-07,-0.0447477],"rotq":[0.000407814,0.000693327,-0.00687187,0.999976],"scl":[1,1,1]},{"parent":59,"name":"finger_pinky.03.L.001","pos":[1.86265e-08,-2.8871e-07,-0.0230975],"rotq":[-0.00108006,0.000732799,-0.00654066,0.999978],"scl":[1,1,1]},{"parent":0,"name":"neck_Controller","pos":[2.06795e-06,-0.295536,-0.59375],"rotq":[0.00405876,-0.261664,0.965034,0.0149668],"scl":[1,1,1]},{"parent":4,"name":"neck_base","pos":[-3.10862e-14,3.7253e-09,-0.0901205],"rotq":[0.345807,4.0891e-08,-4.81046e-09,0.938306],"scl":[1,1,1]},{"parent":62,"name":"neck.01","pos":[6.20892e-14,2.23517e-08,-0.0911808],"rotq":[0.0972022,1.04856e-07,7.97366e-08,0.995265],"scl":[1,1,1]},{"parent":63,"name":"neck.02","pos":[-8.21565e-15,-1.21072e-08,-0.0573017],"rotq":[-0.05593,4.79096e-09,-6.15004e-08,0.998435],"scl":[1,1,1]},{"parent":64,"name":"neck.03","pos":[-6.10623e-16,-2.98023e-08,-0.0608694],"rotq":[-0.145301,1.00167e-08,-1.33748e-08,0.989388],"scl":[1,1,1]},{"parent":0,"name":"thigh.L","pos":[-0.0654458,-0.0427966,-0.0914774],"rotq":[0.0303704,0.956932,0.267858,0.107753],"scl":[1,1,1]},{"parent":66,"name":"shin.L","pos":[-1.46538e-08,8.78208e-09,-0.463457],"rotq":[0.0683877,0.113482,-0.00769007,0.991154],"scl":[1,1,1]},{"parent":67,"name":"foot.L","pos":[7.80256e-09,3.71074e-09,-0.491625],"rotq":[-0.485727,-0.0120631,0.0334887,0.873386],"scl":[1,1,1]},{"parent":68,"name":"toe.L","pos":[-3.19415e-09,9.31323e-10,-0.136075],"rotq":[-0.317111,-0.00638343,-0.000738404,0.948367],"scl":[1,1,1]},{"parent":0,"name":"thigh.L.001","pos":[0.0654464,-0.0427956,-0.0914774],"rotq":[0.0299789,-0.956945,-0.267812,0.107866],"scl":[1,1,1]},{"parent":70,"name":"shin.L.001","pos":[-1.6691e-08,-9.96806e-10,-0.463458],"rotq":[0.0683197,-0.113523,0.00745817,0.991156],"scl":[1,1,1]},{"parent":71,"name":"foot.L.001","pos":[1.85082e-10,-6.60293e-09,-0.491626],"rotq":[-0.484508,0.036448,0.0101082,0.873969],"scl":[1,1,1]},{"parent":72,"name":"toe.L.001","pos":[9.25502e-09,-3.72529e-09,-0.136075],"rotq":[-0.316319,0.0233031,-0.0435689,0.947365],"scl":[1,1,1]}],
"skinIndices" : [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
"skinWeights" : [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
"animations" : []
}
I load this model with JSONLoader, but i only have a black square in my browser without any mesh.
var WIDTH = window.innerWidth / 2,
HEIGHT = window.innerHeight / 2;
var renderer = new THREE.WebGLRenderer();
renderer.setSize( WIDTH, HEIGHT );
document.body.appendChild( renderer.domElement );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 75, WIDTH / HEIGHT, 0.1, 1000 );
camera.position.z = 5;
var loader = new THREE.JSONLoader();
loader.load("avatar/skeleton.js", function( geometry, materials ) {
mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );
mesh.position.x = 0;
mesh.position.y = 0;
mesh.position.z = 0;
scene.add( mesh );
renderer.render( scene, camera );
});
Someone know what i'm doing wrong?
Thanks

You need to add a light to your scene like so:
var directionalLight = new THREE.DirectionalLight(0xffffff, 1.2);
directionalLight.position.set(0, -1, 0);
scene.add(directionalLight);
Here's the fiddle I used to test my theory, but it should work if you just add those to the top of your file.
http://jsfiddle.net/dmt23/6qwswa25/

Related

WebGL: INVALID_VALUE: texImage2D: no canvas in three.js

I followed a procedural planet example from https://github.com/brunosimon/lab/blob/master/experiments/procedural-planet/index.html, the original three.js version is old.
The general idea of the code is simple, firstly generate a facted sphere from six box geometries, and then generate six textures from the gradient canvas, at last generate the material from these generated textures.
the main code about generating material
function generate_material()
{
var maps = generate_maps();
//console.log(maps.textures);
var materials = [];
// Each face
for( var i = 0; i < 6; i++ )
materials.push( get_shader_material( maps.textures[ i ], maps.bumps[ i ] ) );
//materials.push( new THREE.MeshBasicMaterial({map: makeCanvasTexture()}) );
return materials;
}
function generate_maps ()
{
var textures = [],
bumps = [],
materials = [],
resolution = 1024;
// Each face
for(var i = 0; i < 6; i++)
{
var texture = new THREE.WebGLRenderTarget( resolution, resolution, { minFilter : THREE.LinearFilter, magFilter : THREE.LinearFilter, format : THREE.RGBFormat } ),
texture_camera = new THREE.OrthographicCamera( - resolution / 2, resolution / 2, resolution / 2, - resolution / 2, -100, 100 ),
texture_scene = new THREE.Scene(),
geometry = new THREE.PlaneBufferGeometry( resolution, resolution ),
material = new get_texture_shader_material( i, seed, options.clouds.distortion ),
plane = new THREE.Mesh( geometry,material);
materials.push( material );
texture_camera.position.z = 10;
plane.position.z = - 10;
texture_scene.add(plane);
renderer.render( texture_scene, texture_camera );
/**/
// Retrieve buffer
var buffer = new Uint8Array( resolution * resolution * 4 ),
gl = renderer.getContext();
gl.readPixels( 0, 0, resolution, resolution, gl.RGBA, gl.UNSIGNED_BYTE, buffer );
textures.push( texture );
bumps.push( {
image :
{
data : buffer,
height : resolution,
width : resolution
}
} );
}
// Return
return {
textures : textures,
bumps : bumps,
smaterials : materials,
};
}
function get_shader_material ( texture_map, bump_map )
{ //
var vertexShader = document.getElementById( 'planet-vertex-shader' ).textContent,
fragmentShader = document.getElementById( 'planet-fragment-shader' ).textContent,
uniforms = generate_uniforms( texture_map );
if(textures.water){
}else{
console.log('no water')
}
uniforms.tWaterGradient =
{
type : 't',
value : textures.water.texture
};
uniforms.tGroundGradient =
{
type : 't',
value : textures.ground.texture
};
uniforms.tIceGradient =
{
type : 't',
value : textures.ice.texture
};
return new THREE.ShaderMaterial( {
uniforms : uniforms,
vertexShader : vertexShader,
fragmentShader : fragmentShader,
transparent : true
} );
}
function get_texture_shader_material ( index, seed, clouds_distortion )
{
var vertexShader = document.getElementById( 'planet-texture-vertex-shader' ).textContent,
fragmentShader = document.getElementById( 'planet-texture-fragment-shader' ).textContent,
uniforms =
{
index :
{
type : 'i',
value : index
},
fCloudsDistortion :
{
type : 'f',
value : clouds_distortion
},
v3Seed :
{
type : 'v3',
value : seed
}
};
return new THREE.ShaderMaterial( {
uniforms : uniforms,
vertexShader : vertexShader,
fragmentShader : fragmentShader,
transparent : true,
depthWrite : false
} );
}
I reused most of the code however got some problem with the material part, the code example I made is seen here - https://jsfiddle.net/ufjqcht6/86/
three.module.js?3179:19902 WebGL: INVALID_VALUE: texImage2D: no canvas
texImage2D # three.module.js?3179:19902
GL ERROR :GL_INVALID_OPERATION : glGenerateMipmap: Can not generate mips ERROR GL_INVALID_OPERATION : glGenerateMipmap: Can not generate mips
RENDER WARNING: texture bound to texture unit 1 is not renderable. It might be non-power-of-2 or have incompatible texture filtering (maybe)?
RENDER WARNING: texture bound to texture unit 2 is not renderable. It might be non-power-of-2 or have incompatible texture filtering (maybe)?
the code example can be seen here, where the issues can be only seen from the chrome 's developer 's console.
I debugged the code but I can't identify whether the problem coming from the shader's code or the js's code ? and how to solve it

I debugged the code but I can't identify whether the problem coming from the shader's code or the js's code ?
The problem is the way you are using Object.assign() in your code. For the second and third texture, you overwrite the style property so it does not has a definition for width and height anymore. Gradient_Texture.init() will then assign undefined to the canvas's dimensions which results in the respective WebGL error.
Fixing the Object.assign() statements solves the issue: https://jsfiddle.net/L21jz07k/

Three.js fat line hilbert3D to points

Im trying to implement line with thinkness and I found this example
However the example uses:
var points = GeometryUtils.hilbert3D( new THREE.Vector3( 0, 0, 0 ), 20.0, 1, 0, 1, 2, 3, 4, 5, 6, 7 );
I do not want to use this and instead i want to create the line with an Array of Vector3 points.
var geometry = new LineGeometry();
geometry.setPositions( positions );
geometry.setColors( colors );
matLine = new LineMaterial( {
color: 0xffffff,
linewidth: 5, // in pixels
vertexColors: true,
//resolution: // to be set by renderer, eventually
dashed: false
} );
line = new Line2( geometry, matLine );
line.computeLineDistances();
line.scale.set( 1, 1, 1 );
scene.add( line );
Basically, in the example it uses positions, I want to use points instead.
Thanks

It's not possible to pass an array of THREE.Vector3() to THREE.LineGeometry. However, you just have to convert your data to this pattern [ x1, y1, z1, x2, y2, z2, ... ] and the setup should work fine.
let camera, scene, renderer;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 10 );
camera.position.set( 0.5, 0.5, 2 );
scene = new THREE.Scene();
const points = [
0, 0, 0,
1, 0, 0,
1, 1, 0,
0, 1, 0
];
const geometry = new THREE.LineGeometry();
geometry.setPositions( points );
const material = new THREE.LineMaterial( { color: 0xffffff, linewidth: 2 } );
material.resolution.set( window.innerWidth, window.innerHeight );
const lines = new THREE.Line2( geometry, material );
scene.add( lines );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
}
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
body {
margin: 0;
}
canvas {
display: block;
}
<script src="https://cdn.jsdelivr.net/npm/three#0.115/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three#0.115/examples/js/lines/LineSegments2.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three#0.115/examples/js/lines/Line2.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three#0.115/examples/js/lines/LineMaterial.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three#0.115/examples/js/lines/LineSegmentsGeometry.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three#0.115/examples/js/lines/LineGeometry.js"></script>

Create object with different colors on faces

Drawing a Tetrahedron, I would like to set one color per face, for example, red, green, blue and orange.
Here is the code :
const divid = document.getElementById("myid");
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(
70,
window.innerWidth / window.innerHeight,
1,
1000
);
let renderer = new THREE.WebGLRenderer({ alpha: true });
divid.appendChild(renderer.domElement);
camera.position.z = 3;
let triangle = new THREE.Mesh(
new THREE.TetrahedronBufferGeometry(),
new THREE.MeshBasicMaterial({ color: 0xff0000 })
);
scene.add(triangle);
let animate = function() {
requestAnimationFrame(animate);
triangle.rotation.x += 0.005;
triangle.rotation.y += 0.01;
renderer.render(scene, camera);
};
animate();
Can't we pass an array of 4 colors to set on each face ?
Code available here too : https://codepen.io/jeffprod/pen/JjdLdjO

Use .vertexColors: true with the material and add color attribute to the geometry, setting the same colour to each vertex of a face:
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(
70,
innerWidth / innerHeight,
1,
1000
);
let renderer = new THREE.WebGLRenderer({
alpha: true
});
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
camera.position.z = 3;
let geom = new THREE.TetrahedronBufferGeometry();
geom.setAttribute("color", new THREE.Float32BufferAttribute([
1, 0, 0, //red
1, 0, 0,
1, 0, 0,
0, 1, 0, //green
0, 1, 0,
0, 1, 0,
0, 0, 1, //blue
0, 0, 1,
0, 0, 1,
1, 0.75, 0.25, //orange (sort of)
1, 0.75, 0.25,
1, 0.75, 0.25
], 3));
let triangle = new THREE.Mesh(
geom,
new THREE.MeshBasicMaterial({
vertexColors: true
})
);
scene.add(triangle);
let animate = function() {
requestAnimationFrame(animate);
triangle.rotation.x += 0.005;
triangle.rotation.y += 0.01;
renderer.render(scene, camera);
};
animate();
body {
overflow: hidden;
margin: 0;
}
<script src="https://threejs.org/build/three.min.js"></script>

Smooth Ring 3D in three.js

I want to draw a ring with the help of ExtrudeGeometry.
Ring3D = function(innerRadius, outerRadius, heigth, Segments) {
var extrudeSettings = {
amount: heigth,
bevelEnabled: false,
curveSegments: Segments
};
var arcShape = new THREE.Shape();
arcShape.moveTo(outerRadius, 0);
arcShape.absarc(0, 0, outerRadius, 0, Math.PI * 2, false);
var holePath = new THREE.Path();
holePath.moveTo(innerRadius, 0);
holePath.absarc(0, 0, innerRadius, 0, Math.PI * 2, true);
arcShape.holes.push(holePath);
var geometry = new THREE.ExtrudeGeometry(arcShape, extrudeSettings);
var material = new THREE.MeshPhongMaterial({
color: 0x00ffff
});
var mesh = new THREE.Mesh(geometry, material);
mesh.rotation.x = Math.PI / 2;
mesh.position.y = heigth / 2;
var object = new THREE.Object3D;
object.add(mesh);
return object;
}
The resulting figure has visible scars. And the cylinder and torus such scars not. How to get rid of them? Example here.
with geometry.computeVertexNormals();

var shape = new THREE.Shape();
shape.moveTo(0, 0);
shape.lineTo(0, 10);
shape.quadraticCurveTo(35, 30, 0, 50);
shape.lineTo(0, 60);
shape.quadraticCurveTo(48, 30, 0, 0);
var extrudeSettings = {
amount : 20,
steps : 10,
bevelEnabled: false,
curveSegments: 8
};
var geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );
var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { color: '0x804000' ,transparent: true,opacity: 0.2} ) );
scene.add( mesh );

You need to .computeVertexNormals() from your geometry. But it seems there is some issue (with a solution) explained here: https://github.com/mrdoob/three.js/issues/323. I am not sure if it will work in your case.

I have found a comment in the code of ExtrudeGeometry:
this.computeFaceNormals();
// can't really use automatic vertex normals
// as then front and back sides get smoothed too
// should do separate smoothing just for sides
//this.computeVertexNormals();
So it seems it is not supported now :(

THREEjs can't use the material on the JSON Model when initializing. Gives me WebGL errors

I am simply trying to get a material on a mesh that I exported from blender. The mesh shows up no problem when I use the JSONLoader, but I cant get the material I exported. I looked everywhere for an answer but no luck. Here is my code:
function init() {
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild( renderer.domElement );
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 10;
camera.position.y = 3;
scene = new THREE.Scene();
loader = new THREE.JSONLoader(true);
var texture = THREE.ImageUtils.loadTexture( 'bear_diffuse1.png' );
var material = new THREE.MeshBasicMaterial({map: texture});
loader.load( "bear_MODEL.js", createMesh, '' );
}
function createMesh(geometry, materials){
mesh = new THREE.Mesh(geometry, THREE.MeshFaceMaterial(materials));
mesh.scale.set( 5, 5, 5 );
scene.add( mesh );
camera.lookAt(mesh.position);
}
this just makes my model a random color. I have also tried:
mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
for creating the mesh, but this gives me a webgl error:
.WebGLRenderingContext: GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 1
Am have been looking for an answer but everyone seems to be suggesting these options and none of them are working. Here are the materials that were exported from blender
"materials" : [ {
"DbgColor" : 15658734,
"DbgIndex" : 0,
"DbgName" : "Material.001",
"blending" : "NormalBlending",
"colorAmbient" : [0.3838607966899872, 0.3780101239681244, 0.4000000059604645],
"colorDiffuse" : [0.3838607966899872, 0.3780101239681244, 0.4000000059604645],
"colorSpecular" : [0.0, 0.0, 0.0],
"depthTest" : true,
"depthWrite" : true,
"mapDiffuse" : "bear_diffuse1.png",
"mapDiffuseWrap" : ["repeat", "repeat"],
"shading" : "Basic",
"specularCoef" : 50,
"transparency" : 1.0,
"transparent" : false,
"vertexColors" : false
},
{
"DbgColor" : 15597568,
"DbgIndex" : 1,
"DbgName" : "Material.001",
"blending" : "NormalBlending",
"colorAmbient" : [0.3838607966899872, 0.3780101239681244, 0.4000000059604645],
"colorDiffuse" : [0.3838607966899872, 0.3780101239681244, 0.4000000059604645],
"colorSpecular" : [0.0, 0.0, 0.0],
"depthTest" : true,
"depthWrite" : true,
"mapDiffuse" : "bear_diffuse1.png",
"mapDiffuseWrap" : ["repeat", "repeat"],
"shading" : "Basic",
"specularCoef" : 50,
"transparency" : 1.0,
"transparent" : false,
"vertexColors" : false
},
Not sure where to go from here or what I am doing wrong.
EDIT I Removed the texture from the material and it worked fine. Anyone know how to make the texture not throw a webGL error?

I figured it out. My model had no UVs so the texture had nothing to map out to and thus a webGL error. Sorry for the pointless question.

Develop Reference

ruby bash windows laravel spring algorithm oracle macos go visual-studio

ThreeJS & Blender - Mesh exported from Blend is not visible in ThreeJS - three.js

Related

WebGL: INVALID_VALUE: texImage2D: no canvas in three.js

Three.js fat line hilbert3D to points

Create object with different colors on faces

Smooth Ring 3D in three.js

THREEjs can't use the material on the JSON Model when initializing. Gives me WebGL errors

Categories

Resources