前回作成したものをベースに作成していきます。
今回作成するものは下のDEMOから確認できます。（PC推奨）
マウスを動かすと「キリン」が回転します。
一見オブジェクト（キリン）がマウスに合わせて回転しているように見えますが、実はカメラがオブジェクト（キリン）の周りを回っています。
今回は、前回作成したものに、このようなカメラコントロールの機能を追加します。
Three.jsにBlenderで作ったオブジェクトを読み込む │ MUKOLOG
Three.jsにBlenderで作成したオブジェクトの読み込み方についての記事になります。
CSSは前回と同じものです。
html
<script src="js/threejs/three.min.js"></script>
<script src="js/threejs/GLTFLoader.js"></script>
<script src="js/sample01.js"></script>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
javascript
let rot = 0; // 角度
let mouseX = 0; // マウス座標
// マウス座標はマウスが動いた時のみ取得できる
window.addEventListener("mousemove", (event) =&amp;amp;amp;amp;amp;gt; {
mouseX = event.pageX;
});
window.addEventListener('load', init);
function init() {
// レンダラーを作成
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('#canvas'),
antialias: true
});
// シーンを作成
const scene = new THREE.Scene();
// カメラを作成
const camera = new THREE.PerspectiveCamera(45, 1);
camera.fov = 60;
camera.position.set(0, 0, 1000);
// マウス操作
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableZoom = false;
controls.enableDamping = true;
// Load GLTF or GLB
const loader = new THREE.GLTFLoader();
const url = './img/Giraffe.glb';
let model = null;
loader.load(
url,
function (gltf) {
model = gltf.scene;
model.scale.set(100.0, 100.0, 100.0);
model.position.set(0, -300, 0);
scene.add(model);
},
function (error) {
console.log('An error happened');
}
);
//テクスチャをガンマ補正
renderer.gammaOutput = true;
renderer.gammaFactor = 2.2;
// ライト追加
hemisphereLight = new THREE.HemisphereLight(0xffffff, 0x4169e1, 1.8);
scene.add(hemisphereLight);
// 初回実行
cntrl();
tick();
onResize();
// マウスに追従
function cntrl() {
// マウス追従
// マウスの位置に応じて角度を設定
// マウスのX座標がステージの幅の何%の位置にあるか調べてそれを360度で乗算する
const targetRot = (mouseX / window.innerWidth) * 360;
// イージングの公式を用いて滑らかにする
// 値 += (目標値 - 現在の値) * 減速値
rot += (targetRot - rot) * 0.4;
// ラジアンに変換する
const radian = rot * Math.PI / 180;
// 角度に応じてカメラの位置を設定
camera.position.x = -1000 * Math.sin(radian);
//camera.position.y = -100 * Math.cos(radian);
camera.position.z = 1000 * Math.cos(radian);
// 原点方向を見つめる
camera.lookAt(new THREE.Vector3(0, 0, 0));
controls.update();
renderer.render(scene, camera);
requestAnimationFrame(cntrl);
}
// リサイズイベント発生で実行
window.addEventListener('resize', onResize);
function onResize() {
// サイズを取得
const w = window.innerWidth;
const h = window.innerHeight;
// 描画サイズ
renderer.setSize(w, h);
// ピクセル比
renderer.setPixelRatio(window.devicePixelRatio);
// 空間の背景色 //0xから始まる16進数の色コード
renderer.setClearColor(0xe4f8ec);
// カメラのアスペクト比を正す
camera.aspect = w / h;
camera.updateProjectionMatrix();
console.log('h' + h + 'h' + h);
// レンダリング
renderer.render(scene, camera);
}
function tick() {
requestAnimationFrame(tick);
//回転
if (model) {
model.rotation.y += 0.03;
}
renderer.render(scene, camera);
}
}
htmlに『OrbitControls.js』を読み込みます。
ファイルはthree.js-master/examples/js/controls/OrbitControls.jsにあります。
『function cntrl()』でカメラが位置を管理しています。
『rot += (targetRot - rot) * 0.4;』の部分の数値を変更すると、マウスの移動距離に対してのカメラの移動の値（オブジェクトの回転の度合い）を調整できます。
Three.jsを背景にしてレイアウトしてみる
作成したThree.jsを背景にして、レイアウトしてみました。
css、htmlは以下になります。
html
<body>
<canvas id="canvas"></canvas>
<div class="title">
<div class="title-box">
<h1>GIRAFFE</h1>
<div class="text">
The giraffe (Giraffa) is an African artiodactyl mammal, the tallest living terrestrial animal and the
largest ruminant. It is traditionally considered to be one species, Giraffa camelopardalis, with nine
subspecies.
</div>
</div>
</div>
</body>
CSS
body {
margin: 0;
overflow: hidden;
top: 0;
left: 0;
}
.title {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
z-index: 100;
position: relative;
text-align: center;
top: 0;
left: 0;
}
.title-box {
width: 100%;
text-align: center;
}
.title-box h1 {
font-family: "Playfair Display", serif;
color: #fff;
font-size: 16rem;
letter-spacing: -0.8rem;
}
.title-box .text {
width: 70%;
margin: 0 auto;
color: #fff;
font-size: 1.2rem;
line-height: 1.3;
text-align: center;
letter-spacing: 0.1rem;
margin-top: 20px;
}
#canvas {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
@media screen and (max-width: 750px) {
.title-box h1 {
font-size: 3.8rem;
letter-spacing: -0.1rem;
}
.title-box .text {
width: 80%;
}
}
javascriptはほぼ同じですが、文字をのせるために、ちょっと背景色（環境色）を濃くしました。具体的には、『function onResize()』内の
renderer.setClearColor(0xa1e2c9);
になります。
余談ですが、地味にthree.js（canvas）を背景として使うのに苦戦しました。
【参考】
インタラクションデザインを得意とするWeb制作会社ICS(アイシーエス)の技術情報メディア。HTML5やCSS3、JavaScriptを中心とした業界最先端の情報や、学生や新社会人にわかりやすいと評判のWebデザイン入門記事を掲載。
インタラクションデザインを得意とするWeb制作会社ICS(アイシーエス)の技術情報メディア。HTML5やCSS3、JavaScriptを中心とした業界最先端の情報や、学生や新社会人にわかりやすいと評判のWebデザイン入門記事を掲載。
canvasを背景にする設定を行いました。 シンプルにできればと思っていたらQiitaでありました。 ボタン操作ができるようになってますがもう少しいい方法もありそう。 もうちょっと調べてみます。 HTML記述 スポンサーリンク (adsbygoogle = window.adsbygoogle || #canvas { position:fixed; top:0; left:0; width:100%; height:100%; } #body { position:absolute; top:0; left:0; } 全てを記述 とりあえずキャンパスでの設定はできました。
Three.jsにBlenderで作ったオブジェクトを読み込む │ MUKOLOG
Three.jsにBlenderで作成したオブジェクトの読み込み方についての記事になります。
