three.jsを使ってただ画像を表示したいだけなのに、手間取ったのでメモです。three.jsのバージョンは85です。
まずサーバーをたてます。簡単な方法としては、コードのあるディレクトリで以下のコマンドを実行します。サーバーをたてた上でアクセスしないとエラーになります。(参考)
$ php -S localhost:9000
そして、以下の通りにコードを書いて、ブラウザでlocalhost:9000にアクセスします。
index.html
<html>
<head>
<meta charset=utf-8>
<title>Algorithmic Visualization</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/85/three.min.js"></script>
<script src="show_image.js"></script>
</body>
</html>
show_image.js
// シーン
var scene = new THREE.Scene();
// レンダラー
var renderer = new THREE.WebGLRenderer({alpha:true, antialias: true });
renderer.setClearColor(0xffffff,1);
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setPixelRatio(window.devicePixelRatio ? window.devicePixelRatio : 1);
document.body.appendChild( renderer.domElement );
// カメラ
var camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set(0, 0, 10);
// ライト
var light = new THREE.AmbientLight( 0xffffff );
scene.add( light );
// 画像を読み込む
var texture = new THREE.TextureLoader().load('path/to/file.jpg',
(tex) => { // 読み込み完了時
// 縦横比を保って適当にリサイズ
const w = 5;
const h = tex.image.height/(tex.image.width/w);
// 平面
const geometry = new THREE.PlaneGeometry(1, 1);
const material = new THREE.MeshPhongMaterial( { map:texture } );
const plane = new THREE.Mesh( geometry, material );
plane.scale.set(w, h, 1);
scene.add( plane );
});
// レンダリング
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
render();