网站建设怎样容易,ui作品集 网站怎么做,wordpress转微信支付宝,做一个个人主页的网站怎么做本文的话 我们来设置一下点光源
点光源其实最直观的就是可以做萤火虫 也可以做星光 点点的效果
我们可以直接在官网中搜索 Pointlight 大家可以在官网这里看一下 其实 SpotLight 聚关灯中的属性 Pointlight 点光源也有的 我们先编写代码如下
import ./style.css
import * a…本文的话 我们来设置一下点光源
点光源其实最直观的就是可以做萤火虫 也可以做星光 点点的效果
我们可以直接在官网中搜索 Pointlight 大家可以在官网这里看一下 其实 SpotLight 聚关灯中的属性 Pointlight 点光源也有的 我们先编写代码如下
import ./style.css
import * as THREE from three;
import { OrbitControls } from three/examples/jsm/controls/OrbitControls.js;// 创建相机
const camera new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,0.1,1000
);
const scene new THREE.Scene();// 环境光
const light new THREE.AmbientLight(0xffffff, 0.5);
scene.add(light);// 创建球形几何体
const sphere1 new THREE.Mesh(new THREE.SphereGeometry(0.7, 32, 32),new THREE.MeshStandardMaterial({})
);
sphere1.castShadow true;
sphere1.receiveShadow true;
scene.add(sphere1);// 添加平面
const plane new THREE.Mesh(new THREE.PlaneGeometry(5, 5),new THREE.MeshStandardMaterial({ color: 0xeeeeee })
);
plane.position.set(0, -1, 0);
plane.rotation.x -Math.PI / 2;
plane.receiveShadow true;
scene.add(plane);// 聚光灯光源
const Point new THREE.PointLight(0xff0000, 1);
Point.position.set(1, 0, 0);
Point.castShadow true;
Point.shadow.mapSize.set(512, 512);
scene.add(Point);// 创建一个canvas容器并追加到body上
const renderer new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled true;
renderer.physicallyCorrectLights true;
document.body.appendChild(renderer.domElement);// 设置相机位置
camera.position.z 5;
camera.lookAt(0, 0, 0);// 添加控制器
const controls new OrbitControls(camera, renderer.domElement);function animate() {controls.update();requestAnimationFrame(animate);renderer.render(scene, camera);
}
animate();PointLight 创建一个点光源 这里我们给了 红色0xff0000 然后 调整了 position 的位置 castShadow 允许阴影 mapSize 设置了宽高 我们 distance 调一下它照射的最大距离 这里 我们来个1 这里 我们就 光距离变小了很多 decay 可以设置衰减的幅度 默认2 我们这里 给个0 不衰减 光照变的非常强 如果你想在 逻辑代码 例如 gui事件中 修改 decay 需要先将 渲染器的 physicallyCorrectLights 字段设为true 否者它不重新计算 你改了值 它不会变化的
当然 开头 我说 可以做萤火虫 这一光照效果 并没有实现这个效果 很多人就会想 这做个啥的萤火虫哦
我们改写代码如下
import ./style.css
import * as THREE from three;
import { OrbitControls } from three/examples/jsm/controls/OrbitControls.js;// 创建相机
const camera new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,0.1,1000
);
const scene new THREE.Scene();// 环境光
const light new THREE.AmbientLight(0xffffff, 0.5);
scene.add(light);// 创建球形几何体
const sphere1 new THREE.Mesh(new THREE.SphereGeometry(0.7, 32, 32),new THREE.MeshStandardMaterial({})
);
sphere1.castShadow true;
sphere1.receiveShadow true;
scene.add(sphere1);// 添加平面
const plane new THREE.Mesh(new THREE.PlaneGeometry(5, 5),new THREE.MeshStandardMaterial({ color: 0xeeeeee })
);
plane.position.set(0, -1, 0);
plane.rotation.x -Math.PI / 2;
plane.receiveShadow true;
scene.add(plane);const smallBall new THREE.Mesh(new THREE.SphereGeometry(0.1, 20, 20),new THREE.MeshBasicMaterial({ color: 0xff0000 })
);
smallBall.position.set(1, 0, 0);
scene.add(smallBall);
// 聚光灯光源
const Point new THREE.PointLight(0xff0000, 1);
Point.position.set(1, 0, 0);
Point.castShadow true;
Point.shadow.mapSize.set(512, 512);
Point.decay 0;smallBall.add(Point);// 创建一个canvas容器并追加到body上
const renderer new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled true;
renderer.physicallyCorrectLights true;
document.body.appendChild(renderer.domElement);// 设置相机位置
camera.position.z 5;
camera.lookAt(0, 0, 0);// 添加控制器
const controls new OrbitControls(camera, renderer.domElement);function animate() {controls.update();requestAnimationFrame(animate);renderer.render(scene, camera);
}
animate();我们这里 直接通过 SphereGeometry 创造一个原点 材质 color设为 0xff0000 红色 命名为 smallBall 调整 position位置后 然后 加入场景 scene.add(smallBall); 然后 我们之前的点光源直接 add到这个 smallBall中 运行结果如下 这样 就做出了一个小点在发光的效果
然后 我们在最下面 加上一些代码
const clock new THREE.Clock();function animate() {let time clock.getElapsedTime();smallBall.position.z Math.sin(time);smallBall.position.x Math.cos(time);controls.update();requestAnimationFrame(animate);renderer.render(scene, camera);
}
animate();const clock new THREE.Clock(); 声明一个时钟 然后 在运行是不断计算 改变smallBall x z轴位置 就会发现 我们的小原点 一直围绕这我们中心的球转 且外部的环境光也会跟着一起动 大家可能比较好奇 clock.getElapsedTime 拿到的 time 到底是什么 我们控制台输出一下 运行代码 在Three.js中THREE.Clock()是一个计时器对象getElapsedTime()方法用于获取从创建计时器对象开始到当前时刻的时间间隔单位为秒。代码中let time clock.getElapsedTime();用于获取动画运行的时间然后通过Math.sin(time)和Math.cos(time)来计算小球的位置。
如果你想上下动 操作 y 就好了
我们设置可以用这个做出太阳东升西落的效果了
