valex · September 25, 2018 14:11
diff --git a/index.html b/index.html
 <!DOCTYPE html>

 <html>

 <head>
    <title>Example 10.06 - Specular map</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/96/three.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.2/dat.gui.min.js"></script>

    <script type="text/javascript" src="../utils/SceneUtils.js"></script>
    <script type="text/javascript" src="../libs96/OrbitControls.js"></script>
    <style>
        body {
            /* set margin to 0 and overflow to hidden, to go fullscreen */
            margin: 0;
            overflow: hidden;
        }
    </style>
 </head>
 <body>

 <div id="Stats-output">
 </div>
 <!-- Div which will hold the Output -->
 <div id="WebGL-output">
 </div>

 <!-- Javascript code that runs our Three.js examples -->
 <script type="text/javascript">

    // once everything is loaded, we run our Three.js stuff.
    function init() {

        var stats = initStats();

        // create a scene, that will hold all our elements such as objects, cameras and lights.
        var scene = new THREE.Scene();

        // create a camera, which defines where we're looking at.
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

        // create a render and set the size
        var webGLRenderer = new THREE.WebGLRenderer();
        webGLRenderer.setClearColor(new THREE.Color(0x000000));
        webGLRenderer.setSize(window.innerWidth, window.innerHeight);
        webGLRenderer.shadowMap.enabled = true;
        webGLRenderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap

        var sphere = createMesh(new THREE.SphereGeometry(10, 40, 40));
        // add the sphere to the scene
        scene.add(sphere);

        // position and point the camera to the center of the scene
        camera.position.x = 15;
        camera.position.y = 15;
        camera.position.z = 15;

        camera.lookAt(new THREE.Vector3(0, 0, 0));

        var orbitControls = new THREE.OrbitControls(camera);
        orbitControls.autoRotate = false;
        var clock = new THREE.Clock();

        var ambi = new THREE.AmbientLight(0x3300000);
        scene.add(ambi);

        var spotLight = new THREE.DirectionalLight(0xffffff);
        spotLight.position.set(350, 350, 150);
        spotLight.intensity = 0.5;


        scene.add(spotLight);

        // add the output of the renderer to the html element
        document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);

        // call the render function
        var step = 0;


        render();

        function createMesh(geom) {
            var planetTexture = new THREE.TextureLoader().load("../assets96/textures/planets/Earth.png");
            var specularTexture = new THREE.TextureLoader().load("../assets96/textures/planets/EarthSpec.png");
            var normalTexture = new THREE.TextureLoader().load("../assets96/textures/planets/EarthNormal.png");


            var planetMaterial = new THREE.MeshPhongMaterial();
            planetMaterial.specularMap = specularTexture;
            planetMaterial.specular = new THREE.Color(0x0000ff);
            planetMaterial.shininess = 2;

            planetMaterial.normalMap = normalTexture;
 //            planetMaterial.map = planetTexture;
            //   planetMaterial.shininess = 150;


            // create a multimaterial
            var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [planetMaterial]);

            return mesh;
        }

        function render() {
            stats.update();

            //sphere.rotation.y=step+=0.01;
            var delta = clock.getDelta();
            orbitControls.update(delta);

            sphere.rotation.y += 0.005;

            // render using requestAnimationFrame
            requestAnimationFrame(render);
            webGLRenderer.render(scene, camera);
        }

        function initStats() {

            var stats = new Stats();
            stats.setMode(0); // 0: fps, 1: ms

            // Align top-left
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.left = '0px';
            stats.domElement.style.top = '0px';

            document.getElementById("Stats-output").appendChild(stats.domElement);

            return stats;
        }
    }
    window.onload = init;
 </script>
 </body>
 </html>
	<!DOCTYPE html>

	<html>

	<head>
	<title>Example 10.06 - Specular map</title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/96/three.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.2/dat.gui.min.js"></script>

	<script type="text/javascript" src="../utils/SceneUtils.js"></script>
	<script type="text/javascript" src="../libs96/OrbitControls.js"></script>
	<style>
	body {
	/* set margin to 0 and overflow to hidden, to go fullscreen */
	margin: 0;
	overflow: hidden;
	}
	</style>
	</head>
	<body>

	<div id="Stats-output">
	</div>
	<!-- Div which will hold the Output -->
	<div id="WebGL-output">
	</div>

	<!-- Javascript code that runs our Three.js examples -->
	<script type="text/javascript">

	// once everything is loaded, we run our Three.js stuff.
	function init() {

	var stats = initStats();

	// create a scene, that will hold all our elements such as objects, cameras and lights.
	var scene = new THREE.Scene();

	// create a camera, which defines where we're looking at.
	var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

	// create a render and set the size
	var webGLRenderer = new THREE.WebGLRenderer();
	webGLRenderer.setClearColor(new THREE.Color(0x000000));
	webGLRenderer.setSize(window.innerWidth, window.innerHeight);
	webGLRenderer.shadowMap.enabled = true;
	webGLRenderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap

	var sphere = createMesh(new THREE.SphereGeometry(10, 40, 40));
	// add the sphere to the scene
	scene.add(sphere);

	// position and point the camera to the center of the scene
	camera.position.x = 15;
	camera.position.y = 15;
	camera.position.z = 15;

	camera.lookAt(new THREE.Vector3(0, 0, 0));

	var orbitControls = new THREE.OrbitControls(camera);
	orbitControls.autoRotate = false;
	var clock = new THREE.Clock();

	var ambi = new THREE.AmbientLight(0x3300000);
	scene.add(ambi);

	var spotLight = new THREE.DirectionalLight(0xffffff);
	spotLight.position.set(350, 350, 150);
	spotLight.intensity = 0.5;


	scene.add(spotLight);

	// add the output of the renderer to the html element
	document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);

	// call the render function
	var step = 0;


	render();

	function createMesh(geom) {
	var planetTexture = new THREE.TextureLoader().load("../assets96/textures/planets/Earth.png");
	var specularTexture = new THREE.TextureLoader().load("../assets96/textures/planets/EarthSpec.png");
	var normalTexture = new THREE.TextureLoader().load("../assets96/textures/planets/EarthNormal.png");


	var planetMaterial = new THREE.MeshPhongMaterial();
	planetMaterial.specularMap = specularTexture;
	planetMaterial.specular = new THREE.Color(0x0000ff);
	planetMaterial.shininess = 2;

	planetMaterial.normalMap = normalTexture;
	// planetMaterial.map = planetTexture;
	// planetMaterial.shininess = 150;


	// create a multimaterial
	var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [planetMaterial]);

	return mesh;
	}

	function render() {
	stats.update();

	//sphere.rotation.y=step+=0.01;
	var delta = clock.getDelta();
	orbitControls.update(delta);

	sphere.rotation.y += 0.005;

	// render using requestAnimationFrame
	requestAnimationFrame(render);
	webGLRenderer.render(scene, camera);
	}

	function initStats() {

	var stats = new Stats();
	stats.setMode(0); // 0: fps, 1: ms

	// Align top-left
	stats.domElement.style.position = 'absolute';
	stats.domElement.style.left = '0px';
	stats.domElement.style.top = '0px';

	document.getElementById("Stats-output").appendChild(stats.domElement);

	return stats;
	}
	}
	window.onload = init;
	</script>
	</body>
	</html>