はじめに
今更企画！コピペ４回でちょっとイケてる hello world を10秒。たった10秒で作成。9割自分向けのチートですがひひーーん。今すげーアイディア思い浮かんだ。新しい Node の空環境すぐに欲しい。public ディレクトリに index.html を設置してすぐ見れるようにしたい。そんな私の願いを私が叶えて見せます！Node.js や npm コマンドはインストール済みの前提で行きます！
express
bash
mkdir -p ~/IdeaProjects/sandbox-node-js
mkdir -p ~/IdeaProjects/sandbox-node-js/public
cd ~/IdeaProjects/sandbox-node-js
npm init --yes
npm install express
app.js
[bash]~/IdeaProjects/sandbox-node-js/app.js
cat << EOS > ~/IdeaProjects/sandbox-node-js/app.js
const express = require('express');
const app = express();
app.use(express.static('public'));
app.listen(18080);
EOS
index.html
[bash]~/IdeaProjects/sandbox-node-js/public/index.html
cat << EOS > ~/IdeaProjects/sandbox-node-js/public/index.html
<!DOCTYPE html>
<html>
<body>
<div id='container' ></div>
<h2 id='hello'>Hello World!</h2>
<script src='https://rawgithub.com/mrdoob/three.js/master/build/three.min.js' ></script>
<script src="https://rawgithub.com/mrdoob/three.js/master/examples/js/controls/TrackballControls.js"></script>
<script src="https://rawgithub.com/mrdoob/three.js/master/examples/js/renderers/CSS3DRenderer.js"></script>
<script>
const SCREEN_WIDTH=window.innerWidth
const SCREEN_HEIGHT=window.innerHeight
const renderer = new THREE.CSS3DRenderer()
renderer.setSize(SCREEN_WIDTH,SCREEN_HEIGHT)
document.getElementById("container").appendChild(renderer.domElement)
const camera=new THREE.PerspectiveCamera(45,SCREEN_WIDTH/SCREEN_HEIGHT,1,10000)
const hello = new THREE.CSS3DObject(document.getElementById('hello'))
const scene=new THREE.Scene()
scene.add(camera)
scene.add(hello)
camera.position.z=200
controls=new THREE.TrackballControls(camera,renderer.domElement)
function render(){
requestAnimationFrame(render)
renderer.render(scene,camera)
controls.update()
}
render()
</script>
</body>
</html>
EOS
起動
bash
node app.js
表示
http://localhost:18080/
(これはコピペに含めない)
最後に
sandbox-node-js のフォルダは最後にお好みにリネームすると良いでしょう。