代码语言：html

所属分类：其他

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

代码描述：三维雨夜便利店建筑场景

代码标签： three 三维 雨夜 便利店 建筑 场景 代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>雨夜便利店街角微缩模型</title>
<style>
  html,body{margin:0;padding:0;overflow:hidden;background:#05060a;height:100%;}
  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';
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
import { Reflector } from 'three/addons/objects/Reflector.js';

/* ========================= 基础设置 ========================= */
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x060810);
scene.fog = new THREE.FogExp2(0x070912, 0.032);

const camera = new THREE.PerspectiveCamera(38, innerWidth/innerHeight, 0.1, 120);
camera.position.set(11, 9.5, 14);

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

const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(-0.5, 2.0, 0.5);
controls.enableDamping = true;
controls.dampingFactor = 0.08;
controls.minDistance = 6;
controls.maxDistance = 30;
controls.maxPolarAngle = Math.PI/2 - 0.03;
controls.update();

const renderScene = new RenderPass(scene, camera);
const bloomPass = new UnrealBloomPass(new THREE.Vector2(innerWidth, innerHeight), 0.85, 0.65, 0.18);
const composer = new EffectComposer(renderer);
composer.addPass(renderScene);
composer.addPass(bloomPass);

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

/* ========================= 灯光 ========================= */
const hemi = new THREE.HemisphereLight(0x3c4f78, 0x07080c, 0.55);
scene.add(hemi);
const amb = new THREE.AmbientLight(0x404356, 0.35);
scene.add(amb);
const moon = new THREE.DirectionalLight(0x8fa7d6, 0.4);
moon.position.set(-7, 11, -5);
moon.castShadow = true;
moon.shadow.mapSize.set(1536,1536);
moon.shadow.camera.left = -13; moon.shadow.camera.right = 13;
moon.shadow.camera.top = 13; moon.shadow.camera.bottom = -13;
moon.shadow.camera.near = 0.5; moon.shadow.camera.far = 30;
moon.shadow.bias = -0.0015;
scene.add(moon);

/* ========================= 工具函数 ========================= */
function makeToonGradient(){
  const c = document.createE.........完整代码请登录后点击上方下载按钮下载查看

网友评论0

取消

评论提交中...

提交评论