refirio.org

Memo

■Three.js
■入門

【Three.js入門】初心者がまず見るべきサイト・書籍まとめ | 仙台を代表するホームページ制作会社｜AndHA（アンドエイチエー）
https://and-ha.com/coding/three-js-start/

最新版で学ぶThree.js入門 - 手軽にWebGLを扱える3Dライブラリ - ICS MEDIA
https://ics.media/entry/14771/

WebGL入門 ~ three.js ?~
https://zenn.dev/vava/articles/0d0352c1f4a7bd

必要なのはJavaScriptの基本的な知識だけ　3Dアニメーション制作をお手軽にする「Three.js」の魅力 - ログミーTech
https://logmi.jp/tech/articles/328319

【WebGL特集】第1回：WebGLって何？｜株式会社モックス
https://mox-motion.com/blog/webgl01-2/■サンプル

簡単なThree.jsのサンプルを試そう - ICS MEDIA
https://ics.media/tutorial-three/quickstart/<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Three.js</title>
<script src="https://unpkg.com/three@0.147.0/build/three.min.js"></script>
<script>
    // ページの読み込みを待つ
    window.addEventListener('DOMContentLoaded', init);

    function init() {
        // サイズを指定
        const width = 960;
        const height = 540;

        // レンダラーを作成
        const renderer = new THREE.WebGLRenderer({
            canvas: document.querySelector('#myCanvas')
        });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(width, height);

        // シーンを作成
        const scene = new THREE.Scene();

        // カメラを作成
        const camera = new THREE.PerspectiveCamera(45, width / height);
        camera.position.set(0, 0, +1000);

        // 箱を作成
        const geometry = new THREE.BoxGeometry(400, 400, 400);
        const material = new THREE.MeshNormalMaterial();
        const box = new THREE.Mesh(geometry, material);
        scene.add(box);

        tick();

        // 毎フレーム時に実行されるループイベントです
        function tick() {
            box.rotation.y += 0.01;
            renderer.render(scene, camera); // レンダリング

            requestAnimationFrame(tick);
        }
    }
</script>
</head>
<body>
<canvas id="myCanvas"></canvas>
</body>
</html>
■Blender

【Blender & Three.js】3DモデルをThree.jsでWEBブラウザ表示する方法｜WEB CREATES
https://web-creates.com/code/blender-threejs/

Blenderで3Dモデルを作成し、webpack × Three.js でサイトを作成する - Qiita
https://qiita.com/kaito_takase/items/4b381799d76d4101278c
Memo

Advertisement
