学习threejs,实现几何体阴影效果

news2024/12/24 21:32:03

👨‍⚕️ 主页: gis分享者
👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍⚕️ 收录于专栏:threejs gis工程师


文章目录

  • 一、🍀前言
  • 二、🍀绘制任意字体模型
    • 1. ☘️实现思路
    • 2. ☘️代码样例


一、🍀前言

本文详细介绍基于threejs如何绘制任意文字模型,亲测可用。希望能帮助到您。一起学习,加油!加油!

二、🍀绘制任意字体模型

1. ☘️实现思路

  • 1、初始化renderer渲染器
  • 2、初始化Scene三维场景
  • 3、初始化camera相机,定义相机位置 camera.position.set
  • 4、初始化light灯光,定义灯光位置,开启light.castShadow灯光阴影,Scene场景加入灯光
  • 5、加载几何模型:创建SphereGeometry球体、BoxGeometry立方体、PlaneGeometry地面几何体以及AxisHelper辅助工具坐标系,Scene场景加入以上几何体和工具。
  • 6、加入controls控制,加入stats监控器,监控帧数信息

2. ☘️代码样例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>learn9(实现阴影效果)</title>
    <script src="lib/threejs/127/three.js-master/build/three.js"></script>
    <script src="lib/threejs/127/three.js-master/examples/js/controls/TrackballControls.js"></script>
    <script src="lib/threejs/127/three.js-master/examples/js/libs/stats.min.js"></script>
</head>
<style>
    body {
        margin: 0;
    }

    canvas {
        width: 100%;
        height: 100%;
        display: block;
    }
</style>
<body onload="draw()">

</body>
<script>
  var renderer
  var initRender = () => {
    // 抗锯齿
    renderer = new THREE.WebGLRenderer({antialias: true})
    renderer.setSize(window.innerWidth, window.innerHeight)
    renderer.shadowMap.enabled = true
    // 默认的是,没有设置的这个清晰 THREE.PCFShadowMap
    renderer.shadowMap.type = THREE.PCFSoftShadowMap
    document.body.appendChild(renderer.domElement)
  }
  var camera
  var initCamera = () => {
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
    camera.position.set(0, 40, 100)
    camera.lookAt(new THREE.Vector3(0, 0, 0))
  }
  var scene
  var initScene = () => {
    scene = new THREE.Scene()
    // scene.fog = new THREE.FogExp2(0xffffff,0.02)
    scene.fog = new THREE.Fog(0xffffff, 100, 120)
  }
  var light
  var initLight = () => {
    scene.add(new THREE.AmbientLight(0x444444))

    light = new THREE.SpotLight(0xffffff)
    light.position.set(60, 30, 0)

    //告诉平行光需要开启阴影投射
    light.castShadow = true

    scene.add(light)
  }

  var initModel = () => {
    // 球
    var sphereGemometry = new THREE.SphereGeometry(5, 20, 20)
    var sphereMatarial = new THREE.MeshStandardMaterial({color: 0x7777ff})
    var sphere = new THREE.Mesh(sphereGemometry, sphereMatarial)
    sphere.position.set(0, 5, 0)
    sphere.castShadow = true
    scene.add(sphere)

    //辅助工具
    var helper = new THREE.AxisHelper(10)
    scene.add(helper)

    //立方体
    var cubeGeometry = new THREE.BoxGeometry(10, 10, 8)
    var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x00ffff})
    var cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
    cube.position.x = 25
    cube.position.y = 5
    cube.position.z = -5
    //告诉立方体需要投射阴影
    cube.castShadow = true
    scene.add(cube)

    // 底面
    var planeGeometry = new THREE.PlaneGeometry(100, 100)
    var planeMatarial = new THREE.MeshStandardMaterial({color: 0xaaaaaa})
    var plane = new THREE.Mesh(planeGeometry, planeMatarial)
    plane.rotation.x = -0.5 * Math.PI
    plane.position.y = -0
    plane.receiveShadow = true
    scene.add(plane)
  }

  var stats
  var initStats = () => {
    stats = new Stats()
    document.body.appendChild(stats.dom)
  }
  var controls
  var initControle = () => {
    controls = new THREE.TrackballControls(camera, renderer.domElement)
    controls.addEventListener('change', render)
  }
  var render = () => {
    renderer.render(scene, camera)
  }
  var onWindwosResize = () => {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    controls.handleResize()
    render()
    renderer.setSize(window.innerWidth, window.innerHeight)
  }

  var animate = () => {
    render()
    stats.update()
    controls.update()
    requestAnimationFrame(animate)
  }

  var draw = () => {
    initRender()
    initScene()
    initCamera()
    initLight()
    initModel()
    initControle()
    initStats()
    animate()

    window.onresize = onWindwosResize
  }

</script>
</html>

效果如下:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2171659.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

量化交易backtrader实践(三)_指标与策略篇(1)_指标简介与手工双均线策略

01_指标 指标是一个汉语词语&#xff0c;读音是zhǐ biāo&#xff0c;意思是衡量目标的参数&#xff1b;预期中打算达到的指数、规格、标准&#xff0c;一般用数据表示。 统计学术语 指标是说明总体数量特征的概念及其数值的综合&#xff0c;故又称为综合指标。在实际的统计…

使用ESPnet的 setup_anaconda.sh安装脚本一步到位,配置conda虚拟环境

使用ESPnet的 setup_anaconda.sh安装脚本一步到位&#xff0c;配置conda虚拟环境 前言 ESPnet&#xff08;End-to-End Speech Processing Toolkit&#xff09;是一款用于语音识别、语音合成等任务的开源端到端语音处理工具包。为了在不同系统上快速配置ESPnet开发环境&#x…

Serverless and Go

本篇内容是根据2019年8月份Serverless and Go音频录制内容的整理与翻译, Johnny、Mat、Jaana 和特邀嘉宾 Stevenson Jean-Pierre 讨论了 Go 世界中的Serverless。什么是Serverless&#xff0c;Serverless适用于哪些用例&#xff0c;有哪些权衡&#xff0c;以及如何在Serverles…

AI芯片WT2605C赋能厨房家电,在线对话操控,引领智能烹饪新体验:尽享高效便捷生活

在智能家居的蓬勃发展中&#xff0c;智能厨电作为连接科技与生活的桥梁&#xff0c;正逐步渗透到每一个现代家庭的厨房中。蒸烤箱作为智能厨电的代表&#xff0c;以其丰富的功能和高效的性能&#xff0c;满足了人们对美食的多样化追求。然而&#xff0c;面对众多复杂的操作功能…

每日OJ_牛客_OR59字符串中找出连续最长的数字串_双指针_C++_Java

目录 牛客_OR59字符串中找出连续最长的数字串 题目解析 C代码1 C代码2 C代码3 Java代码 牛客_OR59字符串中找出连续最长的数字串 字符串中找出连续最长的数字串_牛客题霸_牛客网 题目解析 双指针&#xff1a; 遍历整个字符串&#xff0c;遇到数字的时候&#xff0c;用双…

字符编码发展史4 — Unicode与UTF-8

上一篇《字符编码发展史3 — GB2312/Big5/GBK/GB18030》我们讲解了ANSI编码中的GB2312/Big5/GBK/GB18030。本篇我们将继续讲解字符编码的第三个发展阶段中的Unicode与UTF-8。 2.3. 第三个阶段 国际化 前面提到的第二个阶段&#xff0c;各个国家和地区各自为政&#xff0c;纷纷…

并发编程---线程与进程

业务场景&#xff1a;小明去理发店理发。 小明去理发店理发&#xff0c;完成理发需要吹&#xff0c;剪&#xff0c;洗、理的过程。由这个场景我们引用进程和线程这两个 概念。 一.进程 1.什么是进程 进程是具有独立功能的程序关于某个数据集合上的一次运行活动&#xff0c;是…

【docker】debian中配置docker(2024年9月)

首先Follow了一下菜鸟教程&#xff0c;然后遇到了curl的问题。 curl存在的问题 参见这篇文章。其中用到了vim进行编辑&#xff0c;笔者的环境是windows10putty&#xff0c;vim的粘贴操作参考这篇文章。 修改之后的curl没有问题了&#xff0c;成功把脚本下载下来了。 但是在…

LD2 Scalable Heterophilous Graph Neural Network with Decoupled Embeddings

Neurips 24 推荐指数&#xff1a; #paper/⭐⭐⭐ 领域&#xff1a;可扩展图&#xff0c;大图加速 整个文章的理论部分比较多&#xff0c;尽量尽我所能避开一些额外公式。详细文章&#xff0c;见链接 模型架构 如图&#xff0c;整个模型分为与计算和训练两部分。本文的精华在于…

Docker网络、数据卷及安全优化

目录 一、Docker网络 1、原生bridge网络 2、host网络 3、none网络 4、docker自定义桥接网络 1、Docker自定义网络 2、不同自定义网络通信 3、joined容器网络 5、Docker容器内外网访问 1、容器访问外网 2、外网访问容器 6、macvlan网络实现跨主机通信 二、Docker数据…

Ubuntu下Kafka安装及使用

Kafka是由Apache软件基金会开发的一个开源流处理平台&#xff0c;同时也是一个高吞吐量的分布式发布订阅消息系统。它由Scala和Java编写&#xff0c;具有多种特性和广泛的应用场景。 Kafka是一个分布式消息系统&#xff0c;它允许生产者&#xff08;Producer&#xff09;发布消…

Spring Ioc底层原理代码详细解释

文章目录 概要根据需求编写XML文件&#xff0c;配置需要创建的bean编写程序读取XML文件&#xff0c;获取bean相关信息&#xff0c;类&#xff0c;属性&#xff0c;id前提知识点Dom4j根据第二步获取到的信息&#xff0c;结合反射机制动态创建对象&#xff0c;同时完成属性赋值将…

【移植】标准系统方案之扬帆移植案例

往期知识点记录&#xff1a; 鸿蒙&#xff08;HarmonyOS&#xff09;应用层开发&#xff08;北向&#xff09;知识点汇总 鸿蒙&#xff08;OpenHarmony&#xff09;南向开发保姆级知识点汇总~ 持续更新中…… 本文章是基于瑞芯微RK3399芯片的yangfan开发板&#xff0c;进行标准…

一些写论文必须要知道的神仙级网站!芝士AI(paperzz)

说实话&#xff0c;写论文真的是挺头疼&#xff0c;尤其到了毕业季的时候&#xff0c;没有过任何写作毕业论文的经验的毕业生而言更是如此&#xff0c;相信大家都有过这种状态&#xff0c;不知从何下笔&#xff0c;还需要面对论文进度的压力&#xff0c;并且时常需要寻找各种资…

HDF5文件浏览软件--H5View

概述 H5View是一款轻量级桌面软件&#xff0c;旨在提供用户友好的界面以读取和展示 HDF5 文件中的数据结构。该软件允许用户查看文件的数据目录和数据集&#xff0c;并支持将选定的数据集导出为多种格式。 功能特点 读取 HDF5 文件 支持打开和读取 HDF5 格式的文件。显示文件…

Lenovo SR850服务器亮黄灯维修和升级CPU扩展模块

佛山市三水区某高校1台Lenovo Thinksystem SR850服务器黄灯故障到现场检修 和 升级3号和4号CPU。加强服务器的计算性能&#xff1b; 故障情况是该学校it管理员这一天看到这台SR850服务器前面板亮了一个黄灯&#xff0c;但是目前系统运行正常&#xff0c;出于安全考虑&#xff0…

JavaFX 如何加载系统资源

简介 问题描述&#xff1a;JavaFX 加载图片资源异常&#xff0c;即使路径正确 如何解决&#xff1a;使用反射 API 如何解决 import javafx.scene.image.Image; import org.junit.jupiter.api.Test;import java.util.Objects;public class ImageTest {Testvoid name() {Image…

golang web笔记-1.创建Web Server和Handler请求

1. 创建http web server的两个方法 1.1. 方式一&#xff1a;http.ListenAndServe(addr string, handler Handler) addr string&#xff1a;监听地址&#xff0c;如果为"" ,那么就是所有网络接口的80接口handler Handler&#xff1a;如果为nil&#xff0c;那么就是D…

TypeScript 设计模式之【状态模式】

文章目录 状态模式&#xff1a;优雅切换的交通信号灯状态模式的奥秘状态模式有什么利与弊?如何使用状态模式来优化你的系统代码实现案例状态模式的主要优点状态模式的主要缺点状态模式的适用场景总结 状态模式&#xff1a;优雅切换的交通信号灯 当你站在繁忙的十字路口&#…

RabbitMQ 实验入门

使用 spring-amqp 实验 发布订阅模型 fanoutExchange 实验 实验步骤&#xff1a; 编写定义 队列 和 交换机 绑定关系的代码创建接口&#xff0c;模拟生产者&#xff0c;方便调试&#xff08;接受参数 队列名、路由键、[消息]&#xff09;定义消费者 代码示例&#xff1a; C…