MeshPhongMaterialのテスト
See the Pen MeshPhongMaterial test by aadebdeb (@aadebdeb) on CodePen.
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>[2017/03/24] MeshPhongMaterial test</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 torus; var rotation; function init() { rotation = new THREE.Euler(); 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.background = '#cccccc'; this.torusColor = '#0000ff'; this.emissive = '#ff0000'; this.specular = '#0000ff'; this.shininess = 30; }; gui = new dat.GUI(); gui.addColor(controller, 'background').onChange(function(e) { renderer.setClearColor(e); }); gui.addColor(controller, 'torusColor').onChange(function(e) { replaceTorusKnot(); }); gui.addColor(controller, 'emissive').onChange(function(e) { replaceTorusKnot(); }); gui.addColor(controller, 'specular').onChange(function(e) { replaceTorusKnot(); }); gui.add(controller, 'shininess', 0, 200).onChange(function(e) { replaceTorusKnot(); }); } function initRenderer() { renderer = new THREE.WebGLRenderer(); renderer.setClearColor(new THREE.Color(controller.background)); 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, 1000); camera.position.set(0, 0, 200); camera.lookAt(scene.position); } function initScene() { scene = new THREE.Scene(); replaceTorusKnot(); makeSpotLight(-200, 100, 100); makeSpotLight(100, -200, 100); makeSpotLight(100, 100, -200); } function makeSpotLight(x, y, z) { var spotLight = new THREE.SpotLight(0xffffff); spotLight.position.set(x, y, z); spotLight.target = torus; scene.add(spotLight); } function replaceTorusKnot() { scene.remove(torus); torus = new THREE.Mesh( new THREE.TorusKnotGeometry(30, 8, 64, 8), new THREE.MeshPhongMaterial({ color: controller.torusColor, emissive: controller.emissive, specular: controller.specular, shininess: controller.shininess, }) ); torus.position.set(0, 0, 0); scene.add(torus); } function render() { rotation.x += 0.01; rotation.y += 0.01; rotation.z += 0.01; torus.rotation.x = rotation.x; torus.rotation.y = rotation.y; torus.rotation.z = rotation.z; 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>