threejs 基础案例之四：点光源，移动光源旋转的小球

 

<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>