Skip to content

Instantly share code, notes, and snippets.

@nikuyoshi

nikuyoshi/readme.md

Created February 8, 2016 15:26
Show Gist options
  • Save nikuyoshi/a266af5f4ff744960c7d to your computer and use it in GitHub Desktop.
Save nikuyoshi/a266af5f4ff744960c7d to your computer and use it in GitHub Desktop.
Download ZIP
three.jsでメッシュ状の球体を実装した
Raw
readme.md
Raw
three.html
<!doctype html>
<html lang="jp">
<body>
<script src="http://threejs.org/build/three.min.js"></script>
<script>
// レンダラの初期化
var renderer = new THREE.WebGLRenderer();
renderer.setSize(500, 500);
renderer.setClearColorHex(0xFFFFFF, 1);
document.body.appendChild(renderer.domElement);
// シーンの作成
var scene = new THREE.Scene();
// カメラの配置
var fov = 80;
var aspect = 500 / 500;
var near = 1;
var camera = new THREE.PerspectiveCamera(fov, aspect, near);
camera.position = new THREE.Vector3(0, 0, 2);
camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(camera);
// ライトの配置
var light = new THREE.DirectionalLight(0xcccccc);
light.position = new THREE.Vector3(0.577, 0.577, 0.577);
scene.add(light);
var ambient = new THREE.AmbientLight(0x333333);
scene.add(ambient);
// モデルの配置
var geometry = new THREE.SphereGeometry(1, 32, 16);
var material = new THREE.MeshPhongMaterial({
color: 0xffffff,
ambient: 0xffffff,
specular: 0xcccccc,
shininess:50,
metal:false,
});
var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x0099FF, wireframe: true, transparent: true } );
var mesh = new THREE.Mesh(geometry, wireframeMaterial);
scene.add(mesh);
// レンダリング
var baseTime = +new Date;
function render() {
requestAnimationFrame(render);
mesh.rotation.y = 0.3 * (+new Date - baseTime) / 1000;
renderer.render(scene, camera);
};
render();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment