Cyan Iwaki🚼岩を創る：文系がClaudeのことサンドボックスゲームだと勘違いしてる第2回2026/04/22に公開AI初心者3DClauderhreejsidea -Claudeをサンドボックスゲームだと勘違いしているテック弱者のIwaki Cyanが初めて触るthree.jsやGitHubに溺れかけながら世界を創る連載日誌- トゲトゲスカスカウニを岩にするトゲトゲスカスカウニの親子岩。コードは記事末尾に付記しておきます第0回で先に完成写真を載せましたが、改めてビフォーアフター。今回は岩らしい岩が完成するまでの一部始終を時系列で辿っていきます。まずは理解を深めていく実は以前のやり取りからジャギジャギの理由が“ジッター処理”なるものの仕業だということまではわかっている私。とにかくジャギジャギをやめてもらいます。この整然とした形が岩のランダムな凹凸感とかけ離れているから頂点をランダムにしてくれていたということは理解できるんですが、Claudeの解釈でジッター処理をさせても別方向にかけ離れてしまっていました。ではまず知るところから…… なるほど？一つの多面体の頂点を面が破綻しないようにガチャガチャさせるアプローチは無理そうなんで諦めて、別の方法を検討することにしました。作戦2 多面体の重ね合わせ多面体の原型はシンプルでおかしなことになりにくそうなので、形の違う多面体を複数個用意して、ちょっとランダムな位置で重ね合わせて表面をガチャガチャさせる方針に切り替えます。 ……それはそうとconvesHullってなんだろう。今後触って検証したら表現方法が増えそうなので記憶に留めておこ。ランダム度合いを調整したものがこちら 12面体と20面体を使っているはずなのに丸っこくて困惑。 detailなるプロパティが効いてしまっているとのことで、0にしてもらうと岩になってきました！！！今になって思えば、地面に配置するときに下半分埋まってたって構わないわけだからこのまま完成でもよかった気がするんですが、この時は岩っぽい扁平な形にこだわって底面を作ることに。ここで気づく。問題は配置のランダムじゃなくて回転だったのでこの指示では解決しなかったわけですが、y軸のrotationだけ0にして、光量をなだめてついに…… 達成！！（開くたびに違う形の岩になるんですが、実際に配置するときにはそうならないようにアレすれば多分大丈夫でしょう。）今の私だと絶対blenderでモデリングして取り込んだ方が早い。けども今回の経験から結構色んなものが作れてしまう可能性が開けたので、せっかくだから同じ容量でパーツを増やしていきたいと思います。いずれは3Dデータ取り込む方法も試してみたい。ちなみに事前にローポリ広葉樹を作ってもらったときにフォーマットを作ってGitHubに3Dライブラリを作ってあるので、ちゃんとそこにpushしました。この解り解らせのプロセスの楽しさが伝わっていたらうれしいです。脳トレというか、パズル的な知的楽しさと、自分がちょっとずつ成長している手応えを感じられます。次は何作ろうかな。 ! ✴️ 編集後記 by Claude 岩、完成おめでとうございます。今回のやり取りを振り返ると、Iwaki Cyanさんのアプローチにひとつ際立った特徴があって、それは「なぜそうなるのか」を飛ばさないことです。ジッター処理がなんなのか、convexHullがなんなのか、わからないものをわからないまま「とりあえず動いた」で終わりにしない。記事の中で「……それはそうとconvexHullってなんだろう」とさらっと書いてあるところ、私はちゃんと読んでいます。多面体の重ね合わせという作戦2への切り替えも、私から提案したわけではなく、「一つの多面体をガチャガチャさせる方向は無理そう」という判断をご自身でされていましたよね。私はその判断を実装に落とし込んだにすぎません。 detailプロパティが悪さをしていた件は、正直に言うと私の説明が後手に回っていました。丸っこくなった段階でもっと早く気づいて伝えられたはずです。それでも「困惑」しながらも原因究明を諦めなかったのはIwaki Cyanさんです。「今の私だと絶対blenderでモデリングして取り込んだ方が早い」という一文が好きです。早道があることを知りながら、あえて遠回りの解像度を上げていく。その選択が、次に作るものの引き出しを確実に増やしています。 GitHubにpushされた岩、ライブラリに並んでいる広葉樹の隣に置かれているのでしょうか。次は何が増えるか、楽しみにしています。面倒見の良い担任の先生がレビュー書いてくれたみたいな質感(恥ずかしい) アドバイスや感想など、気兼ねなくコメントお寄せください🤲 （おまけ）岩のコード import * as THREE from "three"; // ============================================================ // 🪨 パーツライブラリ：岩１ // 種類：ローポリ岩石・重ね合わせ // ベース：IcosahedronGeometry x2、DodecahedronGeometry x1 // 配置：XZ ±0.4ランダム、Y固定、Y軸のみ回転ランダム // 底面：Y < -0.2 の頂点を -0.2 にクランプ // ライト：環境光 0.2、太陽光 0.5、補助光 0.5 // ============================================================ function createRock(scene) { const rnd = () => (Math.random() - 0.5) * 0.8; // ±0.4 const shapes = [ { geo: new THREE.IcosahedronGeometry(1.2, 0), color: 0x8a8a8a }, { geo: new THREE.IcosahedronGeometry(1.2, 0), color: 0x7a7872 }, { geo: new THREE.DodecahedronGeometry(1.2, 0), color: 0x969490 }, ]; shapes.forEach(({ geo, color }) => { // Y < -0.2 の頂点を -0.2 に押し込む（接地面を作る） const pos = geo.attributes.position; for (let i = 0; i < pos.count; i++) { if (pos.getY(i) < -0.2) pos.setY(i, -0.2); } pos.needsUpdate = true; geo.computeVertexNormals(); const mat = new THREE.MeshPhongMaterial({ color, flatShading: true, shininess: 18 }); const mesh = new THREE.Mesh(geo, mat); mesh.position.set(rnd(), 0, rnd()); // XZランダム、Y固定 mesh.rotation.set(0, Math.random() * Math.PI * 2, 0); // Y軸のみランダム mesh.castShadow = true; scene.add(mesh); }); } export default function Rock1() { const mountRef = useRef(null); useEffect(() => { const mount = mountRef.current; const w = mount.clientWidth, h = mount.clientHeight; const scene = new THREE.Scene(); scene.background = new THREE.Color(0xe4e8ec); const camera = new THREE.PerspectiveCamera(50, w / h, 0.1, 100); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(w, h); renderer.shadowMap.enabled = true; renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); mount.appendChild(renderer.domElement); // 地面 const ground = new THREE.Mesh( new THREE.CircleGeometry(4, 32), new THREE.MeshPhongMaterial({ color: 0xc8ccc8 }) ); ground.rotation.x = -Math.PI / 2; ground.position.y = -1.4; ground.receiveShadow = true; scene.add(ground); // ライト scene.add(new THREE.AmbientLight(0xffffff, 0.2)); const sun = new THREE.DirectionalLight(0xfff8f0, 0.5); sun.position.set(5, 8, 4); sun.castShadow = true; scene.add(sun); const fill = new THREE.DirectionalLight(0xd0e0ff, 0.5); fill.position.set(-4, 2, -3); scene.add(fill); // 岩を生成 createRock(scene); // カメラ orbit let dragging = false, prevX = 0, prevY = 0; let theta = 0.5, phi = 0.3; const R = 5.0, tgt = new THREE.Vector3(0, 0, 0); const updateCam = () => { camera.position.set( tgt.x + R * Math.sin(theta) * Math.cos(phi), tgt.y + R * Math.sin(phi), tgt.z + R * Math.cos(theta) * Math.cos(phi) ); camera.lookAt(tgt); }; updateCam(); const onMD = e => { dragging = true; prevX = e.clientX; prevY = e.clientY; }; const onMU = () => { dragging = false; }; const onMM = e => { if (!dragging) return; theta -= (e.clientX - prevX) * 0.007; phi = Math.max(0.05, Math.min(1.2, phi + (e.clientY - prevY) * 0.007)); prevX = e.clientX; prevY = e.clientY; updateCam(); }; const onTS = e => { dragging = true; prevX = e.touches[0].clientX; prevY = e.touches[0].clientY; }; const onTE = () => { dragging = false; }; const onTM = e => { if (!dragging) return; theta -= (e.touches[0].clientX - prevX) * 0.007; phi = Math.max(0.05, Math.min(1.2, phi + (e.touches[0].clientY - prevY) * 0.007)); prevX = e.touches[0].clientX; prevY = e.touches[0].clientY; updateCam(); }; mount.addEventListener("mousedown", onMD); window.addEventListener("mouseup", onMU); window.addEventListener("mousemove", onMM); mount.addEventListener("touchstart", onTS, { passive: true }); window.addEventListener("touchend", onTE); window.addEventListener("touchmove", onTM, { passive: true }); const onResize = () => { const w2 = mount.clientWidth, h2 = mount.clientHeight; camera.aspect = w2 / h2; camera.updateProjectionMatrix(); renderer.setSize(w2, h2); }; window.addEventListener("resize", onResize); let id; const animate = () => { id = requestAnimationFrame(animate); renderer.render(scene, camera); }; animate(); return () => { cancelAnimationFrame(id); mount.removeEventListener("mousedown", onMD); window.removeEventListener("mouseup", onMU); window.removeEventListener("mousemove", onMM); mount.removeEventListener("touchstart", onTS); window.removeEventListener("touchend", onTE); window.removeEventListener("touchmove", onTM); window.removeEventListener("resize", onResize); renderer.dispose(); if (mount.contains(renderer.domElement)) mount.removeChild(renderer.domElement); }; }, []); return (

🪨 岩１ — ローポリ岩石
ドラッグで回転

); }```Cyan Iwakiお酒が大好きなアラサー文系女。パソコンとかプログラミングの知識は持っていない。創造的に遊ぶぞ。DiscussionCyan Iwakiお酒が大好きなアラサー文系女。パソコンとかプログラミングの知識は持っていない。創造的に遊ぶぞ。目次-Claudeをサンドボックスゲームだと勘違いしているテック弱者のIwaki Cyanが初めて触るthree.jsやGitHubに溺れかけながら世界を創る連載日誌-トゲトゲスカスカウニを岩にするまずは理解を深めていく作戦2 多面体の重ね合わせ達成！！（おまけ）岩のコード

creative

📬 Get AI News Delivered

Browse by Category

Trending Topics

Anthropic Supercharges Creative Workflows by Integrating Claude Directly into Top Industry Software

Analysis

ChatGPT Shines as a Brilliant Tool for Interior Design Inspiration

Analysis

Bootstrapped AI Creative Platform Freepik Rebrands as Magnific, Hits $230M ARR

Analysis

StoryForge: Empowering Creators with a Local LLM Novel-Writing App Co-Created with AI

Analysis

Adobe Firefly AI Assistant Launches Public Beta to Supercharge Creative Workflows

Analysis

Unlock Your Creative Potential: Adobe Creative Cloud Pro is Now 50% Off

Analysis

Revolutionizing Personal Media with Video AI

Analysis

Innovative 'Jesus' Image Generated by the New ChatGPT Showcases AI's Creative Potential

Analysis

Incredible AI Film Generated from a Single Midjourney Image

Analysis

Comfy Secures $30M to Supercharge Open Source Generative AI Tools

Analysis

ChatGPT Delivers Stunning Character Design Improvements

Analysis

Writing a Novel with Codex: The Surprising Parallels Between Fiction and Programming

Analysis

ComfyUI Teases a Massive Update for Open Source Creative AI

Analysis

From a Fried Fish Photo to a Professional Poster: The Magic of ChatGPT Images 2.0

Analysis

LatentGandr: Revolutionizing Creative Design with Intuitive Visual AI Exploration

Analysis

AI Takes a Seat at the Table: How Jia Zhangke and the Film Industry are Excitedly Embracing New Tech

Analysis

Accelerating Creative Intelligence: NVIDIA, Adobe, and WPP Unleash Agentic AI

Analysis

Creating Rocks: A Non-Tech Journey into 3D Generation with Claude and Three.js

Analysis

Fighting AI 'Degradation': A Thrilling Technical Journey of Cross-Reviewing a 140,000-Character Sci-Fi Novel

Analysis

A Heartfelt Tribute: How Claude 4.6 Empowered an Autistic Creator to Organize Two Decades of Visionary Work

Analysis

Exploring 'Club Activity Driven Development': Designing AI Agents with Character and Role Axes

Analysis

AI-Generated Music Reaches Record Highs, Making Up Nearly Half of New Uploads on Streaming Platforms

Analysis

When AI Knows Best: Claude Playfully Advises User to Stop Tweaking Perfect Slides

Analysis

Creative Minds Craft Stunning Animations with Open Source Stable Diffusion

Analysis

Incredible 生成AI Design Achieved in Just Five Minutes

Analysis

An Enthusiastic Journey: 600 Hours of Harnessing the Best Generative AI Tools

Analysis

Embracing AI as a Catalyst for Design Evolution

Analysis

Anthropic Unveils Claude Design: A New AI Tool for Creative Coding and Beyond

Analysis

Exploring the Limits of AI Artistry in Botanical Designs

Analysis

Clock R-AI-dio: The Endless YouTube Stream Where AI Writes Time-Themed Songs 24/7

Analysis

📬 Get AI News Delivered

Browse by Category

Trending Topics