Three.js Make static cube

Three.js Make static cube - javascript

I'm newbie in Three.js, so, I'm trying just to make STATIC cube. So, I've found a rotating cube example. Here it is:
var camera, scene, renderer;
var mesh;
init();
animate();
//renderer.render( scene, camera );
function init() {
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 400;
scene = new THREE.Scene();
var texture = THREE.ImageUtils.loadTexture( '16.jpg' );
var geometry = new THREE.BoxGeometry( 200, 200, 200 );
var material = new THREE.MeshBasicMaterial( { map: texture } );
var axes = new THREE.AxisHelper( 20 );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
}
function animate() {
requestAnimationFrame( animate );
mesh.rotation.x += 0.005;
mesh.rotation.y += 0.01;
renderer.render( scene, camera );
}
ok, everything work fine. Now I want to make just STATIC cube, I've wrote
var camera, scene, renderer;
var mesh;
init();
renderer.render( scene, camera );
function init() {
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 400;
scene = new THREE.Scene();
var texture = THREE.ImageUtils.loadTexture( '16.jpg' );
var geometry = new THREE.BoxGeometry( 200, 200, 200 );
var material = new THREE.MeshBasicMaterial( { map: texture } );
var axes = new THREE.AxisHelper( 20 );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
}
The output is just a black screen, what have I done wrong?

The texture loading is asynchronous, and you are rendering the scene before it is done.
Add a callback to the Image Loader and render again:
var texture = THREE.ImageUtils.loadTexture('16.jpg', undefined, function () {
renderer.render(scene, camera);
});
Alternatively render continuosly with requestAnimationFrame:
init();
animate();
//...
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}

it looks like when you got rid of animate(), you also got rid of the call to
renderer.render( scene, camera );
so you need to put that back in the code somewhere to render your scene

Related

Multple Cubes with different materials in three.js

I'm teaching myself three.js and am playing around with different materials on cubes. I'm trying to add 3 cubes to a scene, each with a different material, to compare differences side by side.
The issue is that only cube1 currently renders. The other cubes do not appear in the browser. Any help in fixing the issue would be greatly appreciated.
<body>
<script src="../three.js-master/build/three.min.js"></script>
<script src="../three.js-master/examples/js/controls/OrbitControls.js"></script>
<script>
var camera, scene, renderer;
var controls
var cube1, cube2, cube3;
init();
animate();
function init() {
//Renderer
renderer = new THREE.WebGLRenderer( {antialias: true} );
var width = window.innerWidth;
var height = window.innerHeight;
renderer.setSize( width, height );
document.body.appendChild( renderer.domElement );
scene = new THREE.Scene();
//Create Cubes
//Normal
var cube1Geometry = new THREE.BoxGeometry( 2,1,1 );
var cube1Material = new THREE.MeshNormalMaterial();
cube1 = new THREE.Mesh( cube1Geometry, cube1Material );
cube1.position.set( 0,0,0 );
scene.add( cube1 );
//Lambert
var cube2Geometry = new THREE.BoxGeometry( 1,2,1 );
var cube2Material = new THREE.MeshLambertMaterial( {color: 0xff0000, transparent: true, opacity: 05} );
cube2 = new THREE.Mesh( cube2Geometry, cube2Material );
cube2.position.set( -10,0,0 );
scene.add( cube2 );
//Phong
var cube3Geometry = new THREE.BoxGeometry( 1,1,2 );
var cube3Material = new THREE.MeshPhongMaterial( {shininess: 1} );
cube3 = new THREE.Mesh( cube3Geometry, cube3Material );
cube3.position.set( 10,0,0 );
scene.add( cube3 );
//Create Camera
camera = new THREE.PerspectiveCamera (45, width/height, 1, 1000);
camera.position.y = 30;
camera.position.z = 30;
camera.lookAt( new THREE.Vector3( 0,0,0 ) );
controls = new THREE.OrbitControls( camera, renderer.domElement );
}
function animate() {
controls.update();
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
</script>
</body>

Continued digging into the issue brought to light (pun intended) that lambert and phong materials require a light source. They were both being rendered, but were not visible due to lack of light.
Added:
//Light Source
var light = new THREE.PointLight( 0xff0000, 1, 100 );
light.position.set( 20,20, 20 );
scene.add( light );
And they now appear in the browser.

Multiple STL files on single web page using threeJS

Here I have one STL file that I am displaying with threeJS. I don't know how to render multiple STL Files in single web page.
Here's my code:
var container, camera, scene, renderer;
init();
animate();
function init() {
container = document.getElementById('pratik');
document.body.appendChild( container );
// renderer
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
// scene
scene = new THREE.Scene();
// camera
camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set( 3, 0.5, 3 );
scene.add( camera ); // required, because we are adding a light as a child of the camera
// Controls
controls = new THREE.OrbitControls( camera, renderer.domElement );
// lights
scene.add( new THREE.AmbientLight( 0x222222 ) );
var light = new THREE.PointLight( 0xffffff, 0.8 );
camera.add( light );
// object
var loader = new THREE.STLLoader();
loader.load( 'files/wolf.stl', function ( geometry ) {
var material = new THREE.MeshPhongMaterial( { color: 0xff5533 } );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
} );
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
var timer = Date.now() * 0.0005;
camera.position.x = Math.cos( timer ) * 15;
camera.position.z = Math.sin( timer ) * 15;
camera.lookAt( scene.position );
renderer.render( scene, camera );
}
<div id="pratik"></div>
Now what if I need to include another file named 'mk6.stl', How will I do it?
Does anyone knows how to do it?
I have tried SketchFan, but its not made for me.
Thank you.

You already have the code to load a single STL file and insert it into your scene. The next step to load multiple files is straightforward, you would simply reuse your STLLoader instance. Basically you could do something like:
var loader = new THREE.STLLoader();
loader.load( 'FIRSTFILE.stl', function ( geometry ) {
var material = new THREE.MeshPhongMaterial( { color: 0xff5533 } );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
} );
loader.load( 'SECONDFILE.stl', function ( geometry ) {
var material = new THREE.MeshPhongMaterial( { color: 0xff5533 } );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
} );
You could also use the loaders load() method in a loop if you have an array of URLs to load your STL-files from.

How to create multiple geometries in three.js?

Hi I currently working with three.js, I would like to create 4 cubes in the 4 parts of the axis. I am able to create one cube that is rotating but how do I create the other three?, I have tried the clone () function and position.set, but I cant seem to create another cube in a different axis. thanks for any help or guidance
Here is my javascript
var camera;
var scene;
var renderer;
var mesh;
init();
animate();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000);
var light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 1, 1 ).normalize();
scene.add(light);
var geometry = new THREE.CubeGeometry( 10, 10, 10);
var material = new THREE.MeshPhongMaterial( { ambient: 0x050505, color: 0x0033ff, specular: 0x555555, shininess: 30 } );
mesh = new THREE.Mesh(geometry, material );
mesh.position.z = -50;
scene.add( mesh );
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
render();
}
function animate() {
mesh.rotation.x += .04;
mesh.rotation.y += .02;
render();
requestAnimationFrame( animate );
}
function render() {
renderer.render( scene, camera );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
render();
}

Have you added the clone to the scene?
var newMesh = mesh.clone();
newMesh.position.x = 50;
scene.add(newMesh);
You can see a working codepen here.

How to enable shading in Three.js

How do you enable shading in Three.js?
Various examples have shown it should be as simple as assigning THREE.FlatShading to your material, but when I do this, my shape has no shading at all.
My JS:
CANVAS_WIDTH = 200,
CANVAS_HEIGHT = 200;
var camera, scene, renderer;
var mesh;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 70, CANVAS_WIDTH / CANVAS_HEIGHT, 1, 1000 );
camera.position.z = 400;
scene = new THREE.Scene();
var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
var material = new THREE.MeshBasicMaterial( {color: 0xff0000} );
material.shading = THREE.FlatShading;
for(var i=0; i<material.length; i++){
material[i].shading = THREE.FlatShading;
}
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
// light
//scene.add( new THREE.AmbientLight( 0x404040 ) );
light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 400, 400, 400 );
scene.add( light );
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( CANVAS_WIDTH, CANVAS_HEIGHT );
container = document.getElementById( 'accelgyro_canvas' );
container.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
console.log('animate')
requestAnimationFrame( animate );
mesh.rotation.x += 0.005;
mesh.rotation.y += 0.01;
renderer.render( scene, camera );
}
And this renders by cube as:
I've tried adjusting the light angles, adding/removing ambient light, changing which object I add the FlatShading to and nothing seems to help.
How do I fix this?

MeshBasicMaterial does not respond to lights. Use MeshLambertMaterial, MeshPhongMaterial, or MeshStandardMaterial.
Also, MeshLambertMaterial does not have a shading property. If you want FlatShading, you need to use MeshPhongMaterial, or MeshStandardMaterial.
three.js r.75

Are your looking for result like this.
Attaching the reference code for same
var camera, scene, renderer;
var mesh;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 400;
scene = new THREE.Scene();
scene.add(new THREE.HemisphereLight(0xffffff,0xffffff,1.0))
var geometry = new THREE.BoxGeometry( 200, 200, 200 );
for ( var i = 0; i < geometry.faces.length; i++ )
{
geometry.faces[ i ].color.setRGB( 1.0 * Math.random()+0.2 , 0, 0 );
}
var material = new THREE.MeshBasicMaterial( { color:0xff0000,vertexColors: THREE.FaceColors } );
mesh = new THREE.Mesh( geometry, material );
//mesh.drawMode =THREE.TriangleStripDrawMode;
scene.add( mesh );
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
mesh.rotation.x += 0.005;
mesh.rotation.y += 0.01;
renderer.render( scene, camera );
}

How do you animate or move specific points on a plane in three.js?

I have a texture mapped to a plane. Suppose I only want to move particular points in the plane. How would I go about doing so?
For example, I want to move the bottom right corner at a particular speed and the top right corner at a particular speed.
var camera;
var scene;
var renderer;
var mesh;
init();
animate();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000);
var light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 1, 1 ).normalize();
scene.add(light);
var geometry = new THREE.PlaneGeometry( 50, 50);
var texture = THREE.ImageUtils.loadTexture('images/03032122.png', {}, function() {
renderer.render(scene, camera);
})
var material = new THREE.MeshBasicMaterial({map: texture, transparent: true })
mesh = new THREE.Mesh(geometry, material );
mesh.position.z = -50;
scene.add( mesh );
renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0xffffff, 1);
document.body.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
render();
}
function animate() {
//mesh.scale.x+= 0.0003;
render();
requestAnimationFrame( animate );
}
function render() {
renderer.render( scene, camera );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
render();
}

You can modify the geometry after the mesh creation by accessing its vertices array. If you want the vertex of rank 1 to move linearly in the +x direction, you can add in your render function :
mesh.geometry.vertices[1].x+=.01;
mesh.geometry.verticesNeedUpdate=true;
Beware to use PlaneBufferGeometry instead of PlaneGeometry.

Develop Reference

JavaScript is the programming language of the Web.

Three.js Make static cube - javascript

it looks like when you got rid of animate(), you also got rid of the call to renderer.render( scene, camera ); so you need to put that back in the code somewhere to render your scene

Related

Multple Cubes with different materials in three.js

Multiple STL files on single web page using threeJS

How to create multiple geometries in three.js?

How to enable shading in Three.js

How do you animate or move specific points on a plane in three.js?

Categories

Resources