代码语言：html

所属分类：其他

代码由deepseek-v4.1 ai生成，可能有错误，仅供参考：点击查看提示词

代码描述：三维黄昏寺庙微缩沙盘模型

代码标签： three 三维 黄昏 寺庙 微缩 沙盘 模型 代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>盛夏黄昏 · 山间古刹</title>
<style>
  html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: #1c2138; }
  canvas { display: block; }
</style>
</head>
<body>
<script type="importmap">
{
  "imports": {
    "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
    "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
  }
}
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

/* =========================================================
   0. 渲染器 / 场景 / 相机
   ========================================================= */
const renderer = new THREE.WebGLRenderer({ antialias: true, powerPreference: 'high-performance' });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.12;
renderer.outputColorSpace = THREE.SRGBColorSpace;
document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(38, window.innerWidth / window.innerHeight, 0.5, 1400);
camera.position.set(88, 68, 108);

const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 9, 0);
controls.enableDamping = true;
controls.dampingFactor = 0.06;
controls.enablePan = false;
controls.minDistance = 62;
controls.maxDistance = 250;
controls.minPolarAngle = 0.14;
controls.maxPolarAngle = Math.PI * 0.468;
controls.autoRotate = true;
controls.autoRotateSpeed = 0.32;
renderer.domElement.addEventListener('pointerdown', () => { controls.autoRotate = false; }, { once: false });
renderer.domElement.addEventListener('wheel', () => { controls.autoRotate = false; }, { passive: true });

window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

/* =========================================================
   1. 天空 / 光照
   ========================================================= */
function makeSkyTexture() {
  const c = document.createElement('canvas');
  c.width = 16; c.height = 512;
  const ctx = c.getContext('2d');
  const g = ctx.createLinearGradient(0, 0, 0, 512);
  g.addColorStop(0.00, '#1e2748');
  g.addColorStop(0.20, '#3b3a63');
  g.addColorStop(0.40, '#6f5c86');
  g.addColorStop(0.56, '#9c7290');
  g.addColorStop(0.70, '#cf8f83');
  g.addColorStop(0.82, '#efa87c');
  g.addColorStop(0.92, '#f8c79c');
  g.addColorStop(1.00, '#e9a877');
  const t = new THREE.CanvasTexture(c);
  t.colorSpace = THREE.SRGBColorSpace;
  return t;
}
const sky = new THREE.Mesh(
  new THREE.SphereGeometry(520, 32, 24),
  new THREE.MeshBasicMaterial({ map: makeSkyTexture(), side: THREE.BackSide, depthWrite: false })
);
scene.add(sky);

// 半球光——天光
const hemi = new THREE.HemisphereLight(0xa9bede, 0x4a3b32, 1.05);
scene.add(hemi);

// 主光——落日余晖（右前上方）
const sun = new THREE.DirectionalLight(0xffc08a, 2.05);
sun.position.set(78, 62, 66);
sun.castShadow = true;
sun.shadow.mapSize.set(2048, 2048);
sun.shadow.camera.left = -78;
sun.shadow.camera.right = 78;
sun.shadow.camera.top = 78;
sun.shadow.camera.bottom = -78;
sun.shadow.camera.near = 1;
sun.shadow.camera.far = 320;
sun.shadow.bias = -0.0006;
sun.shadow.normalBias = 0.14;
scene.add(sun);
scene.add(sun.target);
sun.target.position.set(0, 0, -6);

// 冷色补光——暮色反光
const rim = new THREE.DirectionalLight(0x7d95cf, 0.85);
rim.position.set(-70, 44, -80);
scene.add(rim);

// 微弱环境
scene.add(new THREE.AmbientLight(0x6b6f92, 0.42));

/* =========================================================
   2. 卡通材质系统
   ========================================================= */
const gradientMap = (() => {
  const data = new Uint8Array([86, 148, 206, 255]);
  const tex = new THREE.DataTexture(data, data.length, 1, THREE.RedFormat);
  tex.needsUpdate = true;
  tex.minFilter = THREE.NearestFilter;
  tex.magFilter = THREE.NearestFilter;
  tex.generateMipmaps = false;
  return tex;
})();

function toon(color, extra = {}) {
  return new THREE.MeshToonMaterial(Object.assign({ color, gradientMap }, extra));
}

const MAT = {
  stone:      toon(0xc4c0b4),
  stoneWarm:  toon(0xb8b0a0),
  stoneBlue:  toon(0x8f959c),
  stoneDark:  toon(0x74777e),
  marble:     toon(0xe6e2d6),
  tile:       too.........完整代码请登录后点击上方下载按钮下载查看

网友评论0

取消

评论提交中...

提交评论