标签：web const BoxBufferGeometry 实践 THREE 学习 Mesh var new

20201303张奕博 2023.1.24

页面结构

Rabbit Craft Go 页面的整体结构如下，其中 canvas.webgl 是用于渲染场景的容器、剩余标签都是一些装饰元素或提示语。

W/↑ A/←S/↓D/→ space

W: 行走 S: 停止 A: 向左转 D: 向右转 空格键: 跳跃

开始

three.js odessey

RABBIT CRAFT GO!

场景初始化 场景初始化过程中，我们引入必需的开发资源，并初始化渲染场景、相机、控制器、光照、页面缩放适配等。其中外部资源的引入，其中 OrbitControls 用于页面镜头缩放及移动控制；TWEEN 和 Animations 用于生成镜头补间动画，也就是刚开始时浮岛由远及近的镜头切换动画中效果；Island、Carrot、Rabbit、Waterfall 等是用来构建三维世界的类。为了使场景更加卡通化，使用了 THREE.sRGBEncoding 渲染效果。场景中添加了两种光源，其中 THREE.DirectionalLight 用来生成阴影效果。

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { TWEEN } from "three/examples/jsm/libs/tween.module.min.js";
import Animations from './environment/animation';
import Island from './environment/island';
import Carrot from './environment/carrot';
import Rabbit from './environment/rabbit';
import Waterfall from './environment/waterfall';

// 初始化渲染器
const canvas = document.querySelector('canvas.webgl');
const renderer = new THREE.WebGLRenderer({
canvas: canvas,
antialias: true,
alpha: true
});
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.shadowMap.enabled = true;
renderer.shadowMap.needsUpdate = true;

// 初始化场景
const scene = new THREE.Scene();

// 初始化相机
const camera = new THREE.PerspectiveCamera(60, sizes.width / sizes.height, 1, 5000)
camera.position.set(-2000, -250, 2000);

// 镜头控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0, 0);
controls.enableDamping = true;
controls.enablePan = false;
controls.dampingFactor = 0.15;

// 页面缩放事件监听
window.addEventListener('resize', () => {
sizes.width = window.innerWidth;
sizes.height = window.innerHeight;
// 更新渲染
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
// 更新相机
camera.aspect = sizes.width / sizes.height;
camera.updateProjectionMatrix();
});

// 光照
const ambientLight = new THREE.AmbientLight(0xffffff, 1);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5);
scene.add(directionalLight);

创建浮岛
如以下

标签：web,const,BoxBufferGeometry,实践,THREE,学习,Mesh,var,new
From： https://www.cnblogs.com/sanfeng-ooo/p/17066236.html