spotlight (bulb)
key code:
//Linear light (the light emitted by the light source)
// const directionalLight = new THREE.DirectionalLight(0xFFFFFF, 0.7);
// directionalLight.position.set(10, 10, 10);
// scene.add(directionalLight);
const directionalLight = new THREE.SpotLight(0xFFFFFF, 0.7);
directionalLight.position.set(10, 10, 10);
scene.add(directionalLight);
Full code:
<template>
<div id="three_div"></div>
</template><script>
import * as dat from 'dat.gui' //interface control
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; import { RGBELoader } from "three /examples/jsm/loaders/RGBELoader" export default { name: "HOME", components: { // vueQr, // glHome, }, data() { return {}; }, mounted() { // use the controller Control 3D drag and rotate OrbitControls //Control the movement of 3D objects
//1. Create a scene
const scene = new THREE.Scene();
console.log(scene);//2. Create camera
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
//Set camera position
camera.position.set(0, 0, 10);
//Set Add the camera to the scene
scene.add(camera);
//Add an object
//Create a ball with a radius of 1 and a segmented digit of latitude and longitude of 20
const cubeGeometry = new THREE.SphereBufferGeometry(2, 100, 100);
//Texture loader Load image
const cubeMaterial = new THREE.MeshStandardMaterial({ //side: THREE.DoubleSide, });
//Create objects based on geometry and materials
const mesh = new THREE.Mesh(cubeGeometry, cubeMaterial);
//Add objects to the scene
scene.add(mesh);//Create a plane geometry
const planeGeometry = new THREE.PlaneBufferGeometry(50, 50);
//Create a plane object
const planeMesh = new THREE.Mesh(planeGeometry, cubeMaterial);
planeMesh.position.set(0, -2, 0);
planeMesh.rotation.x = -Math.PI / 2;
//Scene add plane object
scene.add(planeMesh);//Add the default environment map to all objects in the scene
//Add the coordinate axis helper
const axesHepler = new THREE.AxesHelper(5);
scene.add(axesHepler);
//Standard materials need the help of lights//Add ambient light (light emitted by objects) parameters (light color, intensity 0-1)
const light = new THREE.AmbientLight(0xFFFFFF, 0.7);
scene.add(light);
//Linear light (by light source Light emitted)
// const directionalLight = new THREE.DirectionalLight(0xFFFFFF, 0.7);
// directionalLight.position.set(10, 10, 10);
// scene.add(directionalLight);
const directionalLight = new THREE.SpotLight (0xFFFFFF, 0.7);
directionalLight.position.set(10, 10, 10);
scene.add(directionalLight);// scene.add(mesh2);
//Initialize the renderer
const render = new THREE.WebGLRenderer();
//Set the size of the renderer
render.setSize(window.innerWidth, window.innerHeight);
//Use the renderer, Render the scene through the camera//Create an orbit controller that can be dragged to control the camera
const controls = new OrbitControls(camera, render.domElement);
//Set control damping to make the controller have a more realistic effect
controls.enableDamping = true;
//Enable projection
//Enable renderer projection
render.shadowMap.enabled = true;
//Enable light dynamic projection
directionalLight.castShadow = true;
//Enable object projection
mesh.castShadow = true;
//Enable plane accept projection
planeMesh.receiveShadow = true;
//projection blur
directionalLight.shadow.radius = 20;
//set the width and height of the projection
//directionalLight.shadow.mapSize.set(1024, 1024);//Properties of parallel light projection camera
// directionalLight.shadow.camera.near= 0.5;
// directionalLight.shadow.camera.far= 500;
// directionalLight.shadow.camera.top= 3;
// directionalLight.shadow. camera.bottom= -2;
// directionalLight.shadow.camera.left= -2;
// directionalLight.shadow.camera.right= 2;
// create gui
const gui = new dat.GUI();
// gui. add(directionalLight.shadow.camera, 'near').min(1).max(25).step(1).name("Camera near distance").onChange( () => { // directionalLight.shadow . camera. updateProjectionMatrix(); // })
gui.add(mesh.position, 'x').min(-30).max(30).step(1).name("Move position"); //
Add the canvas content rendered by webgl to the body
document .getElementById("three_div").appendChild(render.domElement);//The callback function will be called when the next frame is rendered
let renderFun = () => { //Update the damping data controls.update(); //Need to redraw the canvas render.render(scene, camera); // Monitor screen refresh (60HZ, 120HZ), each refresh triggers a requestAnimationFrame callback function //But the callback function registration life of requestAnimationFrame is only once, so it needs to be registered in a loop to achieve the effect of always calling window.requestAnimationFrame(renderFun); }; / / window.requestAnimationFrame(renderFun); renderFun();//画布全屏
window.addEventListener("dblclick", () => {
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
//document.documentElement.requestFullscreen();
render.domElement.requestFullscreen();
}
});//Monitor screen changes, update the rendered screen, (adaptive size)
window.addEventListener("resize", () => { //Update the aspect ratio of the camera camera.aspect = window.innerWidth / window.innerHeight; / /Update the camera's projection matrix camera.updateProjectionMatrix(); //Update the width and height of the renderer render.setSize(window.innerWidth, window.innerHeight); //Set the pixel ratio of the renderer render.setPixelRatio(window.devicePixelRatio); console.log("The screen has changed"); }); }, methods: { pause(animate) { animate.pause(); },
},
};
</script><style scoped lang="scss">
</style>
Renderings:
The light moves as the object moves
key code:
//The light moves as the object moves
directionalLight.target = mesh;
Full code:
<template>
<div id="three_div"></div>
</template><script>
import * as dat from 'dat.gui' //interface control
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; import { RGBELoader } from "three /examples/jsm/loaders/RGBELoader" export default { name: "HOME", components: { // vueQr, // glHome, }, data() { return {}; }, mounted() { // use the controller Control 3D drag and rotate OrbitControls //Control the movement of 3D objects
//1. Create a scene
const scene = new THREE.Scene();
console.log(scene);//2. Create camera
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
//Set camera position
camera.position.set(0, 0, 10);
//Set Add the camera to the scene
scene.add(camera);
//Add an object
//Create a ball with a radius of 1 and a segmented digit of latitude and longitude of 20
const cubeGeometry = new THREE.SphereBufferGeometry(2, 100, 100);
//Texture loader Load image
const cubeMaterial = new THREE.MeshStandardMaterial({ //side: THREE.DoubleSide, });
//Create objects based on geometry and materials
const mesh = new THREE.Mesh(cubeGeometry, cubeMaterial);
//Add objects to the scene
scene.add(mesh);//Create a plane geometry
const planeGeometry = new THREE.PlaneBufferGeometry(50, 50);
//Create a plane object
const planeMesh = new THREE.Mesh(planeGeometry, cubeMaterial);
planeMesh.position.set(0, -2, 0);
planeMesh.rotation.x = -Math.PI / 2;
//Scene add plane object
scene.add(planeMesh);//Add the default environment map to all objects in the scene
//Add the coordinate axis helper
const axesHepler = new THREE.AxesHelper(5);
scene.add(axesHepler);
//Standard materials need the help of lights//Add ambient light (light emitted by objects) parameters (light color, intensity 0-1)
const light = new THREE.AmbientLight(0xFFFFFF, 0.7);
scene.add(light);
//Linear light (by light source Light emitted)
// const directionalLight = new THREE.DirectionalLight(0xFFFFFF, 0.7);
// directionalLight.position.set(10, 10, 10);
// scene.add(directionalLight);
const directionalLight = new THREE.SpotLight (0xFFFFFF, 0.7);
directionalLight.position.set(10, 10, 10);
scene.add(directionalLight);// scene.add(mesh2);
//Initialize the renderer
const render = new THREE.WebGLRenderer();
//Set the size of the renderer
render.setSize(window.innerWidth, window.innerHeight);
//Use the renderer, Render the scene through the camera//Create an orbit controller that can be dragged to control the camera
const controls = new OrbitControls(camera, render.domElement);
//Set control damping to make the controller have a more realistic effect
controls.enableDamping = true;
//Enable projection
//Enable renderer projection
render.shadowMap.enabled = true;
//Enable light dynamic projection
directionalLight.castShadow = true;
//Enable object projection
mesh.castShadow = true;
//Enable plane accept projection
planeMesh.receiveShadow = true;
//projection blur
directionalLight.shadow.radius = 10;
//set the width and height of the projection
//directionalLight.shadow.mapSize.set(1024, 1024);//Properties of parallel light projection camera
// directionalLight.shadow.camera.near= 0.5;
// directionalLight.shadow.camera.far= 500;
// directionalLight.shadow.camera.top= 3;
// directionalLight.shadow. camera.bottom= -2;
// directionalLight.shadow.camera.left= -2;
// directionalLight.shadow.camera.right= 2;
//The light moves as the object moves
directionalLight.target = mesh;
//Create gui
const gui = new dat.GUI();
// gui.add(directionalLight.shadow.camera, 'near').min(1).max(25).step(1).name("Camera near distance") .onChange( () => { // directionalLight.shadow.camera.updateProjectionMatrix();
// })
gui.add(mesh.position, 'x').min(-30).max(30).step(1).name("Move position"); //
Add the canvas content rendered by webgl Go to the body
document.getElementById("three_div").appendChild(render.domElement);//The callback function will be called when the next frame is rendered
let renderFun = () => { //Update the damping data controls.update(); //Need to redraw the canvas render.render(scene, camera); // Monitor screen refresh (60HZ, 120HZ), each refresh triggers a requestAnimationFrame callback function //But the callback function registration life of requestAnimationFrame is only once, so it needs to be registered in a loop to achieve the effect of always calling window.requestAnimationFrame(renderFun); }; / / window.requestAnimationFrame(renderFun); renderFun();//画布全屏
window.addEventListener("dblclick", () => {
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
//document.documentElement.requestFullscreen();
render.domElement.requestFullscreen();
}
});//Monitor screen changes, update the rendered screen, (adaptive size)
window.addEventListener("resize", () => { //Update the aspect ratio of the camera camera.aspect = window.innerWidth / window.innerHeight; / /Update the camera's projection matrix camera.updateProjectionMatrix(); //Update the width and height of the renderer render.setSize(window.innerWidth, window.innerHeight); //Set the pixel ratio of the renderer render.setPixelRatio(window.devicePixelRatio); console.log("The screen has changed"); }); }, methods: { pause(animate) { animate.pause(); },
},
};
</script><style scoped lang="scss">
</style>
Renderings:
spotlight arc
key code:
//directionalLight. angle = Math.PI/10;
gui.add(directionalLight, 'angle').min(0).max(Math.PI/2).step(0.1).name("Light arc");
Full code:
<template>
<div id="three_div"></div>
</template><script>
import * as dat from 'dat.gui' //interface control
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; import { RGBELoader } from "three /examples/jsm/loaders/RGBELoader" export default { name: "HOME", components: { // vueQr, // glHome, }, data() { return {}; }, mounted() { // use the controller Control 3D drag and rotate OrbitControls //Control the movement of 3D objects
//1. Create a scene
const scene = new THREE.Scene();
console.log(scene);//2. Create camera
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
//Set camera position
camera.position.set(0, 0, 10);
//Set Add the camera to the scene
scene.add(camera);
//Add an object
//Create a ball with a radius of 1 and a segmented digit of latitude and longitude of 20
const cubeGeometry = new THREE.SphereBufferGeometry(2, 100, 100);
//Texture loader Load image
const cubeMaterial = new THREE.MeshStandardMaterial({ //side: THREE.DoubleSide, });
//Create objects based on geometry and materials
const mesh = new THREE.Mesh(cubeGeometry, cubeMaterial);
//Add objects to the scene
scene.add(mesh);//Create a plane geometry
const planeGeometry = new THREE.PlaneBufferGeometry(50, 50);
//Create a plane object
const planeMesh = new THREE.Mesh(planeGeometry, cubeMaterial);
planeMesh.position.set(0, -2, 0);
planeMesh.rotation.x = -Math.PI / 2;
//Scene add plane object
scene.add(planeMesh);//Add the default environment map to all objects in the scene
//Add the coordinate axis helper
const axesHepler = new THREE.AxesHelper(5);
scene.add(axesHepler);
//Standard materials need the help of lights//Add ambient light (light emitted by objects) parameters (light color, intensity 0-1)
const light = new THREE.AmbientLight(0xFFFFFF, 0.7);
scene.add(light);
//Linear light (by light source Light emitted)
// const directionalLight = new THREE.DirectionalLight(0xFFFFFF, 0.7);
// directionalLight.position.set(10, 10, 10);
// scene.add(directionalLight);
const directionalLight = new THREE.SpotLight (0xFFFFFF, 0.7);
directionalLight.position.set(10, 10, 10);
scene.add(directionalLight);// scene.add(mesh2);
//Initialize the renderer
const render = new THREE.WebGLRenderer();
//Set the size of the renderer
render.setSize(window.innerWidth, window.innerHeight);
//Use the renderer, Render the scene through the camera//Create an orbit controller that can be dragged to control the camera
const controls = new OrbitControls(camera, render.domElement);
//Set control damping to make the controller have a more realistic effect
controls.enableDamping = true;
//Enable projection
//Enable renderer projection
render.shadowMap.enabled = true;
//Enable light dynamic projection
directionalLight.castShadow = true;
//Enable object projection
mesh.castShadow = true;
//Enable plane accept projection
planeMesh.receiveShadow = true;
//projection blur
directionalLight.shadow.radius = 10;
//set the width and height of the projection
//directionalLight.shadow.mapSize.set(1024, 1024);//Properties of parallel light projection camera
// directionalLight.shadow.camera.near= 0.5;
// directionalLight.shadow.camera.far= 500;
// directionalLight.shadow.camera.top= 3;
// directionalLight.shadow. camera.bottom= -2;
// directionalLight.shadow.camera.left= -2;
// directionalLight.shadow.camera.right= 2;
//The light moves as the object moves
directionalLight.target = mesh;
//directionalLight. angle = Math.PI/10;
// create gui
const gui = new dat.GUI();
// gui.add(directionalLight.shadow.camera, 'near').min(1).max(25).step (1).name("Camera close range").onChange( () => {
// directionalLight.shadow.camera.updateProjectionMatrix();
// })
gui.add(mesh.position, 'x').min(-30).max(30).step(1).name("Move position ");
gui.add(directionalLight, 'angle').min(0).max(Math.PI/2).step(0.1).name("Light radian"); //
Add the canvas content rendered by webgl Go to the body
document.getElementById("three_div").appendChild(render.domElement);//The callback function will be called when the next frame is rendered
let renderFun = () => { //Update the damping data controls.update(); //Need to redraw the canvas render.render(scene, camera); // Monitor screen refresh (60HZ, 120HZ), each refresh triggers a requestAnimationFrame callback function //But the callback function registration life of requestAnimationFrame is only once, so it needs to be registered in a loop to achieve the effect of always calling window.requestAnimationFrame(renderFun); }; / / window.requestAnimationFrame(renderFun); renderFun();//画布全屏
window.addEventListener("dblclick", () => {
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
//document.documentElement.requestFullscreen();
render.domElement.requestFullscreen();
}
});//Monitor screen changes, update the rendered screen, (adaptive size)
window.addEventListener("resize", () => { //Update the aspect ratio of the camera camera.aspect = window.innerWidth / window.innerHeight; / /Update the camera's projection matrix camera.updateProjectionMatrix(); //Update the width and height of the renderer render.setSize(window.innerWidth, window.innerHeight); //Set the pixel ratio of the renderer render.setPixelRatio(window.devicePixelRatio); console.log("The screen has changed"); }); }, methods: { pause(animate) { animate.pause(); },
},
};
</script><style scoped lang="scss">
</style>
Renderings:
