three.js
https://gyazo.com/45b640ba647a8eb6bb55842ed460cf29
Local Server setting ↓
Terminal > cd <html file>d&d > python -m SimpleHTTPServer
code ↓
/icons/hr.icon
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>three.js</title>
<style>
body{
margin:0;
}
</style>
</head>
<body>
<div id="stage"></div>
<script src="js/OrbitControls.js"></script>
<script>
window.addEventListener('load',function(){
//シーン
var scene = new THREE.Scene();
//カメラ
var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);
camera.position.set(0,100,100);
camera.lookAt(scene.position);
//光源
var ambientLight = new THREE.AmbientLight(0x404040); //光の色
scene.add(ambientLight);
var light = new THREE.DirectionalLight(0xFFFFFF,1);
scene.add(light);
light.position.set(0,300,50);
//ヘルパー
var gridHelper = new THREE.GridHelper(1000,50);
scene.add(gridHelper);
var axisHelper = new THREE.AxisHelper(1000);
scene.add(axisHelper);
var lightHelper = new THREE.DirectionalLightHelper(light,40);
scene.add(lightHelper);
//コントロール
var controls = new THREE.OrbitControls(camera);
//Boxの配置
// 1 ジオメトリ
var boxGeometory = new THREE.BoxGeometry(50,50,50);
// 2 マテリアル
var boxMaterial = new THREE.MeshLambertMaterial();
// 3 メッシュ
var box = new THREE.Mesh(boxGeometory,boxMaterial);
// 4 シーンに配置
scene.add(box);
// box.position.set(0,70,0);
box.position.y = 100;
//Sphereの配置
var sphereGeometory = new THREE.SphereGeometry(50,20,20);
var sphereMaterial = new THREE.MeshNormalMaterial();
var sphere = new THREE.Mesh(sphereGeometory,sphereMaterial);
scene.add(sphere);
sphere.position.set(-100,50,-50);
//Sphereの配置
var sphereGeometory = new THREE.SphereGeometry(50,20,20);
var sphereMaterial = new THREE.MeshNormalMaterial({color:0x4caf50, wireframe:true});
var sphere = new THREE.Mesh(sphereGeometory,sphereMaterial);
scene.add(sphere);
sphere.position.set(100,50,50);
//レンダリング
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
renderer.setClearColor(0xEFEFEF); //背景色
renderer.setPixelRatio(window.devicePixelRatio); //デバイスピクセル対応
document.getElementById('stage').appendChild(renderer.domElement);
//ループ処理
function tick(){
requestAnimationFrame(tick);
controls.update();
renderer.render(scene,camera); //レンダリング実行
}
tick();
});
</script>
</body>
</html>
/icons/hr.icon