首页 > 其他分享 >Threejs:光影

Threejs:光影

时间:2022-12-08 22:55:20浏览次数:48  
标签:10 Threejs const 光影 THREE scene add new

 环境光

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

相关文章

  • Threejs:捕获鼠标位置
     //获取鼠标坐标functiononPointerMove(event){//将鼠标点击位置的屏幕坐标转换成threejs中的标准坐标mouse.x=(event.clientX/window.innerWidth)*2-......
  • Threejs:创建矩阵
     设置顶点创建矩形constgeometry3=newTHREE.BufferGeometry();constvertices=newFloat32Array([-1.0,-1.0,1.0,1.0,-1.0,1.0,1.0,1.0,1.0,......
  • Threejs:创建纹理
    创建纹理//导入纹理constloader=newTHREE.TextureLoader();//加载所需要的纹理图片consttexture1=loader.load('./dist/texture/sea.jpg')constmaterial5......
  • Threejs:创建几何体——图元
     BoxGeometry盒子+MeshBasicMaterialconstgeometry=newTHREE.BoxGeometry(1,1,1);constmaterial=newTHREE.MeshBasicMaterial({color:0x00ff00});const......
  • Threejs教程-07-光源2
    接上节,讲了Threejs06”。本节具体讲解一些Threejs的知识点。首先有条件的话搞个服务器,这里还是用的三丰云免费云服务器,免费虚拟主机在这里不适用就不介绍了,安装的Centos7......
  • Threejs:渲染第一个场景
     导入方式1import*asTHREEfrom"three"; //设置场景constscene=newTHREE.Scene(); //初始化渲染器constrenderer=newTHREE.WebGLRenderer();......
  • Threejs:创建文字
    1.DOM+CSS2.将文字绘制到画布中,并将其用作Texture(纹理)如果你希望在three.js的场景中的平面上轻松地绘制文本,请使用此方法。3.在你所喜欢的3D软件里创建模型,并导......
  • Threejs:安装及其环境
    vue3框架安装:npminstallthree导入://方式1:导入整个three.js核心库import*asTHREEfrom'three';constscene=newTHREE.Scene(); //方式2:仅导......
  • threejs + blender 纺纱机 模型 实践
    模型:清花机、梳棉机、并条机、粗纱机、细纱机、络筒机   访问:demo......
  • Threejs教程-06-光源和材质
    接上节,讲了Threejs05”。本节具体讲解一些Threejs的知识点。首先有条件的话搞个服务器,这里还是用的三丰云免费云服务器,免费虚拟主机在这里不适用就不介绍了,安装的Centos7......