<template>
<div>
</div>
</template>
<script setup>
import * as THREE from "three"
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls"
import Dat from "dat.gui"
import { ref } from 'vue'
//场景
const scene=new THREE.Scene()
//相机
const camara=new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000)
camara.position.set(10,10,10)
//平面
const plane=new THREE.Mesh(
new THREE.PlaneGeometry(10,10,1,1),
new THREE.MeshStandardMaterial()
)
plane.position.set(0,-1,0)
plane.rotation.x=-Math.PI/2
plane.receiveShadow=true
//几何体
const sphere=new THREE.Mesh(
new THREE.SphereGeometry(1),
new THREE.MeshStandardMaterial({})
)
sphere.castShadow=true
//几何体辅助器
const axesHelper=new THREE.AxesHelper(5)
//环境光
// const amLight=new THREE.AmbientLight("#fff",0.2)
//点光源
const dotLight=new THREE.PointLight("#f16b8c",1,100)
dotLight.position.set(3,3,3,)
dotLight.castShadow=true
dotLight.shadow.radius=20;
dotLight.shadow.mapSize.set(2048, 2048);
dotLight.decay=2
//光源辅助器
const pointLightHelper =new THREE.PointLightHelper(dotLight,1)
//小球
const smallBall=new THREE.Mesh(
new THREE.SphereGeometry(0.1,20,20),
new THREE.MeshBasicMaterial({color:"#f00"})
)
smallBall.position.set(3,3,3,)
//gui
const gui=new Dat.GUI
gui.add(dotLight,"decay").min(0).max(5).step(0.1)
//渲染器
const renderer=new THREE.WebGLRenderer()
renderer.shadowMap.enabled=true
document.body.appendChild(renderer.domElement)
//控制器
const control=new OrbitControls(camara,renderer.domElement)
scene.add(plane)
scene.add(sphere)
// scene.add(amLight)
smallBall.add(dotLight)
// scene.add(dotLight)
scene.add(smallBall)
scene.add(axesHelper)
// scene.add(pointLightHelper)
//时钟
const clock=new THREE.Clock()
//渲染函数
const render=()=>{
let time= clock.getElapsedTime()
smallBall.position.x=Math.sin(time)*3;
smallBall.position.z=Math.cos(time)*3;
renderer.render(scene,camara)
control.update()
camara.updateProjectionMatrix()
renderer.shadowMap.enabled=true
// renderer.setPixelRatio(window.innerWidth,window.innerHeight)
renderer.setSize(window.innerWidth,window.innerHeight)
requestAnimationFrame(render)
}
render()
</script>
<style scoped>
.a{
background: #f16b8c;
}
</style>