Normal
var material = new THREE.MeshNormalMaterial();
Basic
The basic material is not effected by light or shadows.
var material = new THREE.MeshBasicMaterial({color: 0xff0000});
Lambert
This is a simple material wich is effected by light. A light source is required, such as point light or directional light.
var material = new THREE.MeshLambertMaterial({color: 0xffffff});
Phong
This material provides shininess.
var material = new THREE.MeshPhongMaterial({
// light
specular: '#ffffff',
// intermediate
color: '#aaaaaa',
// dark
emissive: '#333333',
shininess: 100
});
Texture
Keep in mind that texteres can look wierd on shaped objects like spheres. You have to make a "spherical projection" to change the image. It seems you have to host all images on your server.
var texture = THREE.ImageUtils.loadTexture( 'texture.jpg' );
var material = new THREE.MeshLambertMaterial( { map: texture } );
Code
Here is the code of the examples.
<html>
<html>
<head>
<script src="three/build/three.min.js"></script>
<script src="three/examples/js/controls/OrbitControls.js"></script>
<script src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function() {
//scene
var scene = new THREE.Scene();
//camera
var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set(0,-12,5);
camera.lookAt(new THREE.Vector3( 0, 5, 0 ));
//renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
//controls
var controls = new THREE.OrbitControls( camera, renderer.domElement );
//show canvas
$("#canvas-container").html(renderer.domElement);
//material for all geometries
var material = new THREE.MeshNormalMaterial();
//plane
var geometry = new THREE.PlaneGeometry(10, 10);
var plane = new THREE.Mesh( geometry, material );
scene.add(plane);
//cube
var geometry = new THREE.CubeGeometry(1,1,1);
var cube = new THREE.Mesh( geometry, material );
cube.position.set(-3,0,0.5);
scene.add( cube );
//cylinder
var geometry = new THREE.CylinderGeometry(1, 0.5, 2, 50, 50, false);
var cylinder = new THREE.Mesh( geometry, material );
cylinder.position.set(3,0,1);
cylinder.rotation.x = -Math.PI / 2;
scene.add( cylinder );
//sphere
var geometry = new THREE.SphereGeometry(1, 100, 100);
var sphere = new THREE.Mesh( geometry, material );
sphere.position.set(0,0,1);
scene.add( sphere );
//render scene
var render = function () {
requestAnimationFrame(render);
renderer.render(scene, camera);
};
render();
});
</script>
</head>
<body style="background: black">
<div id="canvas-container" style="position: absolute; left:0px; top:0px"></div>
</body>
</html>
It is a very profitable post for me. Private tutor in Florida I've enjoyed reading the post. It is very informative and useful post. I would like to visit the post once more its valuable content.
AntwortenLöschennice article about three.js MeshMatCapMaterial
AntwortenLöschen