Threejs之PointLight 【光点围绕物体360°转】
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
45,
window.innerWidth / window.innerHeight,
1,
1000
);
camera.position.set(-3, 0, 20);
scene.add(camera);
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
const geometry = new THREE.SphereGeometry(1);
const material = new THREE.MeshStandardMaterial();
const sphere = new THREE.Mesh( geometry, material );
sphere.castShadow = true
scene.add(sphere)
const planeGeometry = new THREE.PlaneGeometry( 20, 20 );
const plane = new THREE.Mesh( planeGeometry, material );
plane.position.set(0, -1, 0)
plane.rotation.x = -Math.PI / 2;
plane.receiveShadow = true;
scene.add( plane );
const light = new THREE.AmbientLight( 0xffffff,0.5 );
scene.add( light );
const smallBox = new THREE.Mesh(
new THREE.SphereGeometry(0.1),
new THREE.MeshBasicMaterial({color: 0xff0000})
)
smallBox.position.set(0,2,4)
const pointLight = new THREE.PointLight( 0xff0000, 0.5 );
pointLight.castShadow = true
smallBox.add(pointLight)
scene.add( smallBox );
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true
document.body.appendChild(renderer.domElement);
const controls = new OrbitControls(camera, renderer.domElement);
const clock = new THREE.Clock()
controls.update();
function animate() {
let time = clock.getElapsedTime();
smallBox.position.z = Math.sin(time) * 3
smallBox.position.x = Math.cos(time) * 5
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}
animate();
window.addEventListener("resize", () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
});