three.js普通地面视角

<template>
	<div id="webgl"></div>
</template>

<script setup lang="ts" name="index">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

//scene
let scene = new THREE.Scene();

//grid
let grid = new THREE.GridHelper(20, 40, 0xffffff, 0xffffff);
grid.material.opacity = 0.2;
grid.material.depthWrite = false;
grid.material.transparent = true;
scene.add(grid);

//lights
let ambientLight = new THREE.AmbientLight(0xf1f1f1);
scene.add(ambientLight);

//earth
function texture() {
	let earthGeometry = new THREE.SphereGeometry(0.5, 50, 50);
	let textureLoader = new THREE.TextureLoader();
	let texture = textureLoader.load('images/earth.jpg');
	let material = new THREE.MeshLambertMaterial({ map: texture, });
	let earth = new THREE.Mesh(earthGeometry, material);
	earth.position.set(0,0.5,0);
	scene.add(earth);
}  // 普通贴图
texture();

//camera
let camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 0.1, 100 );
camera.position.set( 4.25, 1.4, - 4.5 );

// dom and render
let renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

//orbit Controls
let controls = new OrbitControls(camera, renderer.domElement);
controls.maxDistance = 9;
controls.maxPolarAngle = THREE.MathUtils.degToRad(90);
controls.target.set(0, 0.5, 0);
controls.update();

//render loop
let render = function () {
	renderer.render(scene, camera);
	requestAnimationFrame(render);
};
render();
</script>

<style scoped></style>