Readme
JavaScript 312 lines
HTML 0 lines
CSS 10 lines

Three.js でドット絵を半透明にしてみるテスト
Three.js r56

Three.js でドット絵を半透明にしてみるテスト

Three.js でドット絵を半透明にしてみるテスト＜対応した点＞・マテリアルのオプションを設定することで、半透明になることを確認 transparent: true … 半透明を有効化 opacity : 0.5 … 透明度を設定＜参考＞■ Webグラフィックをハックする（5）：多彩な表現力のWebGLを扱いやすくする「Three.js」 (3 5) - ＠IThttp://www.atmarkit.co.jp/ait/articles/1210/04/news142_3.html// forked from cx20's "Three.js でドット絵を回転するテスト（その３）" http://jsdo.it/cx20/eRDK// forked from cx20's "Three.js でドット絵を回転するテスト（その１）" http://jsdo.it/cx20/r8Zv// forked from cx20's "Three.js でドット絵を表示するテスト" http://jsdo.it/cx20/3U7Nvar DOT_SIZE = 3;var X_START_POS = -28;var Y_START_POS = -20;var Z_START_POS = -16;// ‥‥‥‥‥‥‥‥‥‥‥‥‥□□□// ‥‥‥‥‥‥〓〓〓〓〓‥‥□□□// ‥‥‥‥‥〓〓〓〓〓〓〓〓〓□□// ‥‥‥‥‥■■■□□■□‥■■■// ‥‥‥‥■□■□□□■□□■■■// ‥‥‥‥■□■■□□□■□□□■// ‥‥‥‥■■□□□□■■■■■‥// ‥‥‥‥‥‥□□□□□□□■‥‥// ‥‥■■■■■〓■■■〓■‥‥‥// ‥■■■■■■■〓■■■〓‥‥■// □□■■■■■■〓〓〓〓〓‥‥■// □□□‥〓〓■〓〓□〓〓□〓■■// ‥□‥■〓〓〓〓〓〓〓〓〓〓■■// ‥‥■■■〓〓〓〓〓〓〓〓〓■■// ‥■■■〓〓〓〓〓〓〓‥‥‥‥‥// ‥■‥‥〓〓〓〓‥‥‥‥‥‥‥‥var dataSet = [ [ "無","無","無","無","無","無","無","無","無","無","無","無","無","肌","肌","肌", "無","無","無","無","無","無","無","無","無","無","無","無","無","肌","肌","肌", "無","無","無","無","無","無","無","無","無","無","無","無","無","肌","肌","肌", "無","無","無","無","無","無","無","無","無","無","無","無","無","赤","赤","赤", "無","無","無","無","無","無","無","無","無","無","無","無","無","赤","赤","赤", "無","無","無","無","無","無","無","無","無","無","無","無","赤","赤","赤","赤", "無","無","無","無","無","無","無","無","無","無","無","赤","赤","赤","赤","無", "無","無","無","無","無","無","無","無","無","無","無","赤","赤","赤","無","無", "無","無","無","無","無","無","無","無","無","無","無","無","無","無","無","無", "無","無","無","無","無","無","無","無","無","無","無","無","無","無","無","茶", "無","無","無","無","無","無","無","無","無","無","無","無","無","無","無","茶", "無","無","無","無","無","無","無","無","無","無","無","無","無","無","茶","茶", "無","無","無","無","無","無","無","無","無","無","無","無","無","無","茶","茶", "無","無","無","無","無","無","無","無","無","無","無","無","無","無","茶","茶", "無","無","無","無","無","無","無","無","無","無","無","無","無","無","無","無", "無","無","無","無","無","無","無","無","無","無","無","無","無","無","無","無" ], [ "無","無","無","無","無","無","無","無","無","無","無","無","無","肌","肌","肌", "無","無","無","無","無","無","無","無","無","無","無","無","無","肌","肌","肌", "無","無","無","無","無","無","無","無","無","無","無","無","無","肌","肌","肌", "無","無","無","無","無","無","無","無","無","無","無","無","無","赤","赤","赤", "無","無","無","無","無","無","無","無","無","無","無","無","無","赤","赤","赤", "無","無","無","無","無","無","無","無","無","無","無","無","赤","赤","赤","赤", "無","無","無","無","無","無","無","無","無","無","無","赤","赤","赤","赤","無", "無","無","無","無","無","無","無","無","無","無","赤","赤","赤","赤","無","無", "無","無","無","無","無","無","無","無","無","無","赤","赤","赤","無","無","無", "無","無","無","無","無","無","無","無","無","無","無","無","無","無","無","茶", "無","無","無","無","無","無","無","無","無","無","無","無","無","無","無","茶", "無","無","無","無","無","無","無","無","青","青","青","青","青","青","茶","茶", "無","無","無","無","無","無","無","無","青","青","青","青","青","青","茶","茶", "無","無","無","無","無","無","無","無","青","青","青","青","青","青","茶","茶", "無","無","無","無","無","無","無","無","無","無","無","無","無","無","無","無", "無","無","無","無","無","無","無","無","無","無","無","無","無","無","無","無" ], [ "無","無","無","無","無","無","無","無","無","無","無","無","無","無","無","無", "無","無","無","無","無","無","無","赤","赤","赤","無","無","無","肌","無","無", "無","無","無","無","無","無","赤","赤","赤","赤","赤","赤","赤","肌","肌","肌", "無","無","無","無","無","茶","茶","茶","無","無","無","無","無","赤","赤","赤", "無","無","無","無","茶","肌","無","無","無","無","無","無","無","赤","赤","赤", "無","無","無","無","茶","肌","無","無","無","無","無","茶","赤","赤","赤","赤", "無","無","無","無","茶","茶","無","無","無","無","茶","茶","茶","茶","赤","無", "無","無","無","無","無","無","無","無","無","無","無","無","赤","赤","無","無", "無","無","無","無","無","無","無","無","無","青","青","赤","赤","無","無","無", "無","無","無","無","無","無","無","無","無","青","赤","赤","赤","無","無","茶", "無","無","無","無","無","無","無","無","青","青","青","青","青","無","無","茶", "無","無","無","無","無","青","青","青","青","青","青","青","青","青","茶","茶", "無","無","無","無","無","青","青","青","青","青","青","青","青","青","茶","茶", "無","無","無","無","無","青","青","青","青","青","青","青","青","青","茶","茶", "無","無","無","無","無","無","無","無","無","無","無","無","無","無","無","無", "無","無","無","無","無","無","無","無","無","無","無","無","無","無","無","無" ], [ "無","無","無","無","無","無","無","無","無","無","無","無","無","無","無","無", "無","無","無","無","無","無","赤","赤","赤","赤","赤","無","無","無","無","無", "無","無","無","無","無","赤","赤","赤","赤","赤","赤","赤","赤","赤","無","無", "無","無","無","無","無","茶","茶","茶","肌","肌","無","無","無","無","無","無", "無","無","無","無","茶","肌","茶","肌","肌","肌","無","無","無","無","無","無", "無","無","無","無","茶","肌","茶","茶","肌","肌","肌","茶","肌","肌","無","無", "無","無","無","無","茶","茶","肌","肌","肌","肌","茶","茶","茶","茶","無","無", "無","無","無","無","無","無","無","肌","肌","肌","肌","肌","肌","無","無","無", "無","無","無","無","無","無","無","赤","赤","赤","赤","青","無","無","無","無", "無","無","無","無","無","無","赤","赤","赤","赤","赤","赤","青","無","無","茶", "無","無","無","無","無","無","赤","赤","赤","青","青","青","青","無","無","茶", "無","無","無","無","無","青","赤","青","青","青","青","青","青","青","茶","茶", "無","無","無","無","無","青","青","青","青","青","青","青","青","青","茶","茶", "無","無","無","無","無","青","青","青","青","青","青","青","青","青","茶","茶", "無","無","無","無","無","無","青","青","青","青","青","無","無","無","無","無", "無","無","無","無","無","無","無","無","無","無","無","無","無","無","無","無" ], [ "無","無","無","無","無","無","無","無","無","無","無","無","無","無","無","無", "無","無","無","無","無","無","赤","赤","赤","赤","赤","無","無","無","無","無", "無","無","無","無","無","赤","赤","赤","赤","赤","赤","赤","赤","赤","無","無", "無","無","無","無","無","茶","茶","茶","肌","肌","茶","無","無","無","無","無", "無","無","無","無","茶","肌","茶","肌","肌","肌","茶","肌","肌","無","無","無", "無","無","無","無","茶","肌","茶","茶","肌","肌","肌","茶","肌","肌","肌","無", "無","無","無","無","茶","茶","肌","肌","肌","肌","茶","茶","茶","茶","無","無", "無","無","無","無","無","無","肌","肌","肌","肌","肌","肌","肌","無","無","無", "無","無","無","無","無","無","赤","青","赤","赤","赤","無","無","無","無","無", "無","無","無","無","無","無","赤","赤","青","赤","赤","赤","無","無","無","茶", "無","無","無","無","無","無","赤","赤","青","青","青","青","青","無","無","茶", "無","無","無","無","無","青","赤","青","青","青","青","青","黄","無","茶","茶", "無","無","無","茶","無","青","青","青","青","青","青","青","青","無","茶","茶", "無","無","茶","茶","茶","青","青","青","青","青","青","青","青","無","茶","茶", "無","茶","茶","茶","無","無","青","青","青","青","青","無","無","無","無","無", "無","茶","無","無","無","無","無","無","無","無","無","無","無","無","無","無" ], [ "無","無","無","無","無","無","無","無","無","無","無","無","無","無","無","無", "無","無","無","無","無","無","赤","赤","赤","赤","赤","無","無","無","無","無", "無","無","無","無","無","赤","赤","赤","赤","赤","赤","赤","赤","赤","無","無", "無","無","無","無","無","茶","茶","茶","肌","肌","茶","肌","無","無","無","無", "無","無","無","無","茶","肌","茶","肌","肌","肌","茶","肌","肌","無","無","無", "無","無","無","無","茶","肌","茶","茶","肌","肌","肌","茶","肌","肌","肌","無", "無","無","無","無","茶","茶","肌","肌","肌","肌","茶","茶","茶","茶","無","無", "無","無","無","無","無","無","肌","肌","肌","肌","肌","肌","肌","無","無","無", "無","無","無","無","無","青","赤","青","赤","赤","赤","無","無","無","無","無", "無","無","無","無","無","青","赤","赤","青","赤","赤","無","無","無","無","無", "無","無","無","無","無","青","赤","赤","青","青","青","無","無","無","無","無", "無","無","無","無","無","青","赤","青","青","青","青","青","無","無","無","無", "無","無","無","茶","無","青","青","青","青","青","青","青","無","無","無","無", "無","無","茶","茶","茶","青","青","青","青","青","青","青","無","無","無","無", "無","茶","茶","茶","青","青","青","青","青","青","青","無","無","無","無","無", "無","茶","無","無","青","青","青","青","無","無","無","無","無","無","無","無" ], [ "無","無","無","無","無","無","無","無","無","無","無","無","無","無","無","無", "無","無","無","無","無","無","赤","赤","赤","赤","赤","無","無","無","無","無", "無","無","無","無","無","赤","赤","赤","赤","赤","赤","赤","赤","赤","無","無", "無","無","無","無","無","茶","茶","茶","肌","肌","茶","肌","無","無","無","無", "無","無","無","無","茶","肌","茶","肌","肌","肌","茶","肌","肌","無","無","無", "無","無","無","無","茶","肌","茶","茶","肌","肌","肌","茶","肌","肌","肌","無", "無","無","無","無","茶","茶","肌","肌","肌","肌","茶","茶","茶","茶","無","無", "無","無","無","無","無","無","肌","肌","肌","肌","肌","肌","肌","無","無","無", "無","無","赤","赤","赤","赤","赤","青","赤","赤","赤","無","無","無","無","無", "無","赤","赤","赤","赤","赤","赤","赤","青","赤","赤","無","無","無","無","無", "肌","肌","赤","赤","赤","赤","赤","赤","青","青","青","無","無","無","無","無", "肌","肌","肌","無","無","無","赤","青","青","青","青","青","無","無","無","無", "無","肌","無","茶","無","無","青","青","青","青","青","青","無","無","無","無", "無","無","茶","茶","茶","青","青","青","青","青","青","青","無","無","無","無", "無","茶","茶","茶","青","青","青","青","青","青","青","無","無","無","無","無", "無","茶","無","無","青","青","青","青","無","無","無","無","無","無","無","無" ], [ "無","無","無","無","無","無","無","無","無","無","無","無","無","無","無","無", "無","無","無","無","無","無","赤","赤","赤","赤","赤","無","無","無","無","無", "無","無","無","無","無","赤","赤","赤","赤","赤","赤","赤","赤","赤","無","無", "無","無","無","無","無","茶","茶","茶","肌","肌","無","無","無","無","無","無", "無","無","無","無","茶","肌","茶","肌","肌","肌","無","無","無","無","無","無", "無","無","無","無","茶","肌","茶","茶","肌","肌","肌","茶","肌","肌","無","無", "無","無","無","無","茶","茶","肌","肌","肌","肌","茶","茶","茶","茶","無","無", "無","無","無","無","無","無","無","肌","肌","肌","肌","肌","肌","無","無","無", "無","無","赤","赤","赤","赤","赤","青","赤","赤","無","無","無","無","無","無", "無","赤","赤","赤","赤","赤","赤","赤","青","赤","無","無","無","無","無","無", "肌","肌","赤","赤","赤","赤","赤","赤","青","青","無","無","無","無","無","無", "肌","肌","肌","無","無","無","赤","青","青","黄","無","無","無","無","無","無", "無","肌","無","茶","無","無","青","青","青","青","青","無","無","無","無","無", "無","無","茶","茶","茶","青","青","青","青","青","青","無","無","無","無","無", "無","茶","茶","茶","青","青","青","青","青","青","青","無","無","無","無","無", "無","茶","無","無","青","青","青","青","無","無","無","無","無","無","無","無" ], [ "無","無","無","無","無","無","無","無","無","無","無","無","無","無","無","無", "無","無","無","無","無","無","無","赤","赤","赤","無","無","無","無","無","無", "無","無","無","無","無","無","赤","赤","赤","赤","赤","赤","赤","無","無","無", "無","無","無","無","無","茶","茶","茶","無","無","無","無","無","無","無","無", "無","無","無","無","茶","肌","無","無","無","無","無","無","無","無","無","無", "無","無","無","無","茶","肌","無","無","無","無","無","茶","無","無","無","無", "無","無","無","無","茶","茶","無","無","無","無","茶","茶","茶","無","無","無", "無","無","無","無","無","無","無","無","無","無","無","無","無","無","無","無", "無","無","赤","赤","赤","赤","赤","青","無","無","無","無","無","無","無","無", "無","赤","赤","赤","赤","赤","赤","赤","青","無","無","無","無","無","無","無", "肌","肌","赤","赤","赤","赤","赤","赤","青","無","無","無","無","無","無","無", "肌","肌","肌","無","無","無","無","青","青","無","無","無","無","無","無","無", "無","肌","無","茶","無","無","青","青","青","青","無","無","無","無","無","無", "無","無","茶","茶","茶","無","青","青","青","青","無","無","無","無","無","無", "無","茶","茶","茶","無","無","青","青","青","青","無","無","無","無","無","無", "無","茶","無","無","無","無","無","無","無","無","無","無","無","無","無","無" ]];function getRgbColor( c ){var colorHash = {"無":"#000000","白":"#ffffff","肌":"#ffcccc","茶":"#800000","赤":"#ff0000","黄":"#ffff00","緑":"#00ff00","水":"#00ffff","青":"#0000ff","紫":"#800080"};return colorHash[ c ];}var width = 440;var height = 440;var fov = 80;var aspect = width / height;var near = 1;var far = 1000;var mouseX = 0;var mouseY = 0;var windowHalfX = width / 2;var windowHalfY = height / 2;var camera;var scene;var rendere;var theta = 0;init();animate();function init() { document.addEventListener('mousemove', onDocumentMouseMove, false); camera = new THREE.PerspectiveCamera(fov, aspect, near, far); camera.position.z = 50; scene = new THREE.Scene(); var i, j, x, y, z; var meshArray = []; var geometry = new THREE.CubeGeometry(DOT_SIZE * 0.8, DOT_SIZE * 0.8, DOT_SIZE * 0.8); for (j = 0; j < dataSet.length; j++) { for (i = 0; i < dataSet[j].length; i++) { x = (i % 16) * DOT_SIZE + X_START_POS; y = (16 - Math.floor(i / 16)) * DOT_SIZE + Y_START_POS; z = j * DOT_SIZE + Z_START_POS; color = getRgbColor(dataSet[j][i]); if (dataSet[j][i] != "無") { var material = new THREE.MeshLambertMaterial({ color: color, transparent: true, opacity: 0.5 }); meshArray[i] = new THREE.Mesh(geometry, material); meshArray[i].position.x = x - 0; meshArray[i].position.y = y; meshArray[i].position.z = z; scene.add(meshArray[i]); } } } //ライティング var light = new THREE.DirectionalLight(0xffffff, 1.5); light.position.set(1, 1, 1).normalize(); scene.add(light); var light2 = new THREE.DirectionalLight(0xffffff); light2.position.set(-1, -1, -1).normalize(); scene.add(light2); // 座標軸表示 var axis = new THREE.AxisHelper(100); scene.add(axis); // create and start the renderer; choose antialias setting. if (isWebgl()) renderer = new THREE.WebGLRenderer({ antialias: true }); else renderer = new THREE.CanvasRenderer(); renderer.setSize(width, height); document.body.appendChild(renderer.domElement); renderer.render(scene, camera);}function isWebgl() { try { return !!window.WebGLRenderingContext && !! document.createElement('canvas').getContext('experimental-webgl'); } catch (e) { return false; }}function onDocumentMouseMove(event) { mouseX = event.clientX - windowHalfX; mouseY = event.clientY - windowHalfY;}function animate() { requestAnimationFrame(animate); render();}function render() { camera.lookAt(scene.position); camera.position.x = 50 * Math.sin(theta * Math.PI / 180) * -1; // 逆回転 camera.position.y = 50 * Math.cos(60 * Math.PI / 180); camera.position.z = 50 * Math.cos(theta * Math.PI / 180); theta += 2.0; renderer.render(scene, camera);}* { margin: 0; padding: 0; border: 0;}body { background: #222; font: 30px sans-serif;}