三网合一网站 东莞,装修设计的网站,服装企业网站建设的目的,有经验的企业做网站34. Three.js案例-创建球体与模糊阴影
实现效果 知识点
WebGLRenderer
WebGLRenderer 是 Three.js 中用于渲染 3D 场景的核心类。它负责将场景中的对象绘制到画布上。
构造器
new THREE.WebGLRenderer(parameters)参数类型描述parametersObject可选参数对象#xff0c;包…34. Three.js案例-创建球体与模糊阴影
实现效果 知识点
WebGLRenderer
WebGLRenderer 是 Three.js 中用于渲染 3D 场景的核心类。它负责将场景中的对象绘制到画布上。
构造器
new THREE.WebGLRenderer(parameters)参数类型描述parametersObject可选参数对象包含以下属性antialiasBoolean是否开启抗锯齿默认为 false。alphaBoolean是否透明默认为 false。premultipliedAlphaBoolean是否使用预乘 Alpha默认为 true。preserveDrawingBufferBoolean是否保留绘图缓冲区默认为 false。stencilBoolean是否启用模板缓冲区默认为 true。depthBoolean是否启用深度缓冲区默认为 true。
方法
setPixelRatio(value): 设置设备像素比。setSize(width, height): 设置渲染器的尺寸。setClearColor(color, alpha): 设置渲染器的背景颜色。render(scene, camera): 渲染场景。
Scene
Scene 是 Three.js 中用于存储场景中所有对象的容器。
构造器
new THREE.Scene()PerspectiveCamera
PerspectiveCamera 是 Three.js 中用于创建透视相机的类。
构造器
new THREE.PerspectiveCamera(fov, aspect, near, far)参数类型描述fovNumber视野角度单位为度。aspectNumber相机宽高比。nearNumber近裁剪面距离。farNumber远裁剪面距离。
方法
position.set(x, y, z): 设置相机的位置。lookAt(vector): 设置相机的朝向。
DirectionalLight
DirectionalLight 是 Three.js 中用于创建方向光的类。
构造器
new THREE.DirectionalLight(color, intensity)参数类型描述colorColor光源颜色。intensityNumber光源强度默认为 1。
属性
castShadow: 是否投射阴影默认为 false。shadow.radius: 阴影半径用于产生模糊效果。
SphereBufferGeometry
SphereBufferGeometry 是 Three.js 中用于创建球体几何体的类。
构造器
new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments)参数类型描述radiusNumber球体半径。widthSegmentsNumber经度方向上的分段数默认为 8。heightSegmentsNumber纬度方向上的分段数默认为 6。
Mesh
Mesh 是 Three.js 中用于创建网格对象的类。
构造器
new THREE.Mesh(geometry, material)参数类型描述geometryGeometry几何体。materialMaterial材质。
属性
castShadow: 是否投射阴影默认为 false。receiveShadow: 是否接收阴影默认为 false。
PlaneGeometry
PlaneGeometry 是 Three.js 中用于创建平面几何体的类。
构造器
new THREE.PlaneGeometry(width, height, widthSegments, heightSegments)参数类型描述widthNumber平面宽度。heightNumber平面高度。widthSegmentsNumber宽度方向上的分段数默认为 1。heightSegmentsNumber高度方向上的分段数默认为 1。
MeshStandardMaterial
MeshStandardMaterial 是 Three.js 中用于创建标准材质的类。
构造器
new THREE.MeshStandardMaterial(parameters)参数类型描述colorColor材质颜色。metalnessNumber金属度默认为 0。roughnessNumber粗糙度默认为 1。
Vector3
Vector3 是 Three.js 中用于表示三维向量的类。
构造器
new THREE.Vector3(x, y, z)参数类型描述xNumberX 轴坐标。yNumberY 轴坐标。zNumberZ 轴坐标。
方法
set(x, y, z): 设置向量的坐标。rotateX(angle): 绕 X 轴旋转。rotateY(angle): 绕 Y 轴旋转。rotateZ(angle): 绕 Z 轴旋转。
代码
!DOCTYPE html
html
headmeta charsetUTF-8script srcThreeJS/three.js/scriptscript srcThreeJS/jquery.js/script
/head
body
div idmyContainer/div
script// 创建渲染器var myRenderer new THREE.WebGLRenderer();myRenderer.setPixelRatio(window.devicePixelRatio);myRenderer.setSize(480, 320);myRenderer.setClearColor(white, 1);myRenderer.shadowMap.enabled true;$(#myContainer).append(myRenderer.domElement);// 创建场景var myScene new THREE.Scene();// 创建相机var myCamera new THREE.PerspectiveCamera(45, 480 / 320, 0.1, 1000);myCamera.position.set(4, 4, 2);myCamera.position.multiplyScalar(2);myCamera.lookAt(new THREE.Vector3(0, 0, 0));// 创建方向光var myLight new THREE.DirectionalLight(white, 1);myLight.castShadow true;myLight.position.set(0, 14, 0);myLight.shadow.radius 16;myScene.add(myLight);// 创建球体var mySphereGeometry new THREE.SphereBufferGeometry(2, 36, 36);var mySphereMaterial new THREE.MeshNormalMaterial({wireframe: true, transparent: true});var mySphereMesh new THREE.Mesh(mySphereGeometry, mySphereMaterial);mySphereMesh.position.set(0, 2.5, 0);mySphereMesh.castShadow true;myScene.add(mySphereMesh);// 创建平面var myPlaneGeometry new THREE.PlaneGeometry(120, 120, 1, 1);var myPlaneMaterial new THREE.MeshStandardMaterial({color: white});var myPlaneMesh new THREE.Mesh(myPlaneGeometry, myPlaneMaterial);myPlaneMesh.rotateX(-Math.PI / 2);myPlaneMesh.rotateZ(-Math.PI / 7);myPlaneMesh.position.set(0, -4.5, 0);myPlaneMesh.receiveShadow true;myScene.add(myPlaneMesh);// 渲染场景myRenderer.render(myScene, myCamera);
/script
/body
/html演示链接
示例链接
