const T = api.THREE; api.world({time:"night", sky:"#11132f", haze:"#292447", shadow:"#49355f"}); const ground = new T.Mesh(new T.CircleGeometry(600, 96), api.toon("#304c48")); ground.rotation.x = -Math.PI / 2; ground.position.y = 0.02; api.add(ground, {id:"midnight-ground", describe:"dark moorland beneath the mansion", solid:false}); const parts = []; const add = (name, shape, size, pos, color, extra={}) => parts.push({name, shape, size, pos, color, ...extra}); // The house stands on a rounded, grassy mound. add("hill","sphere",[45,5.4,40],[0,0.15,0],"#43564c"); add("foundation","roundbox",[16.5,0.8,12.5],[0,2.75,0],"#51445e"); add("floor","box",[15.5,0.25,11.5],[0,3.18,0],"#654c63"); // Separate wall sections leave a real doorway. add("back-wall","box",[15,9.5,0.65],[0,7.9,-5.6],"#75647d"); add("left-wall","box",[0.65,9.5,11.5],[-7.2,7.9,0],"#75647d"); add("right-wall","box",[0.65,9.5,11.5],[7.2,7.9,0],"#75647d"); add("front-left","box",[5.9,9.5,0.65],[-4.55,7.9,5.6],"#81708a"); add("front-right","box",[5.9,9.5,0.65],[4.55,7.9,5.6],"#81708a"); add("door-lintel-wall","box",[3.2,6.1,0.65],[0,9.6,5.6],"#81708a"); add("door-left-trim","box",[0.25,3.6,0.3],[-1.55,4.95,6.02],"#3a2230"); add("door-right-trim","box",[0.25,3.6,0.3],[1.55,4.95,6.02],"#3a2230"); add("door-top-trim","box",[3.35,0.3,0.3],[0,6.72,6.02],"#3a2230"); // One open door sits against the interior wall. add("open-door","box",[0.22,3.2,2.7],[-1.35,4.85,4.25],"#503442"); add("door-knob","sphere",[0.18,0.18,0.18],[-1.16,4.75,3.25],"#e6aa52"); for (const x of [-7.15,7.15]) { add("corner-pillar","box",[0.7,10.2,0.7],[x,8,5.65],"#514057"); add("corner-cap","box",[1.1,0.35,1.05],[x,13.05,5.65],"#a58da1"); } add("front-cornice","box",[15.8,0.45,0.9],[0,12.65,5.65],"#423044"); add("back-cornice","box",[15.8,0.45,0.9],[0,12.65,-5.65],"#423044"); add("roof","cone",[18.5,5.1,15.5],[0,15.2,0],"#413347",{rot:[0,45,0]}); add("roof-ridge","box",[9,0.45,0.5],[0,17.35,0],"#33273d"); add("chimney","box",[1.25,4.2,1.25],[-4.7,16.2,-1.5],"#705365"); add("chimney-cap","box",[1.65,0.45,1.65],[-4.7,18.4,-1.5],"#3c2a3f"); add("chimney-opening","box",[0.9,0.12,0.9],[-4.7,18.65,-1.5],"#251d32"); // Two lopsided turret roofs give the silhouette a Victorian flourish. for (const x of [-6.9,6.9]) { add("turret","cylinder",[2.8,4.6,2.8],[x,13.2,4.1],"#6f5b77"); add("turret-band","cylinder",[3.1,0.28,3.1],[x,15.45,4.1],"#b39ba9"); add("turret-roof","cone",[3.9,4.1,3.9],[x,17.55,4.1],"#49334f",{rot:[0,0,x<0?7:-7]}); add("turret-finial","sphere",[0.38,0.55,0.38],[x+(x<0?-0.22:0.22),19.7,4.1],"#e3b862"); } // Glowing, divided windows, framed in thick ink-dark wood. for (const x of [-4.55,4.55]) for (const y of [5.55,9.8]) { add("window-frame","roundbox",[2.55,3.0,0.25],[x,y,5.98],"#372b43"); add("window-glass","box",[2.1,2.55,0.12],[x,y,6.14],"#e4b77c",{glow:true}); add("window-mullion","box",[0.15,2.55,0.16],[x,y,6.25],"#493346"); add("window-crossbar","box",[2.12,0.16,0.16],[x,y,6.25],"#493346"); add("window-sill","box",[2.8,0.22,0.5],[x,y-1.55,6.15],"#ae97a8"); } for (const side of [-1,1]) for (const z of [-2.8,1.5]) for (const y of [5.6,9.8]) { add("side-window-frame","roundbox",[0.24,2.8,2.35],[side*7.55,y,z],"#382a42"); add("side-window-glass","box",[0.14,2.35,1.95],[side*7.7,y,z],"#e2b681",{glow:true}); add("side-window-bar","box",[0.18,2.35,0.14],[side*7.8,y,z],"#493346"); add("side-window-cross","box",[0.18,0.15,1.95],[side*7.8,y,z],"#493346"); } // A gently rising run of broad stone steps climbs the hill. for (let i=0;i<12;i++) { const z=17.2-i*0.93; const top=0.35+i*0.24; add("front-step","box",[4.2,top,1.05],[0,top/2+0.04,z],"#8e7a89"); add("step-edge","box",[4.25,0.1,0.1],[0,top+0.08,z+0.49],"#c0a7aa"); } add("porch","box",[5.1,0.3,2.1],[0,3.05,6.65],"#9c8993"); for (const x of [-2.4,2.4]) { add("porch-post","box",[0.3,3.8,0.3],[x,5.15,7.35],"#4c374c"); add("porch-post-cap","sphere",[0.48,0.48,0.48],[x,7.05,7.35],"#d7b77c"); } add("porch-canopy","box",[5.8,0.35,2.7],[0,7.2,6.8],"#473347"); add("porch-roof","cone",[6.8,1.8,3.8],[0,8.2,6.8],"#493650",{rot:[0,45,0]}); const mansion = api.build({parts}); api.place(mansion, {where:"ahead", distance:42}, { id:"victorian-mansion", describe:"a spooky Victorian mansion on a grassy hill with an open doorway and stone steps" }); mansion.updateMatrixWorld(true); // All the surrounding decorations use the mansion's local coordinates. function worldPoint(x,y,z) { return mansion.localToWorld(new T.Vector3(x,y,z)); } function addLocal(group, id, describe, solid=false) { group.position.copy(mansion.position); group.quaternion.copy(mansion.quaternion); api.add(group,{id,describe,solid}); } const fenceParts=[]; function fp(name,shape,size,pos,color,extra={}) { fenceParts.push({name,shape,size,pos,color,...extra}); } // Broken-looking iron rails leave a wide opening in front of the stairs. for (const side of [-1,1]) { for(let i=0;i<7;i++) { const x=side*(4.3+i*1.75); const tilt=(i%3-1)*7*side; fp("crooked-fence-post","box",[0.18,2.1,0.18],[x,1.75,15],"#3a293c",{rot:[0,0,tilt]}); fp("fence-spear","cone",[0.4,0.5,0.4],[x,2.95,15],"#705568"); if(i<6) { fp("upper-rail","box",[1.8,0.14,0.13],[x+side*0.87,2.25,15],"#3a293c",{rot:[0,0,(i%2?4:-4)]}); fp("lower-rail","box",[1.8,0.14,0.13],[x+side*0.87,1.25,15],"#3a293c",{rot:[0,0,(i%2?-4:4)]}); } } for(let i=0;i<8;i++) { const z=13-i*2.4; fp("side-fence-post","box",[0.18,2.0,0.18],[side*15.8,1.8,z],"#3a293c",{rot:[(i%3-1)*6,0,side*5]}); fp("side-spear","cone",[0.4,0.48,0.4],[side*15.8,2.95,z],"#705568"); if(i<7) for(const y of [1.35,2.25]) fp("side-rail","box",[0.14,0.14,2.5],[side*15.8,y,z-1.2],"#3a293c",{rot:[(i%2?3:-3),0,0]}); } } addLocal(api.build({parts:fenceParts}),"crooked-iron-fence","a crooked iron fence around the mansion"); // Twisted trees are made from branching, tapered tubes. const treeParts=[]; function tube(name, base, points, radius, color) { treeParts.push({name,shape:"tube",pos:base,points,radius,taper:0.35,color}); } const trees=[[-19,0,9],[19,0,8],[-20,0,-8],[19,0,-11],[-13,0,18],[13,0,19]]; trees.forEach(([x,y,z],idx)=>{ const h=idx%2?1.1:1; tube("twisted-trunk",[x,0,z],[[0,0,0],[0.2,1.5*h,0],[-0.55,3*h,0.2],[0.25,4.6*h,0],[0.0,6*h,0.15],[0.65,7.8*h,0]],0.55,"#554052"); tube("branch",[x,0,z],[[-0.2,2.8*h,0],[-1.5,4*h,0.2],[-2.5,4.3*h,0.3],[-3.1,5.4*h,0.4]],0.27,"#554052"); tube("branch",[x,0,z],[[0.1,4*h,0],[1.5,4.8*h,-0.2],[2.3,5*h,-0.4],[3.1,6.1*h,-0.4]],0.25,"#554052"); tube("branch",[x,0,z],[[0.1,5*h,0],[-0.7,6.2*h,0.7],[-1.8,6.9*h,1.1]],0.2,"#554052"); tube("twig",[x,0,z],[[-1.7,4.1*h,0.2],[-2.0,5.3*h,0.6],[-2.4,5.8*h,0.8]],0.12,"#554052"); tube("twig",[x,0,z],[[1.6,4.9*h,-0.2],[1.9,6.1*h,-0.6],[1.5,6.8*h,-0.8]],0.12,"#554052"); tube("root",[x,0,z],[[0,0.3,0],[-0.8,0.15,0.4],[-1.6,0.08,0.65]],0.27,"#554052"); tube("root",[x,0,z],[[0,0.3,0],[0.8,0.14,-0.3],[1.5,0.08,-0.65]],0.27,"#554052"); }); addLocal(api.build({parts:treeParts}),"bare-twisted-trees","bare twisted trees surrounding the hill"); // Jack-o'-lanterns: ridged pumpkins, bright triangular eyes and crooked grins. const lanterns = new T.Group(); const orange=api.toon("#ef8a3c"), gold=api.toon("#ffcf64",{glow:true}); const stem=api.toon("#69804b"); function triangle(x,y,z,scale,flip=false) { const s=new T.Shape(); s.moveTo(-0.15*scale,-0.1*scale); s.lineTo(0.15*scale,-0.1*scale); s.lineTo(0,0.16*scale); s.closePath(); const m=new T.Mesh(new T.ShapeGeometry(s),gold); m.position.set(x,y,z); if(flip) m.rotation.z=Math.PI; return m; } for(let i=0;i<4;i++) { const side=i%2?-1:1; const z=i<2?14.7:9.7; const y=i<2?1.15:2.48; const x=side*2.75; const g=new T.Group(); g.position.set(x,y,z); const body=new T.Mesh(new T.SphereGeometry(0.52,16,12),orange); body.scale.set(1,0.8,0.78); g.add(body); for(const dx of [-0.28,0.28]) { const lobe=new T.Mesh(new T.SphereGeometry(0.34,12,10),orange); lobe.scale.set(0.85,1.05,0.95); lobe.position.set(dx,0,0); g.add(lobe); } const st=new T.Mesh(new T.CylinderGeometry(0.07,0.12,0.28,8),stem); st.position.set(0,0.46,0); st.rotation.z=0.23; g.add(st); g.add(triangle(-0.19,0.08,0.405,0.8),triangle(0.19,0.08,0.405,0.8)); const mouth=new T.Mesh(new T.BoxGeometry(0.48,0.075,0.035),gold); mouth.position.set(0,-0.18,0.4); mouth.rotation.z=side*0.08; g.add(mouth); g.add(triangle(0,-0.11,0.43,0.45,true)); lanterns.add(g); } addLocal(lanterns,"step-jack-o-lanterns","glowing jack-o'-lanterns on the mansion steps"); // A full moon hangs high beyond the house. const moon=api.build({parts:[ {name:"full-moon",shape:"sphere",size:[36,36,36],pos:[0,0,0],color:"#f5e4b3",glow:true}, {name:"moon-mark",shape:"sphere",size:[6,5,0.3],pos:[-7,5,17.9],color:"#ddcbb1"}, {name:"moon-mark",shape:"sphere",size:[4,3,0.3],pos:[6,-5,18],color:"#ddcbb1"} ]}); api.place(moon,{where:"sky",distance:190,height:92,side:-45}, {id:"full-moon",describe:"a huge full moon in the midnight sky",solid:false}); // A dusting of stars, positioned relative to the viewer's current view. const stars=new T.Group(); const starMat=api.toon("#e4d8bd",{glow:true}); for(let i=0;i<70;i++) { const a=i*2.39996, r=140+(i%7)*16; const s=new T.Mesh(new T.SphereGeometry(0.35+(i%3)*0.13,6,5),starMat); s.position.set(Math.cos(a)*r,50+(i*17)%115,Math.sin(a)*r); stars.add(s); } stars.position.set(api.player.x,0,api.player.z); api.add(stars,{id:"midnight-stars",describe:"a scattering of stars",solid:false}); // Friendly ghosts drift through the front windows and back again. const ghosts=[]; for(let i=0;i<4;i++) { const ghost=api.build({parts:[ {name:"ghost-body",shape:"sphere",size:[1.2,1.65,0.8],pos:[0,0,0],color:"#d9e9df"}, {name:"ghost-hem",shape:"sphere",size:[0.52,0.55,0.65],pos:[-0.37,-0.65,0],color:"#d9e9df"}, {name:"ghost-hem",shape:"sphere",size:[0.52,0.6,0.65],pos:[0.04,-0.69,0],color:"#d9e9df"}, {name:"ghost-hem",shape:"sphere",size:[0.52,0.5,0.65],pos:[0.4,-0.64,0],color:"#d9e9df"}, {name:"ghost-arm",shape:"capsule",size:[0.22,0.8,0.22],pos:[-0.69,-0.02,0],rot:[0,0,-55],color:"#d9e9df"}, {name:"ghost-arm",shape:"capsule",size:[0.22,0.8,0.22],pos:[0.69,0.1,0],rot:[0,0,55],color:"#d9e9df"}, {name:"eye-left",shape:"eye",size:[0.26,0.3,0.16],pos:[-0.23,0.23,0.38],color:"#ffffff"}, {name:"eye-right",shape:"eye",size:[0.3,0.34,0.16],pos:[0.23,0.24,0.38],color:"#ffffff"}, {name:"smile",shape:"tube",pos:[0,-0.14,0.42],points:[[-0.18,0.04,0],[0,-0.05,0],[0.18,0.04,0]],radius:0.035,color:"#574054"} ]}); api.add(ghost,{id:"friendly-ghost-"+(i+1),describe:"a friendly ghost drifting out of a mansion window",solid:false}); ghosts.push(ghost); } // Little bats orbit the mansion with flapping wings. const bats=[]; for(let i=0;i<7;i++) { const bat=api.build({parts:[ {name:"body",shape:"sphere",size:[0.48,0.4,0.65],pos:[0,0,0],color:"#392a4c"}, {name:"head",shape:"sphere",size:[0.4,0.38,0.36],pos:[0,0.09,0.34],color:"#493354"}, {name:"ear",shape:"cone",size:[0.15,0.25,0.15],pos:[-0.12,0.31,0.3],color:"#493354",mirror:true}, {name:"eye",shape:"eye",size:[0.1,0.12,0.08],pos:[-0.1,0.13,0.52],color:"#ffffff",mirror:true}, {name:"wingL",shape:"wing",size:[1.0,0.55,0.09],pos:[0.2,0,0],anchor:"left",color:"#4b355b"}, {name:"wingR",shape:"wing",size:[1.0,0.55,0.09],pos:[-0.2,0,0],anchor:"left",rot:[0,180,0],color:"#4b355b"} ]}); api.add(bat,{id:"circling-bat-"+(i+1),describe:"a little bat circling the mansion",solid:false}); bats.push(bat); } api.onFrame((dt,t)=>{ ghosts.forEach((g,i)=>{ const x=i%2===0?-4.55:4.55; const y=i<2?5.6:9.8; const drift=(Math.sin(t*0.38+i*1.4)+1)*0.5; g.position.copy(worldPoint(x,y+0.18*Math.sin(t*1.4+i),5.75+drift*3.6)); g.quaternion.copy(mansion.quaternion); g.rotation.z=0.08*Math.sin(t*1.7+i); }); bats.forEach((b,i)=>{ const a=t*0.29+i*Math.PI*2/bats.length; b.position.copy(worldPoint(Math.cos(a)*13,15.5+2*Math.sin(a*2+i),Math.sin(a)*10)); b.quaternion.copy(mansion.quaternion); b.rotateY(-a); const l=b.getObjectByName("wingL"), r=b.getObjectByName("wingR"); if(l) l.rotation.z=0.65*Math.sin(t*10+i); if(r) r.rotation.z=-0.65*Math.sin(t*10+i); }); }); api.say="I built a moonlit Victorian mansion on a hill, with crooked fences, glowing pumpkins, circling bats and friendly ghosts drifting from its windows."; api.suggest=[ "Add a haunted garden behind the mansion", "Make a foggy path across the moor", "Put a friendly vampire on the porch", "Add a spooky thunderstorm" ];