代码语言：html

所属分类：其他

代码由qwen-3.8-max ai生成，可能有错误，仅供参考：点击查看提示词

代码描述：三维海边便利店场景

代码标签： three 三维 海边 便利店 场景 代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>盛夏黄昏 · 海边便利店街角微缩场景</title>
<style>
  html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#1c1830;}
  canvas{display:block;}
</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
<script>
/* ================================================================
   盛夏黄昏 · 海边便利店街角 —— 展示级树脂微缩景观
   三渲二卡通渲染 / 第三人称环绕 / 无 UI
================================================================ */
const scene = new THREE.Scene();
scene.fog = new THREE.Fog(0xc4939a, 150, 360);

const camera = new THREE.PerspectiveCamera(38, innerWidth/innerHeight, 0.1, 600);
camera.position.set(42, 27, 48);

const renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(innerWidth, innerHeight);
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.outputEncoding = THREE.sRGBEncoding;
document.body.appendChild(renderer.domElement);

const ctrl = new THREE.OrbitControls(camera, renderer.domElement);
ctrl.target.set(0, 2.6, 0);
ctrl.enableDamping = true; ctrl.dampingFactor = 0.06;
ctrl.minDistance = 24; ctrl.maxDistance = 120;
ctrl.maxPolarAngle = Math.PI * 0.495;
ctrl.enablePan = false;
ctrl.autoRotate = true; ctrl.autoRotateSpeed = 0.45;

/* ---------------- 卡通渐变贴图 ---------------- */
const grad = (()=>{
  const d = new Uint8Array([78,78,78,255, 148,148,148,255, 212,212,212,255, 255,255,255,255]);
  const t = new THREE.DataTexture(d, 4, 1, THREE.RGBAFormat);
  t.needsUpdate = true; t.minFilter = t.magFilter = THREE.NearestFilter;
  return t;
})();
const OL = new THREE.MeshBasicMaterial({color:0x2b2740, side:THREE.BackSide}); // 描边壳
const matCache = {};
function toon(color, opt){
  if(!opt){ const k = color; return matCache[k] || (matCache[k] = new THREE.MeshToonMaterial({color, gradientMap:grad})); }
  return new THREE.MeshToonMaterial(Object.assign({color, gradientMap:grad}, opt));
}
function addBox(p,w,h,d,x,y,z,color,opt={}){
  const m = new THREE.Mesh(new THREE.BoxGeometry(w,h,d), opt.mat || toon(color, opt.toon));
  m.position.set(x,y,z);
  if(opt.rot) m.rotation.set(opt.rot[0],opt.rot[1],opt.rot[2]);
  m.castShadow = opt.cs !== false && Math.max(w,h,d) > 0.4;
  m.receiveShadow = opt.rs !== false && Math.max(w,h,d) > 0.8;
  p.add(m);
  if(opt.ol !== false && Math.max(w,h,d) >= 0.9 && !(opt.mat && opt.mat.transparent) && !opt.noOL){
    const e = opt.e || 0.07;
    const o = new THREE.Mesh(new THREE.BoxGeometry(w+e,h+e,d+e), OL);
    o.position.copy(m.position); o.rotation.copy(m.rotation);
    p.add(o);
  }
  return m;
}
function addCyl(p,rt,rb,h,seg,x,y,z,color,opt={}){
  const m = new THREE.Mesh(new THREE.CylinderGeometry(rt,rb,h,seg), opt.mat || toon(color, opt.toon));
  m.position.set(x,y,z);
  if(opt.rot) m.rotation.set(opt.rot[0],opt.rot[1],opt.rot[2]);
  m.castShadow = opt.cs !== false && Math.max(rt*2,h) > 0.4;
  m.receiveShadow = false;
  p.add(m);
  if(opt.ol !== false && Math.max(rt*2,h) >= 1.1 && !(opt.mat && opt.mat.transparent)){
    const e = opt.e || 0.06;
    const o = new THREE.Mesh(new THREE.CylinderGeometry(rt+e,rb+e,h+e,seg), OL);
    o.position.copy(m.position); o.rotation.copy(m.rotation);
    p.add(o);
  }
  return m;
}
function addPlane(p,w,h,x,y,z,mat,rot){
  const m = new THREE.Mesh(new THREE.PlaneGeometry(w,h), mat);
  m.position.set(x,y,z);
  if(rot) m.rotation.set(rot[0],rot[1],rot[2]);
  p.add(m); return m;
}
function canvasTex(w,h,fn){
  const c = document.createElement('canvas'); c.width=w; c.height=h;
  const g = c.getContext('2d'); fn(g,w,h);
  const t = new THREE.CanvasTexture(c); t.anisotropy = 4; return t;
}
const glassMat = new THREE.MeshPhongMaterial({color:0xc4e2ee, transparent:true, opacity:0.20, shininess:140, specular:0xffffff, side:THREE.DoubleSide, depthWrite:false});
const glow = (c)=> new THREE.MeshBasicMaterial({color:c});
const anims = [];   // 动画回调
const PROD = [0xe8654f,0x4f9de8,0xe8b64f,0x5fc98a,0xb56fe8,0xe87fb0,0xf2efe4,0x6fd3d3];

/* ================= 天空 · 晚霞 ================= */
(function sky(){
  const tex = canvasTex(32, 512, (g,w,h)=>{
    const gr = g.createLinearGradient(0,0,0,h);
    gr.addColorStop(0.00,'#252b56');
    gr.addColorStop(0.22,'#41528a');
    gr.addColorStop(0.42,'#7d92b8');
    gr.addColorStop(0.54,'#c9a2b4');
    gr.addColorStop(0.64,'#f2a488');
    gr.addColorStop(0.73,'#ffc37e');
    gr.addColorStop(0.84,'#ffdfa6');
    gr.addColorStop(1.00,'#ffd9a0');
    g.fillStyle=gr; g.fillRect(0,0,w,h);
  });
  const s = new THREE.Mesh(new THREE.SphereGeometry(230, 32, 24),
    new THREE.MeshBasicMaterial({map:tex, side:THREE.BackSide, fog:false}));
  scene.add(s);
  // 落日光晕与日轮
  const gt = canvasTex(256,256,(g,w,h)=>{
    const gr = g.createRadialGradient(128,128,4,128,128,126);
    gr.addColorStop(0,'rgba(255,250,232,1)');
    gr.addColorStop(0.22,'rgba(255,206,140,0.85)');
    gr.addColorStop(0.55,'rgba(255,150,110,0.32)');
    gr.addColorStop(1,'rgba(255,140,110,0)');
    g.fillStyle=gr; g.fillRect(0,0,w,h);
  });
  const halo = new THREE.Sprite(new THREE.SpriteMaterial({map:gt, fog:false, depthWrite:false, transparent:true}));
  halo.position.set(6, 6.5, 195); halo.scale.set(110,110,1); sc.........完整代码请登录后点击上方下载按钮下载查看

网友评论0

取消

评论提交中...

提交评论