环境光
const color = 0xFFFFFF; const intensity = 1; const light = new THREE.AmbientLight(color, intensity); scene.add(light);
创建地面
const planeSize = 40;const planeGeo = new THREE.PlaneGeometry(planeSize, planeSize); const planeMat = new THREE.MeshPhongMaterial({ map: texture, side: THREE.DoubleSide, }); const mesh3 = new THREE.Mesh(planeGeo, planeMat); mesh.rotation.x = Math.PI * -.5; scene.add(mesh3)
完整代码
import * as THREE from "three" import {OrbitControls} from "three/examples/jsm/controls/OrbitControls" import { Scene, PerspectiveCamera, WebGLRenderer, Mesh, BoxGeometry, PlaneGeometry, MeshBasicMaterial, MeshStandardMaterial, Raycaster, Vector2, MeshPhongMaterial, DirectionalLight, } from 'three'; // 创建一个场景 const scene = new THREE.Scene(); // 设置摄像机 const camera = new THREE.PerspectiveCamera( 45, window.innerWidth/window.innerHeight, 0.1, 1000 ); camera.position.set(0,10,5) scene.add(camera) // 初始化渲染器 const renderer = new THREE.WebGLRenderer(); // 渲染尺寸 renderer.setSize( window.innerWidth, window.innerHeight ); // 给渲染器开启阴影的计算 renderer.shadowMap.enabled = true; // 将其添加到body节点 document.body.appendChild( renderer.domElement ); // 设置轨道控制器 const controls = new OrbitControls( camera, renderer.domElement ); // 设置观测点 controls.target.set(0, 0, 0); controls.update(); camera.position.z = 5; // 设置动画 function animate() { // 渲染场景 renderer.render( scene, camera ); requestAnimationFrame( animate ); } animate(); // 创建几何体 const geometry = new THREE.SphereGeometry( 1, 20, 20 ); const material = new THREE.MeshStandardMaterial( { color: 0xffffff } ); const sphere = new THREE.Mesh( geometry, material ); // scene.add( sphere ); //投射阴影 sphere.castShadow = true; scene.add(sphere); // 创建平面 // const geometry = new THREE.PlaneGeometry( 1, 1 ); // const material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} ); // const plane = new THREE.Mesh( geometry, material ); const planeGeometry = new THREE.PlaneGeometry(10,10); 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 color = 0xFFFfff; const intensity = 0.5; const light = new THREE.AmbientLight(color, intensity); scene.add(light); // 方向光(直线光源) const color2 = 0xFFFFFF; const intensity2 = 0.3; const light2 = new THREE.DirectionalLight(color2, intensity2); light2.position.set(10, 10, 10); light2.castShadow = true; light2.target.position.set(-5, 0, 0); scene.add(light2); scene.add(light2.target); //改变光源分析不同 // 点光源 // const color3 = 0xFFFFFF; // const intensity3 = 1; // const light3 = new THREE.PointLight(color3, intensity3); // light3.position.set(0, 10, 0); // light3.castShadow = true; // scene.add(light3); // // 聚光灯 // const color4 = 0xFFFFFF; // const intensity4 = 1; // const light4 = new THREE.SpotLight(color4, intensity4); // scene.add(light4); // scene.add(light4.target); // // 光源的位置是圆锥的顶点,目标点处于圆锥的中轴线上。 // const helper = new THREE.SpotLightHelper(light4); // scene.add(helper); // const gui = new dat.GUI(); // gui.add(new DegRadHelper(light, 'angle'), 'value', 0, 90).name('angle').onChange(updateLight);
标签:10,Threejs,const,光影,THREE,scene,add,new From: https://www.cnblogs.com/LIXI-/p/16967659.html