当前位置: 首页 > news >正文

threejs 实现灯光照射模型有阴影

“three”: “^0.169.0”
estudi_taller_carles_fontsere.glb:替换你的模型路径请添加图片描述

<template><div class="threejs"></div>
</template><script setup>
import { onMounted } from "vue";
import * as THREE from "three";
// 加载器
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
// 控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { TransformControls } from "three/examples/jsm/controls/TransformControls.js";const scene = new THREE.Scene();const camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000
);
camera.position.set(0, 100, 0);const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
new OrbitControls(camera, renderer.domElement);const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 10, 20);
scene.add(directionalLight);const helper = new THREE.DirectionalLightHelper(directionalLight, 20);
scene.add(helper);const render = () => {if (renderer) {renderer.render(scene, camera);}requestAnimationFrame(render);
};
render();const transformControls = new TransformControls(camera, renderer.domElement);const loader = new GLTFLoader();
loader.load("estudi_taller_carles_fontsere.glb", (gltf) => {scene.add(gltf.scene);transformControls.setMode("rotate");transformControls.attach(gltf.scene);scene.add(transformControls.getHelper());
});onMounted(() => {document.querySelector(".threejs").appendChild(renderer.domElement);
});
</script><style scoped>
.threejs {width: 100vw;height: 100vh;
}
</style>

http://www.mrgr.cn/news/61848.html

相关文章:

  • 飞书文档解除复制限制
  • 使用TimeShift备份和恢复Ubuntu Linux
  • 智能家居10G雷达感应开关模块,飞睿智能uA级别低功耗、超高灵敏度,瞬间响应快
  • 《自动驾驶技术的深度思考:安全与伦理的挑战》
  • C++初阶(七)--类和对象(4)
  • 数据结构——(第七章:查找)
  • MyBatis 读取全局变量
  • 好用的透明加密软件有哪些
  • yolov8训练及测试(ubuntu18.04、tensorrt、ros)
  • 反射机制(简单版)
  • Nature: 一种基于宏基因组序列空间生成无参考的蛋白质家族的计算方法
  • 算法日记 13 day 二叉树
  • 【Java】继承
  • 【名单】科大睿智祝贺企业通过DCMM认证最新公示名单
  • 指令集架构(ISA)
  • 教你详细使用Spring框架中编程式事务
  • Vue3 学习笔记(十二)侦听器详解
  • 管家婆财贸ERP BB060.销售订单导入+BB067.销售订单修改BOM类型
  • 期权懂|如何理解Black-Ssholes期权定价模型?
  • 鸿蒙生态的崛起与开发者机遇
  • 3D Gaussian Splatting代码详解(一):模型训练、数据加载
  • C++|运算符优先级
  • Doris集群搭建
  • AI如何提升Web3中的用户体验与数据管理
  • [win] 删除文件空行的方法
  • PPT批量替换字体