Three js add object to scene - javascript

I'm working off an example from the site and would like to add a textured cube to the scene and ideally have it in a specific position. This is what I've tried so far but it's not appearing:
var frametexture = new THREE.ImageUtils.loadTexture( 'https://threejs.org/examples/textures/crate.gif' );
var artwork = new THREE.BoxBufferGeometry( 200, 200, 20 );
var material = new THREE.MeshBasicMaterial( { map: frametexture } );
artframe = new THREE.Mesh( artwork, frametexture );
scene.add( artframe );
artwork.scale( - 1, 1, 1 );
Here's my JSFIDDLE


var frametexture = new THREE.ImageUtils.loadTexture( 'https://threejs.org/examples/textures/crate.gif' );
Should instead be
var frametexture = THREE.ImageUtils.loadTexture( 'https://threejs.org/examples/textures/crate.gif' );
and
artframe = new THREE.Mesh( artwork, frametexture );
needs to be
artframe = new THREE.Mesh( artwork, material);

Related

How get three.js json model vertex position

I use this code to load a THREE.js json model :
var noisenormalmap = THREE.ImageUtils.loadTexture( "obj/jgd/noisenormalmap.png" );
noisenormalmap.wrapS = THREE.RepeatWrapping;
noisenormalmap.wrapT = THREE.RepeatWrapping;
noisenormalmap.repeat.set( 5, 5 );
var loader = new THREE.JSONLoader();
loader.load( 'myobject.json', function ( geometry ) {
JGDframe = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( {
color: 0xAF0000 ,
side: THREE.DoubleSide,
specular: 0x222222,
shininess: 1000,
emissive:0x000000,
normalMap: noisenormalmap,
normalScale: new THREE.Vector2( 0.32, 0.32 ),
envMap: reflectionCube,
reflectivity:0.82,
refractionRatio:0.1,
combine: THREE.AddOperation
} ) );
scene.add( JGDframe );
});
I want to get myobject.json.geometry.vertex[0].position.x. How can I get it ?

It is JGDframe.geometry.vertices[0].x or y or z

How do I attach a texture to JSON object in Three.js?

How do I attach a texture to JSON object in Three.js?
Someone help me. Please see my inability cord below.
var texture = new THREE.ImageUtils.loadTexture('panel.png');
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 1, 1 );
var loader = new THREE.JSONLoader();
loader.load( 'panel.json', function ( geometry ) {
model = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( {map: texture} ) );
scene.add( model )
} );

Try below codes, define the material in your json file.
var loader = new THREE.JSONLoader();
loader.load( 'panel.json', function ( geometry, material ) {
model = new THREE.Mesh( geometry, material);
scene.add( model )
}, 'panel.png');

More than 4 morphnormals to a materials in three.js

function loadhairmat(path)
{
var material = new THREE.MeshLambertMaterial( { map: THREE.ImageUtils.loadTexture( path )} );
return material;
}
How to apply more than 4 normal map to a material.

var materials = [
new THREE.MeshLambertMaterial({map: ..)}),
new THREE.MeshLambertMaterial({map: ..)}),
new THREE.MeshLambertMaterial({map: ..)}),
new THREE.MeshLambertMaterial({map: ..)}),
new THREE.MeshLambertMaterial({map: ..)})
//..
];
var obj= new THREE.Mesh(
new THREE.BoxGeometry( 562, 562, 562, 1, 1, 1 ),
new THREE.MeshFaceMaterial( materials ) );
scene.add( obj );

threecsg.js and subdivision modifier distorted geometry

I have the latest threecsg.js library and my use of it has been okay, except when I try to use the subdivision modifier after a CSG operation. Here is example code, modified from the example.html file that comes with the library from github:
var start_time = (new Date()).getTime();
var cube_geometry = new THREE.CubeGeometry( 3, 3, 3 );
var cube_mesh = new THREE.Mesh( cube_geometry );
cube_mesh.position.x = -6;
var cube_bsp = new ThreeBSP( cube_mesh );
var sphere_geometry = new THREE.SphereGeometry( 1.8, 12, 12 );
var sphere_mesh = new THREE.Mesh( sphere_geometry );
sphere_mesh.position.x = -7;
sphere_mesh.position.y -= 0;
var sphere_bsp = new ThreeBSP( sphere_mesh );
var subtract_bsp = cube_bsp.union( sphere_bsp );
var result = subtract_bsp.toMesh( new THREE.MeshLambertMaterial({ shading: THREE.SmoothShading, map: THREE.ImageUtils.loadTexture('texture.png') }) );
result.geometry.computeVertexNormals();
var smooth = result.geometry.clone() ;
smooth.mergeVertices();
var modifier = new THREE.SubdivisionModifier(0.1);
modifier.modify( smooth );
var mesh = new THREE.Mesh( smooth, new THREE.MeshPhongMaterial( { wireframe:true, color: 0xffffff } ) );
mesh.geometry.computeFaceNormals();
scene.add( mesh );
The above code unites a sphere and a cube. After this, it runs the resulting geometry through the subdivision modifier. The final output that is added to the scene has faces that are protruding from the object, other than that, the object does look smooth. Can anyone please help in solving this issue, that is, removing the protruding faces?

three.js: BufferGeometry and textures

I'm trying to load textures on a THREE.BufferGeometry, but the texture isn't showing up. If I use normal geometry, the texture shows up. Are textures unsupported with BufferGeometry or am I doing something wrong?
This works:
var geom = new THREE.BoxGeometry(1,1,1);
var texture = THREE.ImageUtils.loadTexture("texture.png");
var mat = new THREE.MeshPhongMaterial({ map:texture, side:THREE.DoubleSide });
scene.add( new THREE.Mesh(geom, mat) );
This doesn't:
var geom = new THREE.BoxGeometry(1,1,1);
var buffgeom = new THREE.BufferGeometry();
buffgeom.fromGeometry(geom);
var texture = THREE.ImageUtils.loadTexture("texture.png");
var mat = new THREE.MeshPhongMaterial({ map:texture, side:THREE.DoubleSide });
scene.add( new THREE.Mesh(buffgeom, mat) );

There is a bug in r68's BufferGeometry.fromGeometry().
Its been fixed in r69dev already.

Categories

Resources