球にいろいろなマテリアルを適用する
See the Pen materials for sphere by aadebdeb (@aadebdeb) on CodePen.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>[2017/03/23]materials for sphere</title> <style> body { margin: 0; overflow: hidden; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.3/dat.gui.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script> <script> window.onload = function() { init(); render(); }; window.onresize = onResize; var camera, scene, renderer; var stats; var controller; var sphere; var spotLight, spotLightHelper; function init() { mouseX = 0; mouseY = 0; initGui(); initStats(); initScene(); initCamera(); initRenderer(); } function initStats() { stats = new Stats(); stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; document.body.appendChild(stats.domElement); } function initGui() { controller = new function() { this.lightAngleSpeed = 0.01; this.isLightHelperVisible = true; this.showsShadow = false; this.material = 'basic'; }; gui = new dat.GUI(); gui.add(controller, 'lightAngleSpeed', 0, 0.05); gui.add(controller, 'isLightHelperVisible').onChange(function(e) { spotLightHelper.visible = e; }); gui.add(controller, 'showsShadow').onChange(function(e) { renderer.shadowMap.enabled = e; }); gui.add(controller, 'material', ['basic', 'normal', 'lambert', 'phong', 'standard']).onChange(function(e) { setupSphere(e); }); } function initRenderer() { renderer = new THREE.WebGLRenderer(); renderer.setClearColor(new THREE.Color(0xcccccc)); renderer.setSize(window.innerWidth, window.innerHeight); renderer.shadowMap.enabled = controller.showsShadow; document.body.appendChild(renderer.domElement); } function initCamera() { camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1500); camera.position.set(100, 100, 100); camera.lookAt(scene.position); } function initScene() { scene = new THREE.Scene(); var plane = new THREE.Mesh( new THREE.PlaneGeometry(200, 200), new THREE.MeshLambertMaterial(0xffffff) ); plane.rotation.x = -Math.PI / 2; plane.position.set(0, 0, 0); plane.receiveShadow = true; scene.add(plane); setupSphere(controller.material); var ambientLight = new THREE.AmbientLight(0x999999); scene.add(ambientLight); spotLight = new THREE.SpotLight(0xffffff); spotLight.posAngle = 0; setSpotLightPosition(); spotLight.castShadow = true; spotLight.target = sphere; scene.add(spotLight); spotLightHelper = new THREE.SpotLightHelper(spotLight); spotLightHelper.visible = controller.isLightHelperVisible; scene.add(spotLightHelper); } function setupSphere(materialName) { scene.remove(sphere); switch(materialName) { case 'basic': sphere = new THREE.Mesh( new THREE.SphereGeometry(20, 20, 20), new THREE.MeshBasicMaterial(0xffffff) ); break; case 'normal': sphere = new THREE.Mesh( new THREE.SphereGeometry(20, 20, 20), new THREE.MeshNormalMaterial(0xffffff) ); break; case 'lambert': sphere = new THREE.Mesh( new THREE.SphereGeometry(20, 20, 20), new THREE.MeshLambertMaterial(0xffffff) ); break; case 'phong': sphere = new THREE.Mesh( new THREE.SphereGeometry(20, 20, 20), new THREE.MeshPhongMaterial(0xffffff) ); break; case 'standard': sphere = new THREE.Mesh( new THREE.SphereGeometry(20, 20, 20), new THREE.MeshStandardMaterial(0xffffff) ); break; } sphere.position.set(0, 30, 0); sphere.castShadow = true; scene.add(sphere); } function setSpotLightPosition() { spotLight.position.x = 50 * Math.cos(spotLight.posAngle); spotLight.position.y = 50; spotLight.position.z = 50 * Math.sin(spotLight.posAngle); } function render() { spotLight.posAngle += controller.lightAngleSpeed; setSpotLightPosition(); spotLightHelper.update(); stats.update(); renderer.render(scene, camera); requestAnimationFrame(render); } function onResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } </script> </head> <body> </body> </html>