Three.js is up to v66 and the Gizmo transform controls seemed to have stopped working.
See a demo here:
This is the basic code
var geometry = new THREE.CubeGeometry( 200, 200, 200 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var mesh = new THREE.Mesh( geometry, material );
var control = new THREE.TransformControls( camera, renderer.domElement );
control.addEventListener( 'change', render );
control.attach( mesh );
scene.add( control.gizmo );
http://jsfiddle.net/Hq2Dx/5/
There is no apparent error but they do not appear. I've tried debugging but cannot isolate the issue. Anyone else managed to get it working?
Cheers
change your code.. it will do the trick.. check this fiddle... http://jsfiddle.net/Hq2Dx/7/
var control = new THREE.TransformControls( camera, renderer.domElement );
control.addEventListener( 'change', render );
control.attach( mesh );
scene.add( control);
Related
I'm trying to use three.js to convert existing stls to gltf for use with the Android scene viewer (model-viewer component). However, the gltf I export fails to work with https://arvr.google.com/scene-viewer-preview with the error message "The glTF contains a vertex color, which is not supported by the Scene Viewer specification." It also fails when I load on an android phone using the model-viewer component, when I hit the AR button.
If I export a simple cube BoxBufferGeometry as gltf, that works in scene-viewer. However if I export a BoxGeometry (not Buffered) that also gives the vertex color error.
How do I tell three.js to not include vertex colors in the exported gltf?
The below code is what I'm using - the exportGLTF function is copied from the three.js examples. The stl file is just somthing simple I created from fusion 360.
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var loader = new THREE.STLLoader();
loader.load( 'table.stl', function ( geometry ) {
var material = new THREE.MeshStandardMaterial();
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
exportGLTF(mesh);
}, undefined, function ( error ) {
console.error( error );
} );
var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
var material = new THREE.MeshStandardMaterial();
cube = new THREE.Mesh( geometry, material );
cube.position.set( 0, 0, 0 );
cube.name = "Cube";
scene.add( cube );
exportGLTF(cube);
If you don't care about the vertex colors, you can just delete that attribute from the BufferGeometry that STLLoader produces. I found that Scene Viewer also doesn't like that the geometry is non-indexed. You can work around that with the mergeVertices function in BufferGeometryUtils.
Here's a working example: https://glitch.com/edit/#!/chartreuse-steed
var loader = new THREE.STLLoader();
loader.load(
stlUrl,
function(geometry) {
// Delete vertex colors, since Scene Viewer doesn't support them.
geometry.deleteAttribute("color");
// Apparently Scene Viewer also doesn't support non-indexed geometry,
// so we do this mergeVertices operation just to get an indexed geometry
geometry = THREE.BufferGeometryUtils.mergeVertices(geometry);
var material = new THREE.MeshStandardMaterial();
material.vertexColors = THREE.VertexColors;
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
exportGLTF(mesh);
},
undefined,
function(error) {
console.error(error);
}
);
In ThreeJS, I am trying to bring my camera closer to the rendered mesh so it's taking up more of the viewport. I have messed around with the camera.position.set values but these only seem to change the rotation, not actually bring it closer/further away from the object.
I'm using the OrbitControls module and think this may be overriding the default settings, but am a bit stumped as to how the distance can be changed?
Any help is much appreciated.
Full source
function init() {
// renderer
renderer = new THREE.WebGLRenderer( { canvas: artifactCanvas, antialias: true } );
renderer.setSize(800, 600);
// scene
scene = new THREE.Scene();
scene.add( new THREE.GridHelper( build_plate_size_mm, build_plate_grid_segments ) );
scene.background = new THREE.Color( 0xc5e5fc );
// camera
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 3000 );
camera.position.set( 1000, 500, 1000 );
camera.lookAt( 0, 200, 0 );
//controls
orbit = new THREE.OrbitControls( camera, renderer.domElement );
orbit.update();
orbit.addEventListener( 'change', render );
control = new THREE.TransformControls( camera, renderer.domElement );
control.showY = false;
control.addEventListener( 'change', render );
control.addEventListener( 'dragging-changed', function ( event ) {
orbit.enabled = ! event.value;
} );
Try setting the position of the camera via the THREE.Vector3 method.
camera.lookAt(new THREE.Vector3(0,0,0));
Refrence
I'm Working with Threejs in which I'm Facing Problems with Textures, so I would like to ask A question that is, how to load the textures without starting the animation, it shows blank image without starting the animation. Can anyone tell me how to do that..
var geometry = new THREE.PlaneGeometry( 15, 5.3, 2 );
var te = new THREE.ImageUtils.loadTexture("b4.jpg") ;
var material = new THREE.MeshBasicMaterial( {color: "",map:te} );
plane = new THREE.Mesh( geometry, material);
plane.position.set(-12.89,-7.2,19);
plane.visible=false;
scene.add( plane );
Did you try having a callback function to trigger after the texture is successfully loaded? Like how it is done in the documentation: TextureLoader
So something like:
var geometry = new THREE.PlaneGeometry( 15, 5.3, 2 );
var loader = new THREE.TextureLoader();
// load a resource
loader.load(
// resource URL
'b4.jpg',
// Function when resource is loaded
function ( texture ) {
// do something with the texture
var material = new THREE.MeshBasicMaterial( {color: "",map:te} );
plane = new THREE.Mesh( geometry, material);
plane.position.set(-12.89,-7.2,19);
plane.visible=false;
scene.add( plane );
},
// Function called when download errors
function ( xhr ) {
console.log( 'An error happened' );
}
);
I have this code, it works perfectly:
mesh = new THREE.Mesh( new THREE.SphereGeometry( 500, 60, 40 ), new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/texture01.jpg' ) } ) );
mesh.scale.x = -1;
scene.add( mesh );
But when the material change to MeshLambertMaterial, the object is not displayed and no shows errors.
I need it for this type of material to play with the opacity ..
Thanks!!
I don't understand why the lighting does not work in my code. I downloaded a simple OBJ. file to test the OBJLoader but the model isn't affected. Before I edited the lighting more, at least the Ambient Lighting would work. Maybe the OBJ. model needs a texture?
var container, stats;
var camera, scene, renderer, controls;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 2.5;
scene.add( camera );
controls = new THREE.TrackballControls( camera );
controls.rotateSpeed = 2.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.0;
controls.noZoom = false;
controls.noPan = true;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;
controls.keys = [ 65, 83, 68 ];
controls.addEventListener( 'change', render );
var ambient = new THREE.AmbientLight( 0x020202 );
scene.add( ambient );
directionalLight = new THREE.DirectionalLight( 0xffffff );
directionalLight.position.set( 1, 1, 0.5 ).normalize();
scene.add( directionalLight );
pointLight = new THREE.PointLight( 0xffaa00 );
pointLight.position.set( 0, 0, 0 );
scene.add( pointLight );
sphere = new THREE.SphereGeometry( 100, 16, 8 );
lightMesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) );
lightMesh.scale.set( 0.05, 0.05, 0.05 );
lightMesh.position = pointLight.position;
scene.add( lightMesh );
var loader = new THREE.OBJLoader();
loader.load( "originalMeanModel.obj", function ( object ) {
scene.add( object );
} );
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
}
function animate() {
requestAnimationFrame( animate );
controls.update();
}
function render() {
camera.lookAt( scene.position );
renderer.render( scene, camera );
}
MeshBasicMaterial in THREE.js is like a toon shader (good for silouhette, shadow drawing or wireframe) and and is not affected by lights.
Try MeshLambertMaterial or MeshPhongMaterial
I had similar problems when using the Three.js exporter for Blender, everything appeared dark even with diffuse colors set in the original blender model and an ambient light added to the scene in the Three.js code. It turns out the fix was to edit part of the converted model file, there was a line to the effect of:
"colorAmbient" : [0, 0, 0]
which I manually changed to
"colorAmbient" : [0.75, 0.75, 0.75]
everywhere it appeared, and that fixed the problem. I bring this up because my best guess is that you are experiencing a problem similar to this. Without seeing the *.obj file it is difficult to diagnose the problem exactly, but perhaps in your model settings you could try changing the ambient color value rather than, say, the diffuse color value, which is what we normally think of when assigning color to a model.
Maybe this will help you if you are experiencing the same problem like me a few days ago, if you have no normals in your obj that's definitely somewhere to look at.
You can try to start with a MeshBasicMaterial as well just to check the vertices/ faces are ok: new THREE.MeshBasicMaterial({ color: 0x999999, wireframe: true, transparent: true, opacity: 0.85 } )
Also, as mr doob said, please consider sharing the obj you're loading.