I'm trying to make a very simple 3D Model viewer using the three.js library. My only goal is to have the camera controls pivot point be the center of the object, and center the object on the canvas to start.
There are quite a few similar discussions on here, and I have tried the suggestions, as well as various examples from the Three.js site, but can't figure out what I am doing wrong. It's not that far off, but it seems to center on 0,0,0 in world space.
I read the Orbit Controls override the camera, so I messed around with controls.target.set but it said the mesh variable was undefined, despite being declared in global.
How can I just center the model in the canvas viewport and make the center of it the point of rotation?
<div class="container">
<canvas id="artifactCanvas"></canvas>
</div>
<script src="{{ asset('/js/three.min.js') }}"></script>
<script src="{{ asset('/js/OrbitControls.js') }}"></script>
<script src="{{ asset('/js/STLLoader.js') }}"></script>
<script>
var scene, renderer, camera, mesh;
var material = new THREE.MeshPhongMaterial( { color: 0xffaf00, specular: 0x111111, shininess: 200 } );
init();
animate();
function init() {
// scene
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xc5e5fc );
// renderer
renderer = new THREE.WebGLRenderer( { canvas: artifactCanvas, antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize(600, 400);
// lights
var light = new THREE.DirectionalLight( 0xffffff, 2 );
light.position.set( 1, 1, 1 );
scene.add( light );
// camera
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set( 100, 0, 0 );
// Geometry
var loader = new THREE.STLLoader();
loader.load("{{ asset('/stls/test.stl') }}", function ( geometry ) {
mesh = new THREE.Mesh( geometry, material );
mesh.position.set( 0, 0, 0);
mesh.rotation.set( - Math.PI / 2, 0, 0 );
mesh.scale.set( 1, 1, 1 );
scene.add( mesh );
});
// controls
controls = new THREE.OrbitControls( camera, renderer.domElement );
// Cannot read property 'center' of undefined
//controls.target.set( mesh.center() );
}
function animate() {
renderer.render( scene, camera );
requestAnimationFrame( animate );
}
</script>
Related
<div style="margin-bottom: 200px">
sdsadasdas
</div>
<div id="container"></div>
<div id="info"> </div>
I have an image using three.js which I need to change dynamically by others when I click on a button
<!-- <script src="three.min.js"></script> -->
<script>
var camera, scene, renderer;
var texture_placeholder,
isUserInteracting = false,
onMouseDownMouseX = 0, onMouseDownMouseY = 0,
lon = 0, onMouseDownLon = 0,
lat = 0, onMouseDownLat = 0,
phi = 0, theta = 0;
var imagen='HabitacionPrincipal'
init(imagen);
function cambio(){
//What would I need to place here to be able to make the change dynamically?
}
function init(imagen) {
var container, mesh;
container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );
camera.target = new THREE.Vector3( 0, 0, 0 );
scene = new THREE.Scene();
var geometry = new THREE.SphereGeometry( 500, 60, 40 );
geometry.applyMatrix( new THREE.Matrix4().makeScale( -1, 1, 1 ) );
console.log(imagen)
var material = new THREE.MeshBasicMaterial( {
map: THREE.ImageUtils.loadTexture( imagen+'.jpg' )
} );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
animate();
}
</script>
I need to change the image by a previously selected one
I tried this post but not sucessc
Threejs Change image at runtime
You need to make the variable globally accessible, instead of limiting its scope to the init() function.
Think of it as a Venn diagram, you have to place material outside init() and cambio() so that it's available to both. You can do this by declaring it on line 1:
var camera, scene, renderer, material;
Then, you can initialize material inside init() without using var:
function init(imagen) {
// ...
material = new THREE.MeshBasicMaterial( {
map: THREE.ImageUtils.loadTexture( imagen+'.jpg' )
} );
// ...
}
Once you're ready to call cambio(), the material will be globally available, so you can access it and change its map:
function cambio(){
material.map = THREE.ImageUtils.loadTexture( 'secondImage.jpg' );
}
I am working on 3D Modelling using Thrre.js , and have to display neat and clean product after reading a .DAE file but my product display is not well clean and good . Can anybody please help me , i have also given the light sources but still product shown are very dull .Actual product to be shown
My product image render screen shot , no leather is shown in product and also very dull
I am trying following Code :
<script>
var renderer, scene, camera, controls, light;
var geometry, material, mesh;
init();
animate();
function init() {
document.body.style.cssText = 'margin: 0; overflow: hidden' ;
renderer = new THREE.WebGLRenderer( { alpha: 1, antialias: true, clearColor: 0xffffff } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 50000 );
camera.position.set( 100, 100, 100 );
//camera.position.set(-15, 10, 15);
controls = new THREE.TrackballControls( camera, renderer.domElement );
scene.add(camera);
light = new THREE.AmbientLight(0xffffff, 10);
light.position.set(100,100, 100).normalize();
scene.add(light);
light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(10, 10, 10).normalize();
scene.add(light);
var pointlight = new THREE.PointLight(0xffffff, 1, 0);
pointlight.position.set(50, 100, 50)
camera.add(pointlight);
scene.add(pointlight);
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(10,10,10);
scene.add(spotLight);
var pointHelper = new THREE.PointLightHelper(pointlight, 0.1);
scene.add(pointHelper);
this.renderer.render(this.scene, this.camera);
geometry = new THREE.BoxGeometry( 10, 10, 10 );
material = new THREE.MeshLambertMaterial( { ambient: 0x333333, color: 0x888888, opacity: 0.000001, transparent: true } );
// material = new THREE.MeshLambertMaterial({ color: 0xffffff, vertexColors: THREE.FaceColors });
mesh = new THREE.Mesh( geometry, material );
mesh.name = 'basic template mesh';
mesh.visible = false;
scene.add( mesh );
}
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
controls.update();
}``
Through this code , i got the very dull product.
Can Anyone Please help me to sort out this problem ?
You are using the wrong material. The MeshLambertMaterial is used for diffuse surfaces, those that do not have specular highlights (paper, raw wood, cloth). You need to use the MeshPhongMaterial which allows the specular highlights (white spots) in the chair.
In your model, you have two types of surface: leather and wood. Even though both of them have specular highlights, their shininess are different. You will have to define separate materials for both surfaces. But, since I see you have a single object, this can be difficult. You can define a single MeshPhongMaterial for both surfaces, but you will have to try several values in the parameters to get the desired effect.
I am really new to computer graphics, and I started experimenting with some things with THREE.js. So I wanted to an animation of a flag (wave motions) and I couldn't find anything (maybe I don't know what to search). So I made my flag with a parametric geometry, and the function is just a cos. And I wan't to animate the flag by dynamically changing the function of the parametric geometry. How can I do that, and is this the correct way of doing this?
P.S. The change in the function that I want is simply moving the cos along the X asis so it looks like the flag is moving.
In dependency on amount of vertices in your mesh, you can use shaders or simple changing of vertices in your animation loop with cos function.
Below, there's the approach with simple changing.
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 0, 2, 10 );
var renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var controls = new THREE.OrbitControls( camera, renderer.domElement );
scene.add( new THREE.GridHelper( 10, 10 ) );
var planeGeom = new THREE.PlaneGeometry( 10, 3, 20, 3 );
var plane = new THREE.Mesh( planeGeom, new THREE.MeshBasicMaterial( { color: "red", side: THREE.DoubleSide } ) );
scene.add( plane );
render();
function render(){
requestAnimationFrame( render );
planeGeom.vertices.forEach( v => {
v.z = Math.cos( .5 * v.x - Date.now() * .001 ) * .5;
});
planeGeom.verticesNeedUpdate = true; // the most important thing, when you change vertices
renderer.render( scene, camera );
}
body{
overflow: hidden;
margin: 0;
}
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
I'm trying to apply a bump map to a plane to create a vaguely felt-like surface using Three.js r55.
Here's my code:
var mapHeight = THREE.ImageUtils.loadTexture("images/felt.png");
mapHeight.repeat.set(2, 2);
mapHeight.wrapS = mapHeight.wrapT = THREE.RepeatWrapping;
mapHeight.format = THREE.RGBFormat;
var groundMaterial = new THREE.MeshPhongMaterial({
ambient: 0x008800, color: 0x008800, specular: 0x888888,
shininess: 25, bumpMap: mapHeight, bumpScale: 10, metal: false
} );
scene.add(new THREE.Mesh(new THREE.PlaneGeometry(0.3, 0.3), groundMaterial));
Notice how I set the texture to repeat twice along x/y axes. However what I'm seeing only applies the texture in one quadrant:
I would expect this with clamp/repeat wrapping (or whatever it's called) but I've requested RepeatWrapping here.
How can I have the bump map correctly repeat an arbitrary number of times on the plane.
EDIT - Full Code
I set about making a simple reproduction case. This is pretty minimal and reproduces the image below (from a slightly different camera angle.) The output has the identical problem.
<!DOCTYPE html>
<html>
<head>
<script src="scripts/libs/three.min.js" type="text/javascript"></script>
</head>
<body>
<div id="scene-container"></div>
<script>
init();
function init() {
var camera, scene, renderer;
scene = new THREE.Scene();
scene.add( new THREE.AmbientLight( 0x555555 ) );
var light = new THREE.DirectionalLight( 0x555555 );
light.position.set( 0, 0, 10 );
scene.add( light );
var bumpMapTexture = THREE.ImageUtils.loadTexture( "images/felt.png", undefined, function () {
requestAnimationFrame( function () {
// render once texture has loaded
renderer.render( scene, camera );
} );
} );
bumpMapTexture.repeat.set( 2, 2 );
bumpMapTexture.wrapS = bumpMapTexture.wrapT = THREE.RepeatWrapping;
var groundMaterial = new THREE.MeshPhongMaterial( {
ambient: 0x00AA00,
color: 0x00AA00,
bumpMap: bumpMapTexture
} );
scene.add( new THREE.Mesh( new THREE.PlaneGeometry( 3, 3 ), groundMaterial ) );
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.01, 100000 );
camera.position.set( 0, 0, 3 );
camera.lookAt( new THREE.Vector3( 0, 0, 0 ) );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );// renderer.render(scene, camera);
document.getElementById( 'scene-container' ).appendChild( renderer.domElement );
}
</script>
</body>
</html>
This links to Three.js r55 (minified).
Any help appreciated.
If you want a texture to repeat, it's size in pixels in each dimension must be a power of two ( e.g., 512 x 256 ).
If you have a diffuse map and a bumpMap, they must have the same offset/repeat settings. See for example this answer.
three.js r.55
I am trying to create a mesh from an .obj file. I am doing this rather than using the obj loader because I meed to morph the shape using different sliders, select specific faces/vertices and draw a path between vertices.
I am currently getting errors when I try to render the scene and it seems to be something to do with the faces from the obj file. When I manually enter the faces I can create a triangle no problem.
Here is my code
var camera, scene, renderer,
geometry, material, mesh;
init();
animate();
function init() {
var xhr = new XMLHttpRequest();
xhr.open('GET', '/img/originalMeanModel.obj', false);
xhr.send(null);
var text = xhr.responseText;
var lines = text.split("\n");
for (i=0; i<19343; i++){
lines[i] = lines[i].split(" ");
}
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 1, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 20;
scene.add( camera );
var geometry = new THREE.Geometry()
/*
geometry.vertices.push( new THREE.Vector3( -0.01, 0.01, 0 ) );
geometry.vertices.push( new THREE.Vector3( -0.01, -0.01, 0 ) );
geometry.vertices.push( new THREE.Vector3( 0.01, -0.01, 0 ) );
*/
geometry.faces.push( new THREE.Face3( 0, 1, 2 ) );
for(i=0; i<6449; i++){
geometry.vertices.push(
new THREE.Vector3(
parseFloat(lines[i][1]),
parseFloat(lines[i][2]),
parseFloat(lines[i][3])) );
}
/*
geometry.faces.push( new THREE.Face3( 0, 1, 2 ) );
geometry.faces.push( new THREE.Face3( 600, 1, 3000 ) );
geometry.faces.push( new THREE.Face3( 3000, 6400, 70 ) );
*/
for(i=6449; i<19343; i++){
geometry.faces.push( new THREE.Face3( parseInt(lines[i][1]), parseInt(lines[i][2]), parseInt(lines[i][3]) ) );
}
console.log(geometry.faces);
console.log(geometry.vertices);
material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: false } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
}
function animate() {
// note: three.js includes requestAnimationFrame shim
requestAnimationFrame( animate );
render();
}
function render() {
renderer.render( scene, camera );
}
When I inspect the console the faces and vertices have been printed out as expected. I also have this error printed out 5700+ times
Uncaught TypeError: Cannot read property 'visible' of undefined Three.js:71
projectScene Three.js:71
render Three.js:245
render threeDemo.php:115
animate threeDemo.php:106
threeDemo.php:106 is this line of the animate function
render();
threeDemo.php:115 is this line of the render function
renderer.render( scene, camera );
Here is a link the the obj file that I am trying to create a mesh for. https://dl.dropbox.com/u/23384412/originalMeanModel.obj
Is anyone could point me in the right direction it would be really appreciated.
Thanks in advance.
You can use two OBJLoaders for loading each frame geometry. Then create a third Geometry and create the lines using as reference the vertices from the frame geometries.